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) {

        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')将为您获取colModel“ MyColumnName”列的索引。

要更改背景色，您可以按照以下示例操作

loadComplete: function() {

    $("tr.jqgrow:odd").addClass('myAltRowClass');

}

从答案中，但是':odd'可以使用jQuery.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回调简化解决方案并获得最佳性能（如果为gridview: true）。