jquery - JQGrid，根据条件更改行背景颜色

Question

我有以下 jqgrid，它使用导入到我的母版页的 jquery ui 主题。

  $("#shippingscheduletable").jqGrid({
            url: $("#shippingscheduleurl").attr('href'),
            datatype: 'json',
            mtype: 'GET',
            altRows: true,
            colNames: ['Dealer', 'Model', 'Invoice', 'Date', 'PO', 'Serial', 'Status', 'City', 'State', 'IsPaid', '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: 'IsPaid', index: 'IsPaid', width: 30, align: 'left' },
     { 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
        });

我想更改 IsPaid 字段具有真实值的所有行的行颜色。这可能吗？如果是这样，我该怎么做？我一直在研究自定义格式，但我不确定这是否是正确的方法，因为我找不到任何有关更改背景颜色的信息。

Answer 1

这里是完整的代码，仅供其他人引用。我还发现我需要添加另一个条件来更改行的颜色。仅当付费字段为 true 且状态完成时，我才需要更改行颜色。这段代码表明了这一点。它还修复了对列进行排序时重新加载网格时丢失格式的问题。我希望这对其他人有帮助。

    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;
    }

因此，如果付费值为 true，格式化程序函数会将需要更改的 rowid 添加到数组中，然后当网格完成时，在检查第 7 个 td 的值后，它会更改每个行 id 的 css是找到我的状态以确保其完整的地方。