jqGrid设置指定行的背景色

Posted 2020-08-09 叶长种-.Net软件工程师

1.在页面中加样式

<style type="text/css">
        .SelectBG{
            background-color:#AAAAAA;
            }
    </style>

2.在js中

  gridComplete:function(){
             var ids = $("#gridTable").getDataIDs();
             for(var i=0;i<ids.length;i++){
                 var rowData = $("#gridTable").getRowData(ids[i]);
                 if(rowData.overdueDays==0){//如果天数等于0，则背景色置灰显示
                     $(‘#‘+ids[i]).find("td").addClass("SelectBG");
                 }
             }
         }

案例：

 shrinkToFit: true,//此属性用来说明当初始化列宽度时候的计算类型，如果为ture，则按比例初始化列宽度。如果为false，则列宽度使用colModel指定的宽度

 multiselect: true, multiboxonly: true,//只有当multiselect = true.起作用，当multiboxonly 为ture时只有选择checkbox才会起作用

gridComplete: function () {
                var ids = $("#gridTable").getDataIDs();
                for (var i = 0; i < ids.length; i++) {
                    var rowData = $("#gridTable").getRowData(ids[i]);
                    if (rowData.Audit == "不通过") {//如果审核不通过，则背景色置于红色
                        $(‘#‘ + ids[i]).find("td").addClass("SelectBG");
                    }
                }

                $("#" + this.id).jqGrid(‘setSelection‘, SelectRowIndx);
            }

    //加载表格
    function GetGrid() {
        var SelectRowIndx;
        $("#gridTable").jqGrid({
            url: "@Url.Content("~/School/SitesDetails/GridPageListJson")",
            datatype: "json",
            height: $(window).height() - 178,
            autowidth: true,
            colModel: [
                { label: ‘主键‘, name: ‘Id‘, index: "Id", hidden: true,  key: true,},
                { label: ‘所属栏目‘, name: ‘Name‘, index: "Name", width: 100 },
                { label: ‘标题名称‘, name: ‘Title‘, index: "Title", width: 320 },
                //{label:‘文章来源‘,name:‘origin‘,index:‘origin‘,width:100},
                {
                    label: ‘置顶‘, name: ‘IsTop‘, index: ‘IsTop‘, width: 80
                ,
                    formatter: function (cellvalue, options, rowObject) {
                        if (cellvalue == true) return "是";
                        if (cellvalue == false) return "否";
                    }
                },
                { label: ‘点击量‘, name: ‘Hits‘, index: ‘Hits‘, width: 80 },
                {
                    label: ‘允许评论‘, name: ‘IsComment‘, index: ‘IsComment‘, width: 80
                ,
                    formatter: function (cellvalue, options, rowObject) {
                        if (cellvalue == true) return "是";
                        if (cellvalue == false) return "否";
                    }
                },
                {
                    label: ‘审核‘, name: ‘Audit‘, index: ‘Audit‘, width: 80
                ,
                    formatter: function (cellvalue, options, rowObject) {
                        if (cellvalue == "1") return "<font color=‘blue‘>等待审核</font>";
                        if (cellvalue == "2") return "<font color=‘green‘>通过审核</font>";
                        //if (cellvalue == "3") return "<font color=‘red‘>不通过</font>";
                        if (cellvalue == "3") return "不通过";
                    }
                },
                { label: ‘文章标签‘, name: ‘ArticleFlag‘, index: ‘ArticleFlag‘, width: 80 },
                { label: ‘创建者‘, name: ‘CreateUserName‘, index: ‘CreateUserName‘, width: 80 },
                {
                    label: ‘创建日期‘, name: ‘CreateDate‘, index: ‘CreateDate‘, width: 120,
                    formatter: function (cellvalue, options, rowObject) {
                        return formatDate(cellvalue, ‘yyyy-MM-dd hh:mm‘);
                    }
                },
                { label: ‘修改者‘, name: ‘ModifyUserName‘, index: ‘ModifyUserName‘, width: 80 },
                    {
                        label: ‘修改日期‘, name: ‘ModifyDate‘, index: ‘ModifyDate‘, width: 120,
                    formatter: function (cellvalue, options, rowObject) {
                        return formatDate(cellvalue, ‘yyyy-MM-dd hh:mm‘);
                    }
                    },
                { label: ‘审核人‘, name: ‘AuditUserName‘, index: ‘AuditUserName‘, width: 80 },
                    {
                        label: ‘审核日期‘, name: ‘AuditDate‘, index: ‘AuditDate‘, width: 120,
                        formatter: function (cellvalue, options, rowObject) {
                            return formatDate(cellvalue, ‘yyyy-MM-dd hh:mm‘);
                        }
                    }
            ],
            viewrecords: true,
            rowNum: 30,
            rowList: [30, 50, 100, 500, 1000],
            pager: "#gridPager",
            sortname: ‘CreateDate‘,
            sortorder: ‘Desc‘,
            rownumbers: true,
            shrinkToFit: true,//此属性用来说明当初始化列宽度时候的计算类型，如果为ture，则按比例初始化列宽度。如果为false，则列宽度使用colModel指定的宽度
            multiselect: true,
            multiboxonly: true,//只有当multiselect = true.起作用，当multiboxonly 为ture时只有选择checkbox才会起作用
            ondblClickRow: function (rowid) {
                var KeyValue = rowid;
                if (IsChecked(KeyValue)) {
                    var url = "/School/SitesDetails/Form?KeyValue=" + KeyValue;
                    openDialog(url, "Form", "编辑文章", 900, 450, function (iframe) {
                        top.frames[iframe].AcceptClick();
                    });
                }
            },
            onSelectRow: function () {
                SelectRowIndx = GetJqGridRowIndx("#" + this.id);
            },
            gridComplete: function () {
                var ids = $("#gridTable").getDataIDs();
                for (var i = 0; i < ids.length; i++) {
                    var rowData = $("#gridTable").getRowData(ids[i]);
                    if (rowData.Audit == "不通过") {//如果审核不通过，则背景色置于红色
                        $(‘#‘ + ids[i]).find("td").addClass("SelectBG");
                    }
                }

                $("#" + this.id).jqGrid(‘setSelection‘, SelectRowIndx);
            }
        });
        columnModelData("#gridTable");
        //自应高度
        $(window).resize(function () {
            $("#gridTable").setGridHeight($(window).height() - 178);
        });
    }

效果图如下：