排序列时JqGrid setCell属性丢失

Question

在编辑一行（模式内联）后，我尝试根据新值更改单元格的一些 css 属性。

通常：编辑一行后，该行的所有单元格都包含字母“D”，我使用新的 css 属性更新单元格：背景颜色：灰色（使用 setCell 方法）

为此，我使用内联编辑：

grid.jqGrid('navGrid',"#pager",{edit:false, add:false, del:false});
grid.jqGrid('inlineNav',"#pager",{edit:true, add:false, del:false, editParams: myEditParam});

为了在编辑后更改背景，我使用方法 aftersavefunc

myEditParam :
...
    aftersavefunc: function(rowId, dataFromServer)
    {
      var rowData = $("#list").jqGrid("getRowData", rowId);
      for (var key in rowData)
      {
        if (rowData[key] == "D")
        {
          key++;
          $("#list").jqGrid("setCell",rowId, key, "", {"background-color": "#ECECEC"}  );
        }
      }
    },
...

此代码有效，但不幸的是，当我对网格的一列进行排序时，setCell 方法没有被保留！ （单元格失去了它的背景颜色：灰色）

是否存在更好的方法在编辑新值后更改背景？

感谢您的帮助;)

Answer 1

我建议从该事件中删除样式，而是将其移至下面更通用的功能。如果未应用样式，您始终可以在 jqGrid 上触发刷新，作为您编辑后代码的一部分。

以下函数将检查每个列单元格的值，如果 TestValue 匹配，则将类添加到行中。

    rowattr: function (rd) {
           if (rd.ColumnName == TestValue) { return {"class": "RowBoldClass"}; }//if
    },

和匹配的类

RowBoldClass { font-weight:bold; .....

我的回答来自Making a row bold, changing background color - dwr

Answer 2

如果您确实需要更改可以为“D”的列中单元格的格式/颜色/样式，那么您应该使用cellattr（参见the answer或@987654322 @)。

如果您需要更改行的格式/颜色/样式，那么您应该使用rowattr（参见the answer）。

有一点需要理解：cellattr 和 rowattr 都不会在行编辑结束时被调用。所以你仍然必须使用aftersavefunc 回调。

aftersavefunc 的当前代码让我觉得有点奇怪。首先，我从来没有要求根据值（在您的情况下为“D”）在网格的 any 列中标记值。通常，只需要测试特定列的值，然后标记单元格或标记行中的其他单元格。

在任何情况下，通常都需要在值为“D”的情况下添加类，如果值不是“D”，则删除该类。

我从the answer修改了演示以支持内联编辑（应该使用双击开始编辑并按Enter停止编辑）。 The modified demo 除了旧演示中使用的cellattr 之外，还使用了以下aftersavefunc 代码：

aftersavefunc: function (rowId) {
    var closed = $(this).jqGrid("getCell", rowId, "closed"), indexOfColumn;
    if (closed === "Yes") {
        // add CSS classes to the cell used to mark
        $(this).jqGrid("setCell", rowId, "name", "",
           "ui-state-error ui-state-error-text");
    } else {
        // remove CSS classes from the cell used to mark
        indexOfColumn = getColumnIndexByName.call(this, "name");
        $(this.rows.namedItem(rowId).cells[indexOfColumn])
            .removeClass("ui-state-error ui-state-error-text");
    }
}