css - jqgrid rowattr 不应用类

Question

我想根据列的值将背景颜色应用于 jqGrid 行的行，但是基本的 rowattr 没有将类应用于行。

下面是代码(为简单起见，我删除了需要应用颜色的条件)

       jQuery("#employeeSalarysGrid").jqGrid({
            height: 250,
            url: 'http://localhost:50570/api/Test/Get',
            mtype: "GET",
            contentType: "application/json; charset=utf-8",
            datatype: "json",
            serializeGridData: function (postData) {
                return JSON.stringify(postData);
            },
            jsonReader: {
                root: function (obj) { return obj; },
                page: function (obj) { return 1; },
                total: function (obj) { return 1; },
                records: function (obj) { return obj.length; },
                id: "0",
                cell: "",
                repeatitems: false
            },
            datatype: "json",

            colNames: ['Id', 'Bank Name', 'Bank Name', 'Employee name', 'Joining date', 'Salary amount', 'Comments'],
            colModel: [
                { name: 'Id', align: "center", hidden: true },
                { name: 'BankName', index: 'BankName', align: 'center', editable: false },
                {
                    name: 'BankId', index: 'BankId', align: "center", hidden: true, required: true,
                    viewable: true, editrules: { edithidden: true, required: true },
                    editable: true,
                    edittype: 'select',
                    editoptions: {
                        dataUrl: '/api/Test/GetBanks',
                        buildSelect: function (data) {
                            var response = jQuery.parseJSON(data);
                            var s = '<select>';
                            if (response && response.length) {
                                for (var i = 0, l = response.length; i < l; i++) {
                                    var bank = response[i];
                                    s += "<option value=" + bank.BankId + ">" + bank.Name + "</option>";
                                }
                            }
                            return s + "</select>";
                        }
                    }
                },
                { name: 'EmployeeName', align: "center", editable: true, editrules: { required: true } },
                { name: 'JoiningDate', align: "center", editable: true, editrules: { custom: true, custom_func: datecheck },
                    formatter: 'date', formatoptions: { srcformat: 'y-m-d', newformat: 'd-M-y' }, edittype: 'text', editable: true,
                    editoptions: { dataInit: function (el) { setTimeout(function () { $(el).datepicker({ dateFormat: 'd-M-y' }); }, 200); } }
                },
             //{ name: 'cdate', index: 'cdate', width: 80, align: 'right', formatter: 'date', srcformat: 'yyyy-mm-dd', newformat: 'm-d-Y', edittype: 'text', editable: true, editoptions: { dataInit: function (el) { setTimeout(function () { $(el).datepicker(); }, 200); } } },

                { name: 'SalaryAmount', align: "center", editable: true, editrules: { required: true } },
                { name: 'Comments ', align: "center", editable: true }
            ],
            gridview: true,
            autoencode: true,
            ignorecase: true,
            loadonce: true,
            sortname: "InstallmentDate",
            sortorder: "asc",
            viewrecords: true,
            rowNum: 10,
            rowList: [10, 15, 20],
            pager: '#employeeSalarysPager',
            caption: "Employee Salary list",
           rowattr: function (rd) {                    
                return { "class": "rowClass" };
                //alert("hi");


            }
        });

CSS 样式:

 <style type="text/css">      
        .rowClass { color: blue;  background-image: none;}
    </style>

注意:如果我取消注释//alert 语句，它会显示 5 次警报消息。这意味着会为每一行调用 rowattr，但不会应用 css 类。

问候，阿比拉什

Answer 1

rowattr 确实可以正常工作，但是如果您希望该类也应用于选定的行，那么您应该将 CSS 规则更改为以下内容

.ui-widget-content .rowClass { color: blue;  background-image: none; }

参见 the demo .