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

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

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

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

在任何情况下，您都应该验证是否在网格中使用gridview: true选项以获得更好的效果。

Answer 2

您可以使用 cell formater（自定义）

在colModel中为您的特殊列定义jqGrid时，请设置formatter（函数）。

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中的单元格的条件背景颜色设置

2 个答案: