ASP.NET Datagrid: как стиль?

Question

Может ли кто-нибудь сказать мне, как сделать стилизацию для элемента управления asp.net datagrid. У меня есть следующие требования. Я хочу знать, к каким свойствам относятся эти классы стилей.

1. У строки заголовка должна быть граница сверху и снизу. Без левого и правого границ. 2. Хотите иметь разделитель строк между каждым столбцом в строке заголовка. Не требуется для Left и Right.LEt, которые будут открыты. 3. Нужно применять разные стили для каждого значения столбца. Как упоминать различные классы для разных столбцов?

Я искал asolution, который делает в allbrowsers с таким же эффектом

Answer 1

Вы можете добавить раздел в <asp:DataGrid> теге так:

<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Top" BackColor="SaddleBrown" ForeColor="Ivory" /> 

Или вы можете установить стиль в шаблонах столбцов ike:

<asp:BoundColumn HeaderText="Account Number" 
DataField="AccountNumber" ReadOnly="True" 
HeaderStyle-Font-Bold="True" HeaderStyle-HorizontalAlign="Center" 
ItemStyle-HorizontalAlign="Left"></asp:BoundColumn> 

Я думаю, что вам будет лучше повезло со вторым подходом. У меня возникли проблемы с некоторыми стилями тегов <HeaderStyle>, которые не применяются, когда они находятся только под тегом <asp:DataGrid>.

Если вы хотите носить тот же стиль с другими DataGrids, вы можете создать скин, чтобы повсюду у вас был одинаковый стиль заголовка.

Answer 2

Посмотрите на 4guysfromrolla.com article series на ASP.net DataGrids. Part 2 рассказывает о стилизации DataGrids.

Answer 3

Используйте свойство CssClass сетки, чтобы дать таблице класс css. Чтобы получить другое поведение из начального и конечного элементов, также примените класс к заголовку столбца и ячейкам. Затем используйте CSS для стилизации элементов таблицы. IE:

ASPX:

<asp:DataGrid CssClass="grid" . . . . 
<asp:BoundColumn HeaderClass = "first" ItemClass = "first" . . . . 
(other columns) 
<asp:BoundColumn HeaderClass = "last" ItemClass = "last" . . . 

CSS:

table.grid th { border: solid 1px black} 
table.grid th.first {border-left: 0px} 
table.grid th.last {border-right: 0px} 

Нет необходимости использовать стили ASP.NET, в основном потому, что вы можете получить гораздо дождевик с помощью CSS и не имеют раздутый код.

Answer 4

Элементы управления DataGrid и DataTable отображают таблицы. Таким образом, используйте CSS:

table { ... } 
thead { ... } 
tbody { ... } 
tfoot { ... } 
tr { ... } 
td { ... } 
th { ... } 

Есть много элементов для цели.

... Вот немного кода, чтобы вы начали:

/* target table-rows in the header element of a table and modify border-styles */ 
thead tr { 
    border-top: 1px solid #000; 
    border-bottom: 1px solid #000; 
}