如何更改 jqGrid 单元格的颜色？答案

【问题标题】：How to change the color of jqGrid cell?如何更改 jqGrid 单元格的颜色？
【发布时间】：2011-06-23 23:41:29
【问题描述】：

我在 $(document).ready(

$("#stSearchTermsGrid").setCell(2, 2, '', {color:'red'}) ;

但它不起作用。是我写错了还是放错了地方。

我知道这个问题以前被问过不止一次，这就是我得到第一行的方式。但是我还是做不到，也不知道问题出在哪里。

【问题讨论】：

我稍微更新了我的答案，将两种样式“ui-state-error ui-state-error-text”一起使用，而不是之前只使用一种“ui-state-error-text”。跨度>
如果我想更改 jqgrid 的添加/编辑形式的 css 怎么办？

标签： jquery-ui jqgrid

【解决方案1】：

你是对的，你不是第一个提出这个问题的人。用我制作的单元格颜色清除情况the demo

为您以不同方式更改单元格的文本颜色或销售的背景颜色：

loadComplete: function() {
    // 2 is zero-base index of the column 'name' ('Client'). Every from the options
    // multiselect:true, rownumbers:true and subGrid:true will increase
    // the index by 1 because the option inserts additional columns
    $("#6 td:eq(2)", grid[0]).css({color:'red'});

    grid.jqGrid('setCell',"12","name","",{color:'red'});
    grid.jqGrid('setCell',"10",'name', '', 'my-highlight');
    grid.jqGrid('setCell',"8",'name', '', 'ui-state-error ui-state-error-text');

    grid.jqGrid('setCell',"4","name","",{'background-color':'yellow',
                                         'background-image':'none'});
    grid.jqGrid('setCell',"3","name","",'ui-state-highlight');
}

在哪里

<style type="text/css">
    .my-highlight { color: red; }
</style>

“3”、“4”、“6”、“8”、“10”和“12”是对应列颜色会发生变化的行的第throwid。

顺便说一句，我个人最喜欢的是使用“ui-state-highlight”或“ui-state-error ui-state-error-text”类的方法，它们是jQuery UI Themes 的一部分。

更新：为了了解在使用另一个 jQuery UI 主题的情况下不同方法的使用差异，我添加了 one more demo 使用了 La Frog 主题，其中与上面相同的表格看起来像以下：

【讨论】：

@ankit5607san：不客气！当前版本的jqGrid支持cellattr（见the answer和this one），更推荐在setCell内部使用loadComplete。
@Oleg：这太棒了。但是，我想为我拥有名称和索引的列的所有单元格更改 CSS。
@HardikMishra：答案很老了。现在还有其他可能做同样的事情。您可以使用cellattr（请参阅我上面的另一条评论）。如果您需要在某些列上设置一些额外的 CSS没有任何条件，您可以使用 classes 属性（参见 the documentation）
@Oleg：我知道classes 属性并且我已经使用了它。但我有一个名为“冻结列”的功能，我需要为此更改 CSS。我有 colId 和 colName。
@HardikMishra：最好发布一个新问题，详细描述问题。