Javascript jqGrid：根据列名称根据行单元格值更改行的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6575192/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jqGrid: change background color of row based on row cell value by column name
提问by Andrus
jqGrid has column named Posted. It can be positioned in different positions depending how grid is configured by customer but is always prssent.
jqGrid 有名为 Posted 的列。它可以放置在不同的位置，具体取决于客户如何配置网格，但始终存在。
I need to change background color of rows if Posted column has value True
如果 Posted 列的值为 True，我需要更改行的背景颜色
I tried colmodel below but alert(rdata.Posted) displays always undefined.
我在下面尝试了 colmodel 但 alert(rdata.Posted) 显示始终未定义。
How to change backgound color of row if Posted column in this row has value true ?
如果该行中的 Posted 列的值为 true ，如何更改行的背景颜色？
I looked into lot of Oleg and other solutions for changing background color but they are using hard coded column number.
我研究了很多用于更改背景颜色的 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}],
...
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 ?
在 update2 中，Oleg 建议使用 rowattr。我还需要在操作列中隐藏内联删除按钮和自定义发布按钮。我在 loadComplete 中使用下面的代码。如何使用 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();
}
}
}
}
}
回答by Oleg
The main ideas to change the background color of the row you will find hereand here. I recommend you to read this answerwhich 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 colModelof the 'MyColumnName' column.
该函数getColumnIndexByName($("#list"), 'MyColumnName')将为您提供colModel“MyColumnName”列的索引。
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)
来自答案，但':odd'您可以使用jQuery.filter自己编写过滤器，而不是过滤器。在过滤器内部，您可以使用:nth-child()访问来自相应<td>元素的数据（请参阅此处）
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 answerdescribe how to use rowattrcallback to simplify the solution and to have the best performance (in case of gridview: true).
更新 2：答案描述了如何使用rowattr回调来简化解决方案并获得最佳性能（在 的情况下gridview: true）。
回答by user828657
I think the answer is right here: http://www.trirand.net/forum/default.aspx?g=posts&m=2678
我认为答案就在这里：http: //www.trirand.net/forum/default.aspx?g=posts&m= 2678
Let me know if this is wat you need.
如果这是你需要的，请告诉我。
Best Regards.
此致。
Apolo
阿波罗
