FineUI 官方论坛
标题:
【分享】如何按条件设置单元格颜色
[打印本页]
作者:
Gnid
时间:
2015-9-20 03:12
标题:
【分享】如何按条件设置单元格颜色
本帖最后由 Gnid 于 2015-10-29 13:57 编辑
最近,貌似有好几个网友问到这类问题,解释下原理,通过CSS定义单元格的高亮颜色,然后通过HiddenField记录要高亮的单元格的位置,然后通过js操作即可。
我做了个小的demo,大家可以下载下来参考一下,如下图。
[attach]7913[/attach]
[attach]7914[/attach]
FINEUI 3.X中,请参考以下文件:[attach]8033[/attach]
作者:
zy32002
时间:
2015-9-20 09:12
顶一个
作者:
erp8@live.cn
时间:
2015-9-20 11:17
谢谢分享!!
作者:
隨風往事
时间:
2015-9-20 11:41
作者:
狐狸猫
时间:
2015-9-21 09:04
谢谢分享,这个很有用
作者:
星星
时间:
2015-9-21 09:20
及时雨啊,感谢
作者:
erp8@live.cn
时间:
2015-10-26 18:03
请教:
请问这个想fineUI3.3 中如何才会生效,我试过fineUI3.3 是不行.
作者:
erp8@live.cn
时间:
2015-10-26 18:08
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var highlightCellsClientID_MC = '<%= hfHighlightCells_MC.ClientID %>';
var highlightCellsClientID_SJ = '<%= hfHighlightCells_SJ.ClientID %>';
var gridClientID = '<%= Grid1.ClientID %>';
function highlightCells(highlightCellsClientID, gridClientID, className) {
var highlightCells = X(highlightCellsClientID);
var grid = X(gridClientID);
var store = grid.getStore();
$(grid.el.dom).find('.x-grid-cell.' + className).removeClass(className);
$.each(highlightCells.getValue().split(','), function (index, item) {
if (item !== '') {
var rowscells = item.split('-');
//var cell = grid.getView().getNode(parseInt(item[0], 10)).getNode(parseInt(item[1],10));
var cell = grid.getView().getNode(parseInt(rowscells[0], 10)).cells[parseInt(rowscells[1], 10)];
$(cell).addClass(className);
}
});
}
// 页面第一个加载完毕后执行的函数
X.ready(function () {
highlightCells(highlightCellsClientID_MC, gridClientID, "highlight_mc");
highlightCells(highlightCellsClientID_SJ, gridClientID, "highlight_sj");
});
// 页面AJAX回发后执行的函数
X.ajaxReady(function () {
//highlightCells(highlightCellsClientID_MC, gridClientID, "3-1,3-3,3-2");
////highlightCells(highlightCellsClientID_SJ, gridClientID, "highlight_sj");
highlightCells(highlightCellsClientID_MC, gridClientID, "highlight_mc");
highlightCells(highlightCellsClientID_SJ, gridClientID, "highlight_sj");
});
</script>
作者:
erp8@live.cn
时间:
2015-10-26 18:09
用在fineUI3.3 中,不知这样改是否对?
盼指教,衷心感谢!
作者:
erp8@live.cn
时间:
2015-10-28 11:11
FINEUI 3.X中,请作如下更改:
$(grid.el.dom).find('.x-grid-cell.' + className).removeClass(className);
改为
$(grid.el.dom).find('.x-grid3-cell.' + className).removeClass(className);
---------------谢谢楼主!
作者:
erp8@live.cn
时间:
2015-11-1 20:57
这个方法好,测试fineUI3.X下是完全可用的!
衷心感谢楼主热心解答!
作者:
phoenixfang1
时间:
2016-4-27 11:54
本帖最后由 phoenixfang1 于 2016-4-27 11:55 编辑
顶楼主,麻烦帮看下我修改的正确吗,我用了以后页面一直显示转圈,显示不出来。我用的是4.2.3的,这个有关系吗
<script type="text/javascript">
var highlightCellsClientID = '<%= hfHighlightCells %>';
var gridClientID = '<%= Grid1.ClientID %>';
function highlightCells() {
var highlightCells = F(highlightCellsClientID);
var grid = F(gridClientID);
var store = grid.getStore();
$(grid.el.dom).find('.x-grid-cell.highlight').removeClass('highlight');
$.each(highlightCells.getValue().split(','), function (index, item) {
if (item !== '') {
var rowscells = item.split('-');
//var cell = grid.getView().getNode(parseInt(item[0], 10)).getNode(parseInt(item[1],10));
var cell = grid.getView().getNode(parseInt(rowscells[0], 10)).cells[parseInt(rowscells[1], 10)];
$(cell).addClass('highlight');
}
});
}
// 页面第一个加载完毕后执行的函数
F.ready(function () {
highlightCells();
});
// 页面AJAX回发后执行的函数
F.ajaxReady(function () {
highlightCells();
});
</script>
作者:
Gnid
时间:
2016-4-27 18:31
用浏览器应该能看出哪里出错的。
粗略看了下,第二行
var highlightCellsClientID = '<%= hfHighlightCells %>';
复制代码
是否应该更正为
var highlightCellsClientID = '<%= hfHighlightCells.ClientID %>';
复制代码
欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/)
Powered by Discuz! X3.4