jqGrid：根据列名称的行单元格值更改行的背景颜色 [英] jqGrid: change background color of row based on row cell value by column name
问题描述
jqGrid有一个名为Posted的列。根据客户如何配置网格，它可以定位在不同的位置，但始终是prssent。
如果已发布列的值为True，我需要更改行的背景颜色
我在下面尝试过colmodel但是警告（rdata.Posted）显示始终未定义。
如何更改行的背景颜色如果此行中的已发布列的值为true？
我查看了许多Oleg和其他解决方案，以更改背景颜色，但他们使用的是硬编码列号。
colModel：[
{cellattr：function（rowId，tv，rawObject，cm，rdata）{
if（rdata.Posted）
返回'class =jqgrid-readonlycolumn';
返回'';
}
，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-postingrow';
$（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屋！
