轻松搞定表格行样式与单元格样式，代码由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

hanhedy

xueke_xu 发表于 2016-8-3 16:54
这个开源版不能用吗？？

不可以的。哎

xueke_xu

这个开源版不能用吗？？

szjazz

不单纯是达到无JS，更应在开源版上提高速度为目标，用FineUI编程是简单多了，但在调试却是往往一条指令却是有一大堆层层叠叠的Div和CSS来完成，速度上就差了好多了，毕竟专业版，对于我们公司内部使用来说，不会去花钱购买

kakaeex

sanshi 发表于 2014-10-30 21:51
恩，v1.9.0才会有

都一年了，免费版也该有这个功能了吧

sanshi

Tiger 发表于 2014-10-30 21:33
当我迫不及待的试验的时候，发现属性不存在 ，仔细一看，是即将推出  
等…… ...

恩，v1.9.0才会有

Tiger

当我迫不及待的试验的时候，发现属性不存在 ，仔细一看，是即将推出  
等……

Tiger

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

sanshi

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

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

Tiger

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