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

Posted 2023-05-09

【中文标题】jqGrid更改特定列标题的背景颜色

【英文标题】：jqGrid change background color of specific column headers

【发布时间】：2014-12-12 00:20:22

【问题描述】：

我有一个 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】：

您可以使用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 属性。它会减少代码，但代码会做同样的事情。

【讨论】：

这可行，但是我的 css 被网格 css 覆盖。有什么建议吗？

@CBauer：您应该发布您使用的 CSS 规则 :-) 最常见的问题是定义不够具体的 CSS 规则或不删除 background-image。

是的，我正在尝试添加.Source1。我也尝试了th.Source1，因为我无法点击所有字段，只能点击该来源的字段。

@CBauer：您能否发布您为 Source1 类定义的确切 CSS 规则？如果我不知道你具体做什么，我就帮不了你。

@CBauer：例如 CSS 规则 .Source1 background-color: yellow; background-image: none; 不够具体。规则.ui-jqgrid-htable .Source1 background-color: yellow; background-image: none; 更具体。另一条规则.ui-jqgrid .ui-jqgrid-htable .Source1 background-color: yellow; background-image: none; 甚至更具体。以此类推。