jqGrid更改特定列标题的背景颜色

Question

我有一个 jqGrid，需要更改某些标题列组的背景颜色。我可以使用 {classes: "ColIndicator"} 在 colModel 中轻松完成此操作，但在标题中没有此选项。处理这种情况的最佳方法是什么？

编辑：示例代码：

$("#" + subgrid_table_id).jqGrid({
    url: "@Url.Action("GetInvalidItemsVendorItemsJson")",
    datatype: "json",
    postData: { itemUpc: $("#invalid-items-grid").getRowData(row_id)["i"] },
    autowidth: true,
    colNames: [
        'Vendor', 'Store Number',
        'Item Code',
        'Source1 Description', 'Source1 Case Pack', 'Source1 Size', 'Source1 Case UPC',
        'Source2 Description', 'Source2 Case Pack', 'Source2 Size', 'Source2 Case UPC',
        'Source3 Description', 'Source3 Case Pack', 'Source3 Size', 'Source3 Case UPC'
    ],
    colModel: [
        { name: 'Vendor', index: 'Vendor', classes: "Key" },
        { name: 'StoreNumber', index: 'StoreNumber', classes: "Key" },
        { name: 'ItemCode', index: 'ItemCode', classes: "Key" },
        { name: 'Source1Description', index: 'Source1Description', classes: "Source1" },
        { name: 'Source1CasePack', index: 'Source1CasePack', classes: "Source1" },
        { name: 'Source1Size', index: 'Source1Size', classes: "Source1" },
        { name: 'Source1CaseUpc', index: 'Source1CaseUpc', classes: "Source1" },
        { name: 'Source2Description', index: 'Source2Description', classes: "Source2" },
        { name: 'Source2CasePack', index: 'Source2CasePack', classes: "Source2" },
        { name: 'Source2Size', index: 'Source2Size', classes: "Source2" },
        { name: 'Source2CaseUpc', index: 'Source2CaseUpc', classes: "Source2" },
        { name: 'Source3Description', index: 'Source3Description', classes: "Source3" },
        { name: 'Source3CasePack', index: 'Source3CasePack', classes: "Source3" },
        { name: 'Source3Size', index: 'Source3Size', classes: "Source3" },
        { name: 'Source3CaseUpc', index: 'Source3CaseUpc', classes: "Source3" },
    ],
    loadonce: true,
    gridComplete: function() {
        if ($(this).getDataIDs().length == 0) {
            $("#" + subgrid_table_id).remove();
            $("#" + subgrid_id).html("<div class=\"records-not-found\">No records found for upc <span>" + $("#invalid-items-grid").getRowData(row_id)["i"] + "</span> in Source1, Source3 or Source2</div>");
        }
    }
});

注意网格中需要有多个样式（Source1 Source2 Source3 中的每个样式）。

Answer 1

您可以使用setLabel 方法将类添加到列标题或在<th> 元素上分配属性。例如，$("#" + subgrid_table_id).jqGrid("setLabel", "StoreNumber", false, "ui-state-highlight"); 会将"ui-state-highlight" 类添加到“StoreNumber”列的列标题中，并且它将以background-color 和background-image 的方式发生变化。

另外，我不建议您使用$(this).getDataIDs().length == 0 来测试网格中的记录数。方法getDataIDs 更多根据您的需要。你应该使用reccountoption 和测试$(this).getGridParam("reccount") === 0 而不是这样。您应该将重要的选项gridview: true 添加到网格中，这只会提高网格的性能（有关详细信息，请参阅the answer）。我建议您从colModel 中删除所有不需要的index 属性。它会减少代码，但代码会做同样的事情。