FineUI 官方论坛

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

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

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

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

复制代码

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

protected void Grid1_RowDataBound(object sender, FineUIPro.GridRowEventArgs e)
{
DataRowView row = e.DataItem as DataRowView;
if (row != null)
{
int entranceYear = Convert.ToInt32(row["EntranceYear"]);
if (entranceYear >= 2006)
{
highlightRows.Text += e.RowIndex.ToString() + ",";
}
}
}

复制代码

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

<f:Grid>
<Listeners>
<f:Listener Event="dataload" Handler="onGridDataLoad" />
</Listeners>
</f:Grid>

复制代码

<script type="text/javascript">
var highlightRowsClientID = '<%= highlightRows.ClientID %>';
var gridClientID = '<%= Grid1.ClientID %>';
function onGridDataLoad() {
var highlightRows = F(highlightRowsClientID);
var grid = F(gridClientID);
// 获取所有的行节点
var allRows = grid.getRowEls();
allRows.removeClass('highlight');
$.each(highlightRows.getValue().split(','), function (index, item) {
if (item) {
allRows.eq(item).addClass('highlight');
}
});
}
</script>

复制代码

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

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

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

来看下新版的做法：

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

protected void Grid1_RowDataBound(object sender, FineUIPro.GridRowEventArgs e)
{
DataRowView row = e.DataItem as DataRowView;
int entranceYear = Convert.ToInt32(row["EntranceYear"]);
if (entranceYear >= 2006)
{
e.RowCssClass = "special";
}
}

复制代码

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/)