Jquery Grid表格插件设置指定行/每行颜色

最新推荐文章于 2023-05-05 08:41:21 发布

flying461

最新推荐文章于 2023-05-05 08:41:21 发布

阅读量3.8k

点赞数

分类专栏： js 文章标签： jquery 插件 Jgrid

本文链接：https://blog.csdn.net/flying461/article/details/78065617

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先说下思路，主要通过获取后台返回的数据集，进行循环遍历，设置表格每一行（即一个tr的颜色来实现此效果）。其实通过这种方法，你可以对表格的每一行tr进行任意操作。以下面代码为例：

        //加载列表
        var option = {
                loadComplete: function (resultData) {
                    setTimeout(function () {
                            //当表格加载完后，执行该操作方法。
                            changeRowColor('放表格的div的id', resultData.rows);
                            //id即为var table = new Grid("id", data, colModel, option);里的 id
                    }, 300);
                },
                height: 450,
                sortable:true,
                multiselect:true
            }

其中，resultData来自于ajaxWithProgress方法里的参数，ajaxWithProgress(‘GET’, url, }, function(resultData){}）里的这个resultData，也是在function(resultData)方法内部，做表头表格的初始化和每行数据的对应。

function changeRowColor( gridId, gridData ) {
    for (var i = 0; i < gridData.length; i++) {
        var $tr = $('tr#' + gridData[i].id);
        //判断条件
        if (？){
            $tr.css("color", "red");

        } else if(？){
            $tr.css("color", "green");
        }else {
            $tr.css("color", "grey");
        }
    }   
}

最为关键的就是结果集resultData的获取，然后循环js或者jquery操作tr对象。