【分享】如何按条件设置单元格颜色

Gnid

最近，貌似有好几个网友问到这类问题，解释下原理，通过CSS定义单元格的高亮颜色，然后通过HiddenField记录要高亮的单元格的位置，然后通过js操作即可。

我做了个小的demo，大家可以下载下来参考一下，如下图。





FINEUI 3.X中，请参考以下文件：

Gnid

用浏览器应该能看出哪里出错的。
粗略看了下，第二行

1. var highlightCellsClientID = '<%= hfHighlightCells %>';

复制代码

是否应该更正为

1. var highlightCellsClientID = '<%= hfHighlightCells.ClientID %>';

复制代码

phoenixfang1

顶楼主，麻烦帮看下我修改的正确吗，我用了以后页面一直显示转圈，显示不出来。我用的是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>

erp8@live.cn

这个方法好，测试fineUI3.X下是完全可用的！
衷心感谢楼主热心解答！

erp8@live.cn

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

用在fineUI3.3 中,不知这样改是否对?
盼指教,衷心感谢!

erp8@live.cn

<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

请教:
请问这个想fineUI3.3 中如何才会生效,我试过fineUI3.3 是不行.

星星

及时雨啊,感谢

狐狸猫

谢谢分享，这个很有用