jqGrid有一个名为Posted的列。根据客户如何配置网格,它可以定位在不同的位置,但始终保持不变。
如果已发布列的值为True
,我需要更改行的背景颜色我在下面尝试过colmodel但是警告(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,
"classes":null,"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();
}
}
}
}
}
答案 0 :(得分:13)
更改行的背景颜色的主要想法是here和here。我建议你阅读this answer,其中讨论了不同方法的不同优点和缺点。
要从列名获取列索引,您可以使用以下简单函数:
var getColumnIndexByName = function(grid, columnName) {
var cm = grid.jqGrid('getGridParam','colModel'),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,但您可以使用jQuery.filter自行编写过滤器,而不是':odd'
过滤器。在过滤器内部,您可以使用:nth-child()来访问相应<td>
元素中的数据(请参阅here)
更新:您可以执行以下操作(非常接近the another answer的代码):
loadComplete: function() {
var iCol = getColumnIndexByName($(this),'closed'),
cRows = this.rows.length, iRow, row, 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';
}
}
}
}
}
相应的演示是here。您将看到以下内容:
顺便说一下,如果隐藏'已关闭'列,一切都会像以前一样继续工作。
更新2 :The answer描述了如何使用rowattr
回调来简化解决方案并获得最佳性能(如果是gridview: true
)。< / p>
答案 1 :(得分:0)