轻松搞定表格行样式与单元格样式，代码由50行减少为10行

sanshi

为了给表格的行添加样式，之前我们可是没少费工夫：

1. 首先在页面上放一个 HiddenField，用来保存需要添加样式的行

1. <f:HiddenField ID="highlightRows" runat="server">
   
2. </f:HiddenField>

复制代码

2. 在表格的行绑定事件中，将需要添加样式的行保存下来

1. protected void Grid1_RowDataBound(object sender, FineUIPro.GridRowEventArgs e)
   
2. {
   
3.         DataRowView row = e.DataItem as DataRowView;
   
4.         if (row != null)
   
5.         {
   
6.                 int entranceYear = Convert.ToInt32(row["EntranceYear"]);
   
7. 
   
8.                 if (entranceYear >= 2006)
   
9.                 {
   
10.                         highlightRows.Text += e.RowIndex.ToString() + ",";
    
11.                 }
    
12.         }
    
13. }

复制代码

3. 在表格的数据加载完成后，通过JavaScript代码来添加行样式

1. <f:Grid>
   
2.         <Listeners>
   
3.                 <f:Listener Event="dataload" Handler="onGridDataLoad" />
   
4.         </Listeners>
   
5. </f:Grid>

复制代码

1. <script type="text/javascript">
   
2.         var highlightRowsClientID = '<%= highlightRows.ClientID %>';
   
3.         var gridClientID = '<%= Grid1.ClientID %>';
   
4. 
   
5.         function onGridDataLoad() {
   
6.                
   
7.                 var highlightRows = F(highlightRowsClientID);
   
8.                 var grid = F(gridClientID);
   
9. 
   
10.                 // 获取所有的行节点
    
11.                 var allRows = grid.getRowEls();
    
12.                 allRows.removeClass('highlight');
    
13. 
    
14.                 $.each(highlightRows.getValue().split(','), function (index, item) {
    
15.                         if (item) {
    
16.                                 allRows.eq(item).addClass('highlight');
    
17.                         }
    
18.                 });
    
19. 
    
20.         }
    
21. </script>

复制代码

4. 最终效果：




====华丽的分隔线========================================
====华丽的分隔线========================================
====华丽的分隔线========================================
====华丽的分隔线========================================
====华丽的分隔线========================================

现在，和这么复杂的流程来个告别，新版FineUI（专业版）即将对行样式和单元格样式提供默认支持。

来看下新版的做法：

1. 在表格的行绑定事件中，为指定的行添加样式

1. protected void Grid1_RowDataBound(object sender, FineUIPro.GridRowEventArgs e)
   
2. {
   
3.         DataRowView row = e.DataItem as DataRowView;
   
4.         int entranceYear = Convert.ToInt32(row["EntranceYear"]);
   
5. 
   
6.         if (entranceYear >= 2006)
   
7.         {
   
8.                 e.RowCssClass = "special";
   
9.         }
   
10. }

复制代码

2. 搞定！效果和之前的一模一样！



是不是很方便？查看在线示例：http://fineui.com/demo_pro/#/demo_pro/grid/grid_rowcssclass.aspx

Mr.Wu

老大，地址链接搞错了吧，你这是在本地测试的呢：http://localhost

sanshi

Mr.Wu 发表于 2014-10-30 17:54
老大，地址链接搞错了吧，你这是在本地测试的呢：http://localhost

多谢指出，已更新

oliverary

开源版也可以用吧？

oliverary

三石大大，不觉得还是麻烦吗，不能封装吗？ 把前台的JS和CSS都封装了

sanshi

oliverary 发表于 2014-10-30 18:42
三石大大，不觉得还是麻烦吗，不能封装吗？ 把前台的JS和CSS都封装了

现在不需要写任何一行 JavaScript 代码。你看下官网示例：http://fineui.com/demo_pro/defau ... id_rowcssclass.aspx

写CSS可以可以灵活的定义样式，这个是必须的

Tiger

这就是我想要的结果，看来我了直没有按之前的方式处理等这个是对的啦  哈哈哈

Tiger

正想去提个建议，把底部汇总的也改成纯的服务器端事件来处理，惊奇的发现，现在的版本已经是这个效果啦  哈。太牛了

sanshi

Tiger 发表于 2014-10-30 20:55
正想去提个建议，把底部汇总的也改成纯的服务器端事件来处理，惊奇的发现，现在的版本已经是这个效果啦  哈 ...

这个很久很久之前就是通过服务器代码设置的，这样编码简单，也不容易出错

Tiger

三石先生的目标可以设定为  100%无JS 因为我不会写 {:soso_e151:}