jqGrid設置指定行的背景色

jqGrid設置指定行的背景色

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);
        });
    }