来自服务器端响应的 jqgrid 中单元格的条件背景颜色设置

Question

我正在使用网格完成中的 setcell 选项更改单元格的背景颜色。我已经成功地根据需要更改了背景颜色，但是与更改颜色相比，加载数据所花费的时间更快。耗时较长，有时浏览器会因为数据量大而崩溃。

我想知道是否有任何方法可以从服务器端响应（JSON 格式）更改单元格的背景颜色？

gridComplete: function()
{
var rows = $("#tableid").getDataIDs(); 
var ref={};
for (var i=0;i<rows.length;i=i+1){
if(i==2){
rowData=jQuery("#tableid").getRowData(rows[2]);
var count= Object.keys(rowData).length;
for(var j=1;j<=count;j++){ ref[j]=rowData['r'+j];}
$("#tableid").jqGrid('setRowData',rows[2],false,color:'white',weightfont:'bold',background:'green' });}
if(i>2){
rowData=jQuery("#tableid").getRowData(rows[i]); 
for(var j=1;j<=count;j++){
 if(rowData['r'+j]==ref[j]){
$("#tableid").jqGrid('setCell',rows[i],'r'+j,''{color:'white',weightfont:'bold',background:'green'}); }
else if(rowData['r'+j]=='-'){
$("#tableid").jqGrid('setCell',rows[i],'r'+j,'',{color:'black',weightfont:'bold',background:'white'}); } 
else if(rowData['r'+j]== 'R'){
$("#tableid").jqGrid('setCell',rows[i],'r'+j,'',{color:'black',weightfont:'bold',background:'yellow'});
 } 
else if(rowData['r'+j]== 'M'){
$("#tableid").jqGrid('setCell',rows[i],'r'+j,'',{color:'black',weightfont:'bold',background:'yellow'});
} 
else if(rowData['r'+j]== 'Y'){
$("#tableid").jqGrid('setCell',rows[i],'r'+j,'',{color:'black',weightfont:'bold',background:'yellow'});
} 
else if(rowData['r'+j]== 'S'){
$("#tableid").jqGrid('setCell',rows[i],'r'+j,'',{color:'black',weightfont:'bold',background:'yellow'});
} 
else if(rowData['r'+j]== 'K'){
$("#tableid").jqGrid('setCell',rows[i],'r'+j,'',{color:'black',weightfont:'bold',background:'yellow'});} 
else {
$("#tableid").jqGrid('setCell',rows[i],'r'+j,'',{color:'black',weightfont:'bold',background:'red'}); } 
}
}
} },

Answer 1

首先，我建议您阅读 the answer，其中描述了 gridview: true 选项的含义。了解页面上 one 元素的更改可以跟随页面上其他元素的属性（例如位置）的重新计算非常重要。所以应该减少页面上的更改次数。在 gridComplete 内的循环中调用 setCell 会导致错误。如果网格中有 n 行，则此类代码具有 n*n 复杂性。所以代码可能真的很慢。

下一个常见建议：您应该更喜欢使用 loadComplete 而不是 gridComplete。回调 gridComplete 应该主要用于在网格中的 adding/removing 行之后更改寻呼机上的信息。有关详细信息，请参阅 the answer。

您真正应该做的是在应该更改背景的列中使用 cellattr 回调。回调将在在构建列的单元格期间调用。在使用 gridview: true 选项的情况下，jqGrid 收集网格主体的所有内容并将其作为一个操作 放在页面上 。因此，填充网格的性能实际上与删除设置背景颜色的代码一样。您可以在 the answer, this one (or this one), this one 和其他地方找到使用 cellattr 回调的示例。您可以为不同的背景颜色（background 或 background-color 和 background-image: none）定义 CSS 类并将类分配给内部的单元格cellattr回调。或者，您可以为内联 style 分配相应的属性。

您应该以任何方式验证您在网格中使用 gridview: true 选项以获得更好的性能。

Answer 2

您可以使用单元格格式器（自定义）

在 colModel 的 jqGrid 定义中为您的特殊列设置格式化程序（一个函数）。

function formatRating(cellValue, options, rowObject) {

   var color = (parseInt(cellValue) > 0) ? "green" : "red"; 

   var cellHtml = "<span style='color:" + color + "' originalValue='" + cellValue + "'>" + cellValue + "</span>";

   return cellHtml;
   }

更多详情请访问： http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter

或查看演示： http://www.guriddo.net/demo/guriddojs/functionality/formatters_custom/index.html

来自服务器端响应的 jqgrid 中单元格的条件背景颜色设置

Conditional background color setting of a cell in jqgrid from server side response

jquery

jqgrid