JQGrid, изменить цвет фона строки на основе условия

Ответ 1

используйте функцию форматирования:

как в этом сообщении

http://www.trirand.net/forum/default.aspx?g=posts&m=2678

Ответ 2

Для справки других здесь приведен код. Я также обнаружил, что мне нужно добавить другое условие, чтобы изменить цвет строки. Мне нужно было изменить цвет строки только тогда, когда плавающее поле истинно, и когда статус завершен. Этот код показывает это. Также была устранена проблема потери форматирования при перезагрузке сетки при сортировке столбцов. Надеюсь, это поможет кому-то другому.

    var rowsToColor = [];
    jQuery(function () {
        $("#shippingscheduletable").jqGrid({
            url: $("#shippingscheduleurl").attr('href'),
            datatype: 'json',
            mtype: 'GET',
            altRows: true,
            colNames: ['Dealer', 'Model', 'Invoice', 'Date', 'PO', 'Serial', 'Status', 'City', 'State', 'Paid', 'Promo', 'Carrier', 'Int Notes', 'Ord Notes', 'Terms'],
            colModel: [
     { name: 'Company', index: 'id', width: 125, align: 'left' },
     { name: 'Model', index: 'Model', width: 50, align: 'left' },
     { name: 'Invoice', index: 'Invoice', width: 50, align: 'left' },
     { name: 'Date', index: 'OrderDate', width: 60, align: 'left' },
     { name: 'Po', index: 'PONum', width: 75, align: 'left' },
     { name: 'Serial', index: 'Serial', width: 50, align: 'left' },
     { name: 'Status', index: 'OrderStatus', width: 70, align: 'left' },
     { name: 'City', index: 'City', width: 100, align: 'left' },
     { name: 'State', index: 'State', width: 30, align: 'left' },
     { name: 'Paid', index: 'IsPaid', width: 30, align: 'left', formatter: rowColorFormatter },
     { name: 'Promo', index: 'Promo', width: 50, align: 'left' },
     { name: 'Carrier', index: 'Carrier', width: 80, align: 'left' },
     { name: 'InternalNotes', index: 'InternalNotes', width: 110, align: 'left' },
     { name: 'OrderNotes', index: 'OrderNotes', width: 110, align: 'left' },
     { name: 'Terms', index: 'Terms', width: 60, align: 'left' }
     ],
            pager: jQuery("#shippingschedulepager"),
            rowNum: 100,
            rowList: [100, 150, 200],
            sortname: 'Company',
            sortorder: "asc",
            viewrecords: true,
            height: '700px',
            multiselect: true,
            gridComplete: function () {
                for (var i = 0; i < rowsToColor.length; i++) {
                    var status = $("#" + rowsToColor[i]).find("td").eq(7).html();
                    if (status == "Complete") {
                        $("#" + rowsToColor[i]).find("td").css("background-color", "green");
                        $("#" + rowsToColor[i]).find("td").css("color", "silver");
                    }
                }
             }
        });
    });

    function rowColorFormatter(cellValue, options, rowObject) {
        if (cellValue == "True")
            rowsToColor[rowsToColor.length] = options.rowId;
        return cellValue;
    }

поэтому функция форматирования добавляет значение rowid, которое необходимо изменить в массив, если плавающее значение истинно, а затем, когда сетка завершена, она изменяет css для каждого идентификатора строки после проверки значения 7-го td, которое где мой статус найден, чтобы убедиться, что он завершен.

Ответ 3

Я попробовал это и работает, чтобы установить цвет фона для всей строки. Также работает с пейджингом:

gridComplete: function()
{
    var rows = $("#"+mygrid).getDataIDs(); 
    for (var i = 0; i < rows.length; i++)
    {
        var status = $("#"+mygrid).getCell(rows[i],"status");
        if(status == "Completed")
        {
            $("#"+mygrid).jqGrid('setRowData',rows[i],false, {  color:'white',weightfont:'bold',background:'blue'});            
        }
    }
}

Ответ 4

Это указывало мне в правильном направлении, но не работало для меня с пейджингом. Если это кому-то помогает, следующее работает и не использует форматтера colModel.

Мне нужно было применить красный цвет к отдельным ячейкам с выдающимися суммами (имя: os) в 9-м ядре на моей сетке. Datatype был json, и я использовал функцию loadComplete, которая имеет ответ на данные как свой параметр:

loadComplete: function(data) {
    $.each(data.rows,function(i,item){
        if(data.rows[i].os>0){
            $("#" + data.rows[i].id).find("td").eq(9).css("color", "red");
        }
    });
},

Избавился от проблем пейджинга, которые у меня были, и работает над сортировкой и т.д.

В стороне - я нашел функцию loadComplete, полезную для добавления в динамическую информацию, например, изменение текстов субтитров для результатов поиска - возможно, очевидным для многих, но я новичок в json, jquery и jqgrid

Ответ 5

Как насчет использования JQuery Css.
См. Код ниже, чтобы установить строки с неактивным статусом на красный. Имя сетки jqTable.

setGridColors: function() {
    $('td[title="Inactive"]', '#jqTable').each(function(i) {
        $(this).parent().css('background', 'red');
    });
}

Ответ 6

Чтобы нарисовать сетку, используйте следующую функцию. Например: PintarRowGrilla('#gridPreSeleccion', 3, 9, '#8FD9F1'); 9 → количество столбцов вашей сетки:

function PintarRowGrilla(idGrilla, idrow, nrocolumnas, color)
{
    while(nrocolumnas > 0)
    {
        nrocolumnas--;
        jQuery(idGrilla).setCell(idrow, nrocolumnas, '', {
            'background-color': color
        });
    }
}

Ответ 7

Я использовал простой селектор JQuery и применил мои нужные стили. Все, что вам нужно - это uid (rowid) строки, к которой вы хотите применить стили.

if (!xCostCenter[i].saveSuccessful)
{  
    $("#row" + _updatedRowIDs[i] + "jqxgrid > div").css({ "background-color": "rgb(246, 119, 119)" });
}

В моем случае я хотел изменить цвет строк, которые не были сохранены, чтобы перейти на красный цвет. Чтобы удалить цвет, выполните следующие действия.

$("#contenttablejqxgrid > div > div").css({ "background-color": "" });

надеюсь, что это поможет кому-то.

Ответ 8

 loadComplete: function() {
    var ids = $(this).jqGrid("getDataIDs"), l = ids.length, i, rowid, status;
        for (i = 0; i < l; i++) {
        rowid = ids[i];
    // get data from some column "ColumnName"
        varColumnName= $(this).jqGrid("getCell", rowid, "ColumnName");
    // or get data from some 
    //var rowData = $(this).jqGrid("getRowData', rowid);

    // now you can set css on the row with some
        if (varColumnName=== condition) {
            $('#' + $.jgrid.jqID(rowid)).addClass('myAltRowClass');
         }
    }
},