1.套用於元件級別的 CSS
- CssClass-套用於Grid的框架。
- HeaderCaptionCssClass-套用於各列(Column)的header caption。
- ItemCssClass-套用於各行(Row)。
- AltItemCssClass-套用於各偶數行。
- FooterCaptionCssClass-套用於每列的footer caption。
2. 套用於 row 的 CSS Class
- Header-CssClass-套用於Column的header。
- CssClass—套用於Column的每個儲存格(cell)。
- Footer-CssClass-套用於Column的footer。 請注意:在Column的階層套用的Class會對在控制階層應用的Class進行覆蓋。
3. 套用於動作階層的CSS類
3.1. 啟動(Activation)
- ActiveCellCssClass-套用於active儲存格。
- ActiveColumnCssClass-套用於active儲存格Column的header。
- ActiveRowCssClass-套用於active儲存格Row。
- ActiveRowSelectorCssClass-套用於active儲存格的RowSelector。
- ActiveRowSelectorImageCssClass-套用於active儲存格的RowSelector的圖像區域。
3.2. row 固定
- CellCssClass-套用於固定列(Column)的儲存格。
- FooterCssClass-套用於固定列的footer。
- HeaderCssClass-套用於固定列的header。
- SeparatorCssClass-套用於分割固定列和標準列的分隔線。
3.3. row 移動
- TopDragIndicatorCssClass-套用於drog Indicator的頂端部分。
- MiddleDragIndicatorCssClass-套用於drog Indicator的中間部分。
- BottomDragIndicatorCssClass-套用於drog Indicator的末端部分。
- DragMarkupCssClass-套用於DragMarkup。使用預設的拖曳標記時,除了已套用於header的任何style之外,也將套用此class。DragMarkupCssClass 僅在拖曳標記被替換時使用。
3.4. 調整 row 大小
- ResizeIndicatorCssClass-套用調整indicator線條的大小。
3.5. 編輯
- EditCellCssClass-套用於正在編輯的儲存格。
- AddNewRowCssClass-套用於AddNewRow。
- AddNewRowSelectorImageCssClass-套用於AddNewRow的RowSelector的圖像區域。
3.6. Filtering
- EditCellCssClass-套用於正在編輯的filter儲存格。
- FilterButtonCssClass-套用於filter按鈕。
- FilteringCssClass-套用於filter row。
- FilterRowSelectorImageCssClass-套用於filter row的Row Selector圖像區域。
- FilterRuleDropDownCssClass-套用於filter規則的drop down。
- FilterRuleDropDownHoverItemCssClass-套用於filter規則drop down中hover的項目。
- FilterRuleDropDownItemCssClass-套用於filter規則drop down中的項目。
- FilterRuleDropDownSelectedItemCssClass-套用於filter規則drop down中的選定項目。
3.7. Paging
- PagerCssClass-套用於Pager的框架。
- CurrentPageLinkCssClass-套用於數字模式下的目前頁面索引(index)。
- PageLinkCssClass-套用於數字模式下目前Pager中的非索引的連結。
3.8. Row Selector
- HeaderRowSelectorCssClass-套用於Header Row中的Row Selector。
- FooterRowSelectorCssClass-套用於Footer Row中的Row Selector。
- RowSelectorCssClass-套用於Row Selector。
3.9. Selected
- SelectedHeaderCssClass-套用於選定的Column Header。
- SelectedCellCssClass-套用於選定的儲存格。
- SelectedRowSelectorCssClass-套用於所選Row的Row Selector。
- SelectedRowSelectorImageCssClass-套用於所選Row的Row Selector圖像。
CSS Selector 的使用
CSS Class套用於WebDataGrid的每個儲存格。在具有多個record的grid裡,一個CSS Class應該要能套用在每個record,但這樣的話會大幅增加呈現的HTML數量,然後造成效能的拖累。
為避開這個問題,WebDataGrid採用CSS Selector來應對。
舉例來說,設計一個稱為igg_Item的預設CSS Class,並套用於每個儲存格。 說明如下:
tbody.Igg_Item > tr > td { }
我們使用相同的pattern來套用在Custom CSS Class。
1. 針對本文儲存格的CSS Class,建立如下圖程式碼的CSS Class。
tbody.NewCellClass > tr > td { }
適用於Control階層的ItemCssClass屬性和Row固定動作的CellCssClass屬性。
2. 針對特定grid儲存格的CSS Class建立一個Selector,如下所示
tbody > tr > td.NewCellClass { }
適用於以下屬性:
- Column階層:CssClass
- activation動作:ActiveCellCssClass
- 選擇動作:SelectedCellCssClass
3. 針對Row的CSS Class建立一個如下面程式碼所示的CSS Class。
tbody > tr.NewRowCssClass > td { }
適用於以下屬性:
- Control階層:AltItemCssClass
- activation動作:ActiveRowCssClass
下面的程式碼展示如何將各種的Style套用於grid儲存格。
<style type="”text/css”"> .HeaderCaptionClass { text-align: center; } tbody.NewItemClass > tr > td { color: blue; text-align: center; } tbody > tr.ActiveRowClass > td { background-color: Red; } tbody > tr > td.ColumnLevelCssClass { text-decoration: underline; } tbody > tr > td.SelectedCellClass { font-weight: bold; } tbody > tr > td.ActiveCellClass { background-color: Yellow; } </style> <ig:webdatagrid runat="”server”" id="”wdgCustomers”" datasourceid="”AccessDsCustomers”" headercaptioncssclass="”HeaderCaptionClass”" datakeyfields="”CustomerID”" autogeneratecolumns="”false”" width="”88%”" itemcssclass="”NewItemClass”" height="”400″"> <columns> <ig:bounddatafield cssclass="”ColumnLevelCssClass”" key="”Country”" datafieldname="”Country”" header-text="”Country”"></ig:bounddatafield> <ig:bounddatafield key="”City”" datafieldname="”City”" header-text="”City”"></ig:bounddatafield> <ig:bounddatafield key="”CompanyName”" datafieldname="”CompanyName”" header-text="”Company”"></ig:bounddatafield> <ig:bounddatafield key="”ContactName”" datafieldname="”ContactName”" header-text="”Contact”"></ig:bounddatafield> <ig:bounddatafield key="”Phone”" datafieldname="”Phone”" header-text="”Phone”"></ig:bounddatafield> </columns> <behaviors> <ig:activation activecellcssclass="”ActiveCellClass”" activerowcssclass="”ActiveRowClass”"> </ig:activation> <ig:selection selectedcellcssclass="”SelectedCellClass”"> </ig:selection> </behaviors> </ig:webdatagrid> <asp:accessdatasource id="”AccessDsCustomers”" runat="”server”" datafile="”~/App_Data/Nwind.mdb”" selectcommand="”SELECT" [customerid],="" [companyname],="" [contactname],="" [address],="" [city],="" [phone],="" [country]="" from="" [customers]="" order="" by="" [country]”=""> </asp:accessdatasource>
請注意,帶有Selector的CSS Class的順位通常是優先的。如果您的Custom CSS Class沒有Selector,您看到的Style可能會不一樣。
使用CSS Selector會將Style套用到本文中的所有TD要素。尖括號不僅僅適用於最初階層的TD要素。儲存格的template中的TD也適用,也請注意Selector的使用。
Internet Explorer 6不支援尖括號格式的Selector (‘>’)。針對IE6的應用程式應排除尖括號的使用。 舉例如下:
tbody tr.NewRowCssClass td { }