如何改变jqGrid单元格的颜色?

时间:2011-02-09 08:36:29

标签: jquery-ui jqgrid

我在$(document).ready(

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

但它不起作用。我是以错误的方式写它还是把它放在错误的地方。

我知道这个问题不止一次被问过,这就是我得到第一行的方式。但我仍然无法做到这一点,也不知道问题出在哪里。

1 个答案:

答案 0 :(得分:46)

你是对的,你不是第一个提出这个问题的人。要使用我创建的单元格颜色the demo

来清除这种情况

enter image description here

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

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”是行的第二行,其中相应列的颜色将被更改。

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

UPDATED :为了理解在使用另一个jQuery UI主题的情况下不同方法的使用差异,我添加了one more demo使用了La Frog Theme,其中上面的表格与上面相同如下:

enter image description here