jqGrid:根据列名的行单元格值更改行的背景颜色 [英] jqGrid: change background color of row based on row cell value by column name
问题描述
jqGrid 有一个名为 Posted 的列.它可以定位在不同的位置，具体取决于客户如何配置网格，但始终存在.
如果 Posted 列的值为 True，我需要更改行的背景颜色
我在下面尝试了 colmodel，但 alert(rdata.Posted) 显示始终未定义.
如果该行中的已发布列的值为true，如何更改行的背景颜色?
我研究了很多 Oleg 和其他更改背景颜色的解决方案，但它们使用的是硬编码的列号.
colModel: [{"cellattr":function(rowId, tv, rawObject, cm, rdata) {如果(rdata.Posted)返回 'class="jqgrid-readonlycolumn"';返回 '';},"label":"Klient","name":"Klient_nimi","classes":null,"hidden":false},{"label":null,"name":"Posted","editable":true,"width":0,类":空，隐藏":真}]，...更新
在 update2 中，Oleg 建议使用 rowattr.我还需要在操作列中隐藏内联删除按钮和自定义发布按钮.我在 loadComplete 中使用下面的代码.如何使用 rowattr 实现这一点?
var LoadCompleteHandler = function () {var iCol = getColumnIndexByName($grid, 'Kinnitatud'),PostedDateCol = getColumnIndexByName($grid, 'Kinkuup'),cRows = $grid[0].rows.length,iRow,排，班级名称，已发布，菌丝体，细胞数据，我算，cm = $grid.jqGrid('getGridParam', 'colModel'),l,iActionsCol = getColumnIndexByName($grid, '_actions');l = cm.长度；如果(iCol > 0 || 发布日期Col > 0){for (iRow = 0; iRow < cRows; iRow = iRow + 1) {行 = $grid[0].rows[iRow];类名 = 行.类名；isPosted = 假；if ($.inArray('jqgrow', className.split(' ')) > 0) {//$(row).hasClass('jqgrow')如果(iCol > 0){isPosted = $(row.cells[iCol]).find(">div>input:checked").length>0;}如果 (postedDateCol > 0) {mycell = row.cells[postedDateCol];mycelldata = mycell.textContent ||mycell.innerText;isPosted = mycelldata.replace(/^s+/g, "").replace(/s+$/g, "") !== "";}如果(已发布){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();}}}}}改变行背景颜色的主要思路你会发现描述如何使用rowattr 回调以简化解决方案并获得最佳性能(在 gridview: true 的情况下).
jqGrid has column named Posted. It can be positioned in different positions depending how grid is configured by customer but is always prssent.
I need to change background color of rows if Posted column has value True
I tried colmodel below but alert(rdata.Posted) displays always undefined.
How to change backgound color of row if Posted column in this row has value true ?
I looked into lot of Oleg and other solutions for changing background color but they are using hard coded column number.
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}],
...
Update
In update2 Oleg recommends to use rowattr. I need to hide inlined delete button and custom post button in actions column also. I'm usijng code below in loadComplete. How to implement this using 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();
}
}
}
}
}
The main ideas to change the background color of the row you will find here and here. I recommend you to read this answer which discussed different advantages and disadvantages of different approaches.
To get column index from the column name you can use following simple function:
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;
};
The function getColumnIndexByName($("#list"), 'MyColumnName') will get you the index in colModel of the 'MyColumnName' column.
To change the background color you can follow the example
loadComplete: function() {
$("tr.jqgrow:odd").addClass('myAltRowClass');
}
from the answer, but instead of ':odd' filter you can write the filter yourself using jQuery.filter. Inside of the filter you can use :nth-child() to access the data from the corresponding <td> element (see here)
UPDATED: You can do the following (very close to the code from 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';
}
}
}
}
}
The corresponding demo is here. You will see the following:
By the way if the 'Closed' column will be hidden everything will continue to work as before.
UPDATED 2: The answer describe how to use rowattr callback to simplify the solution and to have the best performance (in case of gridview: true).
这篇关于jqGrid:根据列名的行单元格值更改行的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
