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

时间:2014-10-16 15:03:21

标签: jquery css jquery-plugins jqgrid

我有一个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中的每个样式)。

1 个答案:

答案 0 :(得分:1)

您可以使用setLabel方法将类添加到列标题中,或者在<th>元素上指定属性。例如,$("#" + subgrid_table_id).jqGrid("setLabel", "StoreNumber", false, "ui-state-highlight");会将"ui-state-highlight"类添加到列&#34; StoreNumber&#34;的列标题中。它会以background-colorbackground-image

的方式发生变化

此外,我不建议您使用$(this).getDataIDs().length == 0来测试网格中的记录数。您需要的方法getDataIDs更多。不应该使用reccount option并测试$(this).getGridParam("reccount") === 0。您应该向网格添加重要选项gridview: true,这只会提高网格的性能(有关详细信息,请参阅the answer)。我建议您从index中删除所有不需要的colModel属性。它会减少代码,但代码也会这样做。