jqGrid Раскраска всей строки в сетке на основе значения ячеек

Question

Я знаю, что об этом спрашивали раньше, но я не могу запустить его, и у меня нет возможности попробовать.

Я хочу раскрасить строку в сетке, если ее значение не равно 1 - Iиспользуйте пользовательский форматтер для этого.Сам форматтер работает, это не проблема.

Я пробовал несколько способов, которые я нашел в Интернете - добавление класса, прямое добавление кода CSS, использование setRowData, использование setCell....

Вот мои примеры - ни один из них не работал для меня (Linux, ff363) - любой указатель был бы очень признателен.

27.05.2010_00: 00: 00-27.05.2010_00: 00: 00 - это мой идентификатор строки

<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

Мне кажется, что ваша главная проблема в том, что вы не устанавливаете стиль 'background-color'.Вы должны удалить класс 'ui-widget-content' из строки (из <tr> элемента)

jQuery("#"+ options.rowId,jQuery('#list2')).removeClass('ui-widget-content');

перед добавлением класса state_activ или state_inactive, потому что класс jQuery UI 'ui-widget-content 'определено .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

для тех, кто ищет реальный ответ в этой теме ..

это работает!

afterInsertRow : function(rowid, rowdata)
{
    if (rowdata.colmodelnamefield == "something")
    {
        $(this).jqGrid('setRowData', rowid, false, 'StyleCss');
    }

}

В другой таблице стилей файла пользовательский CSS

.StyleCss{ background-color:red !important; }

не забудьте! Важно перезаписать ролик пользовательского интерфейса темы

Answer 3

Я долго пытался найти решение и, наконец, из всех примеров и предложений сочетаю что-то, что мне помогло. Конечно, вам нужно определить собственные стили 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 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" ...>  

правильно с {color: 'red'}:

<tr class="ui-widget-content jqgrow ui-row-ltr" style="background: none repeat scroll 0pt 0pt red;" ...>

В соответствии с документацией setRowData:

Если параметр cssprop является строкой, мы используем addClass для добавления классов в строку. Если параметр является объектом, мы используем css для добавления свойств css .

Answer 5

 afterInsertRow: function (rowid, rowdata) {                                                     
    $(grid).jqGrid('setRowData', rowid, false, { background: 'red' });
}

Очень просто и работает

Answer 6

Я предлагаю вам попробовать что-нибудь подобное. Это фактически даст вам доступ ко всему ряду.

afterInsertRow: function(rowid, aData, rowelem) 
     {  
        if (aData.field =='value'){    
            jQuery("#list1").setCell(rowid,'message','',{color:'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**
     }
 }