如何从 jqGrid 单元格中删除 CSS 类？答案

【问题标题】：How do I remove a CSS class from a jqGrid cell?如何从 jqGrid 单元格中删除 CSS 类？
【发布时间】：2011-06-14 15:47:03
【问题描述】：

可以使用下面的 setCell 方法将 CSS 类添加到 jqGrid 单元格。

grid.setCell(rowId, "ColumnName", "", "my-style-class");

考虑到此方法似乎只能添加 CSS 类，如何从 jqGrid 单元格中删除 CSS 类？

【问题讨论】：

标签： css jqgrid

【解决方案1】：

不能使用标准的 jqGrid 方法删除调用类。因此，您必须手动执行此操作：

var iCol = getColumnIndexByName(grid,"ColumnName"),
    tr = grid[0].rows.namedItem(rowid), // grid is defined as grid=$("#grid_id")
    td = tr.cells[iCol];
$(td).removeClass("my-style-class");

getColumnIndexByName 是一个通过列名获取列索引的简单函数：

var getColumnIndexByName = function(grid,columnName) {
    var cm = grid.jqGrid('getGridParam','colModel');
    for (var i=0,l=cm.length; i<l; i++) {
        if (cm[i].name===columnName) {
            return i; // return the index
        }
    }
    return -1;
}

查看演示 here。

更新：Free jqGrid 有iColByName 内部参数，可以用来代替getColumnIndexByName 函数。 iColByName 参数将在内部由 free jqGrid 填充，并将通过列的重新排序来更新。所以使用起来很安全

var p = grid.jqGrid("getGridParam"), // get the reference to all parameters
    iCol = p.iColByName["ColumnName"], // get index by column name
    cm = p.colModel[iCol]; // item of "ColumnName" column

方法很简单，效果也很快。应该考虑到该功能包含在免费 jqGrid 中在免费 jqGrid 4.8 发布之后。因此，必须从 GitHub 下载最新的源代码或至少使用免费的 jqGrid 4.9-beta1 才能拥有该功能。

【讨论】：

【解决方案2】：

可以通过删除旧类轻松地将新类添加到单元格：

$("#gridname").removeClass('oldclass')
              .setCell(rowId,'column_name','','newclass');

其中rowId是对应单元格所在行的id，可以得到：

var ids = $("#gridname").jqGrid('getDataIDs');

【讨论】：