1. Используемые инструменты и технологии
2. Статьи по Теме

В моей предыдущей статье я писал об использовании загрузите 3 табличных класса с помощью GridView , По запросу посетителей я добавляю эту статью, используя классы начальной загрузки 4 таблицы. Добавление таблицы начальной загрузки с элементом управления GridView в веб-формах ASP.NET требует дополнительной настройки, чтобы GridView выглядел великолепно. Здесь я расскажу о дополнительных настройках, необходимых для элемента управления GridView для правильного использования начальной загрузки.

Используемые инструменты и технологии

• Bootstrap 4.1.1
• ASP.NET Web Forms
• .NET Framework 4.6.2
• Visual Studio 2017

Иллюстрация для таблицы начальной загрузки с GridView

Учтите, у вас есть простой GridView, прикрепленный к источнику SQLDataSource в файле aspx.

<asp: GridView ID = ”GridView1 ″ runat =” server ”AutoGenerateColumns =” False ”DataSourceID =” SqlDataSource1 ″ AllowPaging = ”true” PageSize = ”10 ″>
<Колонки>
<asp: BoundField DataField = ”CustomerName” HeaderText = ”CustomerName” SortExpression = ”CustomerName” />
<asp: BoundField DataField = ”PhoneNumber” HeaderText = ”PhoneNumber” SortExpression = ”PhoneNumber” />
<asp: BoundField DataField = ”PostalAddressLine1 ″ HeaderText =» PostalAddressLine1 ″ SortExpression = »PostalAddressLine1 ″ />
<asp: BoundField DataField = ”PostalAddressLine2 ″ HeaderText =» PostalAddressLine2 ″ SortExpression = »PostalAddressLine2 ″ />
<asp: BoundField DataField = ”PostalPostalCode» HeaderText = »PostalPostalCode» SortExpression = »PostalPostalCode» />
</ Columns>
<HeaderStyle CssClass = ”success” />
<PagerStyle CssClass = ”” />
</ Жерех: GridView>
<asp: SqlDataSource ID = ”SqlDataSource1 ″ runat =” server ”ConnectionString =” <% $ ConnectionStrings: WideWorldImportersConnectionString%> ”SelectCommand =» SELECT [CustomerName], [PhoneNumber], [PostalAddressLine1], [PostalAddressLine2]] [Продажа]. [Клиенты]»>

После компиляции GridView становится простой HTML-таблицей со строками и столбцами. Но в таблице нет разделенных разделов head <thead> и body <tbody> . Чтобы разделить таблицу по заголовку и телу, вы должны добавить строку кода в файл с выделенным кодом. В файле с выделенным кодом добавьте следующую строку кода. (Учитывая, что GridView1 является идентификатором GridView). Используя свойство HeaderRow.TableSection , вы можете указать расположение заголовка таблицы. Это поможет классу начальной загрузки соответствующим образом оформить строку заголовка таблицы и строки тела.

GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

Теперь добавьте класс начальной загрузки для таблицы в HTML-код элемента управления GridView (<asp: GridView ID = ”GridView1 ″ …………………………… ..>). Например, если вы хотите, чтобы GridView реагировал на мобильные устройства, включите класс начальной загрузки для таблиц: </ asp:

CssClass = ”таблица таблично-адаптивная”

Вы можете добавить больше стиля начальной загрузки в GridView. Например, чтобы иметь чередующиеся строки, добавьте класс начальной загрузки с чередованием таблиц в CssClass. Чтобы включить состояние наведения на строки, добавьте класс наведения таблицы следующим образом:

<asp: GridView ID = ”GridView1 ″ runat =” server ”AutoGenerateColumns =” False ”DataSourceID =” SqlDataSource1 ″ AllowPaging = ”true” PageSize = ”10 ″ CssClass =” таблично-чувствительный таблично-полосатый таблично-зависающий «>

Чтобы стилизовать строку заголовка GridView и сделать ее темнее, добавьте тег < HeaderStyle> внутри <asp: GridView> и ниже <Columns>. В теге HeaderStyle добавьте атрибут CssClass и включите класс начальной загрузки thead-dark , например так:

<HeaderStyle CssClass = ”thead-dark” />

Это все. Вы можете построить и запустить проект и посмотреть, как отформатирована таблица сетки. При необходимости вы можете добавить больше классов начальной загрузки в CssClass .

Статьи по Теме

Ссылка

• Об управлении GridView в MSDN ,

Похожие

Комментарии