jqGrid根据单元格值在Grid中着色整行

Question

我知道之前有人问过这个问题,但是我无法让它运行起来,我没有尝试过.

如果它的值不是1,我想在网格中着色一行 - 我为此使用自定义格式化程序.格式化程序本身有效,这不是问题.

我尝试了迄今为止我在网上找到的多种方法 - 添加一个类,直接添加CSS代码,使用setRowData,使用setCell....

这是我的例子 - 它们都不适合我(Linux,ff363) - 任何指针都会非常感激.

27.05.2010_00:00:00-27.05.2010_00:00:00是我的行ID

<style>
.state_inactive {
            background-color: red !important;
        }
.state_active {
    background-color: green !important;
}
</style>

function format_state (cellvalue, options, rowObject)
{
    var elem='#'+options.gid;
    if (cellvalue != 1) {

        jQuery('#list2').setRowData(options.rowID,'',
                                    {'background-color':'#FF6F6F'});

        jQuery('#list2').setRowData('27.05.2010_00:00:00-27.05.2010_00:00:00',
                                    '',{'background-color':'#FF6F6F'});

        for (var cnt=0;cnt<rowObject.length;cnt=cnt+1) {
            jQuery(elem).setCell(options.rowId,cnt,'','state_inactive','');

            jQuery(elem).setCell('"'+options.rowId+'"',cnt,'','state_inactive');

            jQuery(elem).setCell('"'+options.rowId+'"',cnt,'5',
                                 {'background-color':'#FF6F6F'},'');
        }
    } else {
        for (var cnt=0;cnt<rowObject.length;cnt=cnt+1) {
            jQuery(elem).setCell(options.rowId,cnt,'','state_active','');
        }
    }
    <!-- dont modify, we simply added the class above-->
    return cellvalue;
}

Answer 1

在我看来,你的主要问题是你没有设置'背景颜色'的风格.你应该从行中删除'ui-widget-content'类(来自<tr>元素)

jQuery("#"+ options.rowId,jQuery('#list2')).removeClass('ui-widget-content');

在添加类之前,state_activ或者state_inactive,因为jQuery UI类'ui-widget-content'被定义.ui-widget-content为

{
border: 1px solid #fad42e;
background: #fbec88 url(images/ui-bg_flat_55_fbec88_40x100.png) 50% 50% repeat-x;
color: #363636;
}

并且只有设置CSS 'background-color'才能真正改变背景颜色.所以尝试使用类似的东西

var trElement = jQuery("#"+ options.rowId,jQuery('#list2'));
trElement.removeClass('ui-widget-content');
trElement.addClass('state_active');

Answer 2

对于那些在这个主题上寻找真正答案的人来说..

这个有效!

afterInsertRow : function(rowid, rowdata)
{
    if (rowdata.colmodelnamefield == "something")
    {
        $(this).jqGrid('setRowData', rowid, false, 'StyleCss');
    }

}

在另一个文件样式表中自定义CSS

.StyleCss{ background-color:red !important; }

别忘了!重要的是要覆盖主题ui roller

Answer 3

我正在尝试解决方案很长一段时间,最后从所有的例子和建议中结合起来对我有用的东西.当然,您需要为此定义自定义css样式.希望这会有所帮助,尽管它可能产生潜在的速度问题.

...

loadComplete: function() {

      var rowIDs = jQuery("#grid").getDataIDs(); 
      for (var i=0;i<rowIDs.length;i=i+1){ 
        rowData=jQuery("#grid").getRowData(rowIDs[i]);
        var trElement = jQuery("#"+ rowIDs[i],jQuery('#grid'));
        if (rowData.statusID > 5) { 
            trElement.removeClass('ui-widget-content');
            trElement.addClass('rowColorRED');
        }else{ 
          if (rowData.statusID == 1){
            trElement.removeClass('ui-widget-content');
            trElement.addClass('rowColorGREEN');
          }
        }
      }
  },

...