jqGrid的列名为“发布”.它可以定位在不同的位置,这取决于客户如何配置网格,但始终是prq.
如果“发布”列的值为“真”,我需要更改行的背景颜色
我尝试下面的colmodel,但alert(rdata.Posted)显示总是未定义的.
如何改变行的背景颜色,如果此行中的“发布”列的值为true？
我查看了许多Oleg和其他解决方案来改变背景颜色,但他们使用硬编码的列号.
colModel: [
{"cellattr":function(rowId,tv,rawObject,cm,rdata) {
if (rdata.Posted)
return 'class="jqgrid-readonlycolumn"';
return '';
},"label":"Klient","name":"Klient_nimi","classes":null,"hidden":false},{"label":null,"name":"Posted","editable":true,"width":0,"hidden":true}],...
更新
在update2中,Oleg建议使用rowattr.我还需要隐藏内联的删除按钮和自定义帖子按钮.我在下面的loadComplete中的usijng代码.如何使用rowattr来实现？
var LoadCompleteHandler = function () {
var iCol = getColumnIndexByName($grid,'Kinnitatud'),postedDateCol = getColumnIndexByName($grid,'Kinkuup'),cRows = $grid[0].rows.length,iRow,row,className,isPosted,mycell,mycelldata,i,count,cm = $grid.jqGrid('getGridParam','colModel'),l,iActionsCol = getColumnIndexByName($grid,'_actions');
l = cm.length;
if (iCol > 0 || postedDateCol > 0) {
for (iRow = 0; iRow < cRows; iRow = iRow + 1) {
row = $grid[0].rows[iRow];
className = row.className;
isPosted = false;
if ($.inArray('jqgrow',className.split(' ')) > 0) { // $(row).hasClass('jqgrow')
if (iCol > 0) {
isPosted = $(row.cells[iCol]).find(">div>input:checked").length > 0;
}
if (postedDateCol > 0) {
mycell = row.cells[postedDateCol];
mycelldata = mycell.textContent || mycell.innerText;
isPosted = mycelldata.replace(/^\s+/g,"").replace(/\s+$/g,"") !== "";
}
if (isPosted) {
if ($.inArray('jqgrid-postedrow',className.split(' ')) === -1) {
row.className = className + ' jqgrid-postedrow';
$(row.cells[iActionsCol]).find(">div>div.ui-inline-del").hide();
$(row.cells[iActionsCol]).find(">div>div.ui-inline-post").hide();
}
}
}
}
}
解决方法
主要的想法是改变行的背景颜色,你会发现
here和
here.我建议你阅读
this answer,讨论不同方法的不同优点和缺点.
var getColumnIndexByName = function(grid,columnName) {
var cm = grid.jqGrid('getGridParam',i=0,l=cm.length;
for (; i<l; i++) {
if (cm[i].name===columnName) {
return i; // return the index
}
}
return -1;
};
函数getColumnIndexByName($(“#list”),’MyColumnName’)将获取’MyColumnName’列的colModel中的索引.
要更改背景颜色,您可以按照示例
loadComplete: function() {
$("tr.jqgrow:odd").addClass('myAltRowClass');
}
从the answer,而不是’：odd’过滤器,您可以使用jQuery.filter自己编写过滤器.在过滤器内部,您可以使用:nth-child()访问相应的< td>元素(参见here)
更新：您可以执行以下操作(非常接近the another answer的代码)：
loadComplete: function() {
var iCol = getColumnIndexByName($(this),'closed'),cRows = this.rows.length,className;
for (iRow=0; iRow<cRows; iRow++) {
row = this.rows[iRow];
className = row.className;
if ($.inArray('jqgrow',className.split(' ')) > 0) {
var x = $(row.cells[iCol]).children("input:checked");
if (x.length>0) {
if ($.inArray('myAltRowClass',className.split(' ')) === -1) {
row.className = className + ' myAltRowClass';
}
}
}
}
}
顺便说一句,如果“已关闭”列将被隐藏,所有内容将继续像以前那样工作.
UPDATED 2：The answer描述了如何使用rowattr回调来简化解决方案并获得最佳性能(在gridview：true的情况下).
