Условная настройка цвета фона ячейки в 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 опции. Очень важно понять, что изменение одного элемента на странице может следовать за пересчетом свойств (например, позиции) других элементов на странице. Поэтому следует уменьшить количество изменений на странице. Вызов setCell в цикле внутри gridComplete делает ошибку. В случае наличия n строк в сетке такой код имеет n*n сложность. Таким образом, код может быть очень медленным.

Следующий общий совет: вы должны предпочесть использование loadComplete вместо gridComplete. Обратный вызов gridComplete должен использоваться в основном для изменения информации на пейджере после добавления/удаления строк в сетке. См. the answer для более подробной информации.

Что вы действительно должны сделать, это использовать обратный вызов cellattr в столбце, фон которого должен быть изменен. Обратный вызов будет вызван во время, строя ячейки столбца. В случае использования gridview: true опция jqGrid собирает все содержимое тела сетки и размещает его на странице в качестве одной операции. Таким образом, вы получите практически такую ​​же производительность заполнения сетки, как если бы вы удалили код, который задавал цвет фона. Вы можете найти примеры использования cellattr callback в the answer, this one (или this one), this one и другие. Вы можете определить классы CSS для разных цветов фона (background или оба background-color и background-image: none) и назначить классы ячейке внутри обратного вызова cellattr. В качестве альтернативы вы можете назначить inline style с соответствующими свойствами.

В любом случае вы должны убедиться, что используете опцию gridview: true в сетке, чтобы иметь лучшую производительность.

Answer 2

Вы можете использовать клетки formater (пользовательские)

В определении jqGrid в colModel для специального колонка, установи форматировщик (функцию).

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