jqgrid rowattr不应用类 [英] jqgrid rowattr not applying class

问题描述

我想根据列的值对jqGrid行的行应用背景颜色，但是基本的rowattr不会将类应用到行。

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

  jQuery（＃employeeSalarysGrid）。jqGrid {
 height：250，
 url：'http：// localhost：50570 / api / Test / Get'，
 mtype：GET，
 contentType： 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 
}，
数据类型：json，
 
 colNames：['Id'，'银行名称'，'银行名称'，'员工姓名'，'加盟日期'，' 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： 
 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 [一世]; 
 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：'ym-d' newformat：'dM-y'}，edittype：'text'，editable：true，
 editoptions：{dataInit：function（el）{setTimeout（function（）{$（el）.datepicker（{dateFormat： dM-y'}）;}，200）; }} 
}，
 // {name：'cdate'，index：'cdate'，width：80，align：'right'，formatter：'date'，srcformat：'yyyy-mm- dd'，newformat：'md-Y'，edittype：'text'，editable：true，editoptions：{dataInit：function（el）{setTimeout（function（）{$（el）.datepicker（）;} ; }}，
 
 {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次。

请注意，
Abhilash

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

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

请参阅演示。

I want to apply background color to row of jqGrid row based on value of column, however the basic rowattr is not applying class to rows.

Below is the code (for simplicity I have removed the condition on which color needs to be applied)

       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 :

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

Note: If I uncomment //alert statement, it shows alert message 5 times. It means rowattr is getting invoked for each row, however css class is not getting applied.

Regards, Abhilash

解决方案

The rowattr do works correctly, but if you want that the class will be applied on selected rows too then you should change CSS rule to the following

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

see the demo.

这篇关于jqgrid rowattr不应用类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！