首页 > 代码库 > 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 = http://www.mamicode.com/$("#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 =http://www.mamicode.com/= true) return"是";                        if (cellvalue =http://www.mamicode.com/= false) return"否";                    }                },                { label: ‘点击量‘, name: ‘Hits‘, index: ‘Hits‘, width: 80 },                {                    label: ‘允许评论‘, name: ‘IsComment‘, index: ‘IsComment‘, width: 80                ,                    formatter: function (cellvalue, options, rowObject) {                        if (cellvalue =http://www.mamicode.com/= true) return"是";                        if (cellvalue =http://www.mamicode.com/= false) return"否";                    }                },                {                    label: ‘审核‘, name: ‘Audit‘, index: ‘Audit‘, width: 80                ,                    formatter: function (cellvalue, options, rowObject) {                        if (cellvalue =http://www.mamicode.com/="1") return "<font color=‘blue‘>等待审核</font>";                        if (cellvalue =http://www.mamicode.com/="2") return "<font color=‘green‘>通过审核</font>";                        //if (cellvalue =http://www.mamicode.com/="3") return "<font color=‘red‘>不通过</font>";                        if (cellvalue =http://www.mamicode.com/="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 = http://www.mamicode.com/rowid;"/School/SitesDetails/Form?KeyValue="http://www.mamicode.com/+ KeyValue;"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);        });    }

效果图如下:

技术分享

 

jqGrid设置指定行的背景色