我想根据列的值将背景颜色应用于 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 类没有被应用。
问候,
阿比拉什