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

Question

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

编辑:示例代码:

$("#" + 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你需要的更多。而不是那么你应该使用 reccount option和测试$(this).getGridParam("reccount") === 0 .您应该添加重要选项 gridview: true到网格，这只会提高网格的性能(有关详细信息，请参见 the answer)。我建议您删除所有不需要的 index来自 colModel 的属性.它会减少代码，但代码会做同样的事情。