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

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

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

Я пробовал несколько способов, которые я нашел до сих пор в Интернете - добавление класса, непосредственное добавление кода 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;
}
Источник

8 ответов

Решение

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

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

перед добавлением класса state_activ или же state_inactive, потому что класс пользовательского интерфейса jQuery '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');
Источник

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

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

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

}

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


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

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

Источник

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

...

Источник

Я пробовал решения выше, но я думаю, что один правильный:

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.

Источник 
 afterInsertRow: function (rowid, rowdata) {                                                     
    $(grid).jqGrid('setRowData', rowid, false, { background: 'red' });
}

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

Источник

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

afterInsertRow: function(rowid, aData, rowelem) 
     {  
        if (aData.field =='value'){    
            jQuery("#list1").setCell(rowid,'message','',{color:'red'});   
        }   
     }
Источник

Возможно , уже слишком поздно для этого ответа, но вы можете использовать rowattr для изменения цвета строки следующим образом:

      rowattr : function(rd) {
            if(Difference_In_Days>=0&&rd.active==true){
                return {"class" : "online"};
            }else if(rd.active==false){
                return {"class" : "notActive"};
            }
            
        }
Источник

Предполагается, что другим значением ячейки является 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**
     }
 }
Источник
Другие вопросы по тегам