FineUI 官方论坛

标题: 轻松搞定表格行样式与单元格样式,代码由50行减少为10行 [打印本页]

作者: sanshi    时间: 2014-10-30 17:46
标题: 轻松搞定表格行样式与单元格样式,代码由50行减少为10行
为了给表格的行添加样式,之前我们可是没少费工夫:

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.                 if (entranceYear >= 2006)
  8.                 {
  9.                         highlightRows.Text += e.RowIndex.ToString() + ",";
  10.                 }
  11.         }
  12. }
复制代码

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.         function onGridDataLoad() {
  5.                
  6.                 var highlightRows = F(highlightRowsClientID);
  7.                 var grid = F(gridClientID);

  8.                 // 获取所有的行节点
  9.                 var allRows = grid.getRowEls();
  10.                 allRows.removeClass('highlight');

  11.                 $.each(highlightRows.getValue().split(','), function (index, item) {
  12.                         if (item) {
  13.                                 allRows.eq(item).addClass('highlight');
  14.                         }
  15.                 });

  16.         }
  17. </script>
复制代码

4. 最终效果:
[attach]6744[/attach]



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


现在,和这么复杂的流程来个告别,新版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.         if (entranceYear >= 2006)
  6.         {
  7.                 e.RowCssClass = "special";
  8.         }
  9. }
复制代码

2. 搞定!效果和之前的一模一样!
[attach]6744[/attach]


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



作者: Mr.Wu    时间: 2014-10-30 17:54
老大,地址链接搞错了吧,你这是在本地测试的呢:http://localhost
作者: sanshi    时间: 2014-10-30 17:56
Mr.Wu 发表于 2014-10-30 17:54
老大,地址链接搞错了吧,你这是在本地测试的呢:http://localhost

多谢指出,已更新
作者: oliverary    时间: 2014-10-30 18:39
开源版也可以用吧?
作者: oliverary    时间: 2014-10-30 18:42
三石大大,不觉得还是麻烦吗,不能封装吗? 把前台的JS和CSS都封装了
作者: sanshi    时间: 2014-10-30 19:31
oliverary 发表于 2014-10-30 18:42
三石大大,不觉得还是麻烦吗,不能封装吗? 把前台的JS和CSS都封装了

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

写CSS可以可以灵活的定义样式,这个是必须的
作者: Tiger    时间: 2014-10-30 20:50
这就是我想要的结果,看来我了直没有按之前的方式处理等这个是对的啦  哈哈哈
作者: Tiger    时间: 2014-10-30 20:55
正想去提个建议,把底部汇总的也改成纯的服务器端事件来处理,惊奇的发现,现在的版本已经是这个效果啦  哈。太牛了
作者: sanshi    时间: 2014-10-30 21:07
Tiger 发表于 2014-10-30 20:55
正想去提个建议,把底部汇总的也改成纯的服务器端事件来处理,惊奇的发现,现在的版本已经是这个效果啦  哈 ...

这个很久很久之前就是通过服务器代码设置的,这样编码简单,也不容易出错
作者: Tiger    时间: 2014-10-30 21:20
三石先生的目标可以设定为  100%无JS 因为我不会写 {:soso_e151:}
作者: Tiger    时间: 2014-10-30 21:33
当我迫不及待的试验的时候,发现属性不存在 ,仔细一看,是即将推出  
等……
作者: sanshi    时间: 2014-10-30 21:51
Tiger 发表于 2014-10-30 21:33
当我迫不及待的试验的时候,发现属性不存在 ,仔细一看,是即将推出  
等…… ...

恩,v1.9.0才会有
作者: kakaeex    时间: 2016-6-29 11:58
sanshi 发表于 2014-10-30 21:51
恩,v1.9.0才会有

都一年了,免费版也该有这个功能了吧
作者: szjazz    时间: 2016-7-4 12:34
不单纯是达到无JS,更应在开源版上提高速度为目标,用FineUI编程是简单多了,但在调试却是往往一条指令却是有一大堆层层叠叠的Div和CSS来完成,速度上就差了好多了,毕竟专业版,对于我们公司内部使用来说,不会去花钱购买
作者: xueke_xu    时间: 2016-8-3 16:54
这个开源版不能用吗??
作者: hanhedy    时间: 2016-8-21 10:54
xueke_xu 发表于 2016-8-3 16:54
这个开源版不能用吗??

不可以的。哎




欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/) Powered by Discuz! X3.4