jqGrid:根据列单元格值按列名更改行的背景颜色
jqGrid的列名为Posted。 它可以定位在不同的位置,具体取决于客户如何configuration网格,但始终是表示。
如果“发布”列的值为True,则需要更改行的背景颜色
我在下面尝试colmodel,但警报(rdata.Posted)显示总是未定义。
如果更改行的背景颜色,如果此行中的“已发布”列的值为true,
我看了很多奥列格和其他解决scheme,以改变背景颜色,但他们正在使用硬编码的列号。
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中Olegbuild议使用rowattr。 我需要在操作栏中隐藏内联删除button和自定义发布button。 我在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(); } } } } }
改变行的背景颜色的主要想法你会在这里和这里find。 我build议你阅读这个答案 ,讨论不同方法的不同优缺点。
要从列名获得列索引,可以使用以下简单函数:
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'); }
从答案 ,而不是':odd'
filter,你可以使用jQuery.filter自己写filter。 在filter内部,你可以使用:nth-child()从相应的<td>
元素访问数据(见这里 )
更新 :您可以执行以下(非常接近另一个答案的代码):
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'; } } } } }
相应的演示在这里 。 您将看到以下内容:
顺便说一下,如果“封闭的”列将被隐藏,一切将继续像以前一样工作。
更新2 : 答案描述如何使用rowattr
callback来简化解决scheme,并获得最佳性能(在gridview: true
情况下)。
我想答案就在这里: http : //www.trirand.net/forum/default.aspx? g=posts&m= 2678
让我知道这是不是你需要的。
最好的祝福。
阿波罗