jqGrid：根据列名称基于行单元格值更改行的背景色

Question

jqGrid的列名为Posted。可以将其放置在不同的位置，具体取决于客户如何配置网格，但是始终存在。

如果发布的列的值为True，则需要更改行的背景色

我在下面尝试了colmodel，但是alert（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, "") !== "";

                }

            }

        }

    }

Answer 1

更改行的背景颜色的主要想法将在此处和此处找到。我建议您阅读此答案，其中讨论了不同方法的不同优点和缺点。要从列名获取列索引，可以使用以下简单函数：var getColumnIndexByName = function(grid, columnName) {&nbsp; &nbsp; &nbsp; &nbsp; var cm = grid.jqGrid('getGridParam','colModel'),i=0,l=cm.length;&nbsp; &nbsp; &nbsp; &nbsp; for (; i<l; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (cm[i].name===columnName) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return i; // return the index&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return -1;&nbsp; &nbsp; };该函数getColumnIndexByName($("#list"), 'MyColumnName')将为您获取colModel“ MyColumnName”列的索引。要更改背景色，您可以按照以下示例操作loadComplete: function() {&nbsp; &nbsp; $("tr.jqgrow:odd").addClass('myAltRowClass');}从答案中，但是':odd'可以使用jQuery.filter自己编写过滤器来代替过滤器。在过滤器内部，您可以使用：nth-child（）来访问来自相应<td>元素的数据（请参阅此处）更新：您可以执行以下操作（非常接近另一个答案中的代码）：loadComplete: function() {&nbsp; &nbsp; var iCol = getColumnIndexByName($(this),'closed'),&nbsp; &nbsp; &nbsp; &nbsp; cRows = this.rows.length, iRow, row, className;&nbsp; &nbsp; for (iRow=0; iRow<cRows; iRow++) {&nbsp; &nbsp; &nbsp; &nbsp; row = this.rows[iRow];&nbsp; &nbsp; &nbsp; &nbsp; className = row.className;&nbsp; &nbsp; &nbsp; &nbsp; if ($.inArray('jqgrow', className.split(' ')) > 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var x = $(row.cells[iCol]).children("input:checked");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (x.length>0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($.inArray('myAltRowClass', className.split(' ')) === -1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; row.className = className + ' myAltRowClass';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}相应的演示在这里。您将看到以下内容：顺便说一下，如果“关闭”列将被隐藏，则所有内容将继续像以前一样工作。更新2：答案描述了如何使用rowattr回调简化解决方案并获得最佳性能（如果为gridview: true）。