如何根據列中的值更改JQGrid中的行顏色

我在我的應用程序中使用了JQGrid。如何根據列中的值更改JQGrid中的行顏色

這裏我想改變顏色，如果JqGrid的行根據列中的值。

我可以改變列的顏色，但我不能改變行的背景顏色。

這裏是我使用的更改行的顏色代碼...

loadComplete: function (data) { 
    //RETRIEVE COLUMN INDEX : ISPRINTED 
    var isPrintColIndex = getGridColumnIndex(jQuery("#list10_d"), 'isPrinted'); 

    //CHANGE COLOR OF PRINTED ARTICLES 
    //NOTE : JSON FORMATs ARE DIFFERENT SO ...HERE WE ARE ADDING CONDITION 
    if (data != null && data.rows != null) { 
     for (var index = 0; index < data.rows.length; index++) { 

      if (typeof (data.rows[index].id) === 'undefined') { 
       //LOAD BY JQGRID API ITSELF 
       if (data.rows[index].isPrinted == 'NO') { 
        if (data.rows[index].isPrinted == 'NO') { 
         jQuery("#list10_d").jqGrid(
          'setCell', data.rows[index]._id_, "articleid", 
          "", { 
          'background-color': 'red' 
         }); 
        } 
       } 
      } else { 
       ///FOR FIRST LOAD : LOAD BY JSON CALL 
       if (data.rows[index].cell[isPrintColIndex] == 'NO') { 
        jQuery("#list10_d").jqGrid(
         'setCell', data.rows[index].id, "articleid", "", { 'background-color': 'red' }); 
       } 
      } 
     } 
    } 
}

任何人都可以建議我改變了上面的代碼，所以我可以改變行的背景顏色？

來源

2013-01-21 Gunjan Shah

可通過在選定的<tr>元素（行）上分配額外的style或class屬性來定義行的顏色（背景顏色或文本的顏色）。 jqGrid有rowattr，它允許在填充網格物體的過程中做到這一點。所以rowattr的使用將爲您帶來最佳性能。您應該使用gridview: true來查看性能改進。

The answer提供您的問題的解決方案。

備選方法描述here是緩慢的，應該只用於舊版本的jqGrid，它沒有rowattr功能實現。要理解爲什麼rowattr的工作方式更快，我建議您閱讀the answer。

來源

2013-01-21 13:12:16 Oleg

Woww Oleg ..感謝您的回覆... rowattr正在爲我工作..它減少了我太多的LOL到一個單行來改變行顏色。我也參觀了你的演示..其精彩的工作..謝謝.. –

@GunjanShah：不客氣！ – Oleg

裏面的

loadComplete: function(){ 

    var rowIds = $(grid).jqGrid('getDataIDs'); 
    for (i = 1; i <= rowIds.length; i++) {//iterate over each row 
     rowData = $(grid).jqGrid('getRowData', i); 
     //set background style if ColumnValue == true 
     if (rowData['ColumnValue'] == 'true') { 
      $(grid).jqGrid('setRowData', i, false, "CSSRowSTyleToApply"); 
     } //if 
    } //for 
}//loadComplete

這應該做你在找什麼。如果您想根據行內的值對行進行着色，則您可以查找該值，因爲您已經擁有當前所在的行信息。

來源

2013-01-21 12:21:23 Mark

感謝您的答覆..不用編寫代碼這麼多行。在這個職位由奧列格認爲答案是更有效的方式..謝謝。 –

我同意，@ Oleg是男人！我將在未來使用他的方法（這對我來說是新的），並改變使用它的現有函數。奧列格的答案是更好的答案。 – Mark

以上解決方案相當接近，但需要一些非常重要的更改，請使用以下解決方案，希望您會喜歡！

loadComplete: function() { 
 
    var rowIds = $('#YourGridId').jqGrid('getDataIDs'); 
 
     for (i = 0; i < rowIds.length; i++) {//iterate over each row 
 
     rowData = $('#YourGridId').jqGrid('getRowData', rowIds[i]); 
 
     //set background style if ColValue === true\ 
 
     if (rowData['ColName'] === "ColValue") { 
 
     $('#YourGridId').jqGrid('setRowData', rowIds[i], false, "CSSClass"); 
 
     } //if 
 
    } //for 
 
}//loadComplete

來源

2015-02-05 07:24:18

如何根據列中的值更改JQGrid中的行顏色

回答

相關問題