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://www.fineui.com/BBS/)