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** 
    } 
}