jqGrid根据单元格值在网格中着色整条线

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

在我看来，你的主要问题是你没有设置'背景色'风格。你应该从该行添加类state_activ或state_inactive之前删除“UI小部件内容”级（从<tr>元素）

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

，因为jQuery UI类的UI小部件内容'是定义.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

我建议大家尽量some​​ing这样。 这实际上会让你访问整行。

afterInsertRow: function(rowid, aData, rowelem) 
    { 
     if (aData.field =='value'){  
      jQuery("#list1").setCell(rowid,'message','',{color:'red'}); 
     } 
    } 

Answer 3

为任何人找这个话题真正的答案..

这个作品！

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

} 

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

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

不要忘了！重要的是要覆盖主题UI辊

Answer 4

我已经试过上述解决方案，但我认为一个是正确：

afterInsertRow : function(rowid, rowdata) 
{ 
    if (parseFloat(rowdata.amount) > 500) 
    { 
     $(this).jqGrid('setRowData', rowid, false, {color:'red'}); 
    } 
} 

如果css类位于撇号之间，则它被覆盖原来的一个（你可以看到，很容易使用Firebug）：

<tr class="ui-widget-content jqgrow ui-row-ltr RedStyle" ...> 

与{颜色： '红色'}：正确

<tr class="ui-widget-content jqgrow ui-row-ltr" style="background: none repeat scroll 0pt 0pt red;" ...> 

根据setRowData的文档：

如果cssprop参数是字符串，我们使用addClass将类添加到行中。如果参数是对象，我们使用css来添加css属性。

Answer 5

我在长时间的尝试解决方案，最后从所有的例子和建议结合起来，为我工作。当然你需要定义自定义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'); 
      } 
     } 
     } 
    }, 

...

Answer 6

afterInsertRow: function (rowid, rowdata) {              
    $(grid).jqGrid('setRowData', rowid, false, { background: 'red' }); 
} 

非常简单，工作

Answer 7

假定其他单元格的值是Y/N。

以下代码放在loadComplete事件

var rowIDs = jQuery("#GRID").getDataIDs(); //Get all grid row IDs 
for (var i = 0; i < rowIDs.length; i++) {  //enumerate rows in the grid 
    var rowData = $("#GRID").jqGrid('getRowData', rowIDs[i]); 
    //If condition is met (update condition as req) 
    if (rowData["COLNAME_CHECKED"] == "N") {   

     //set cell color if other cell value is matching condition 
     $("#GRID").jqGrid('setCell', rowIDs[i], "COLNAMEModified", "", { color: 'red' }); 
     //for row color, update style. The code is given above by **Ricardo Vieira** 
    } 
}