jqGrid изменить цвет фона конкретных заголовков столбцов

Question

У меня есть jqGrid и вам нужно изменить фоновый цвет определенных групп столбцов заголовка. Я могу легко сделать это в colModel, используя {classes: "ColIndicator"}, но не имеет для этого параметра в заголовке. Каков наилучший способ справиться с этим сценарием?

Edit: Пример кода:

$("#" + 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). Я бы рекомендовал вам удалить все ненужные index свойства от colModel. Это уменьшит код, но код будет делать то же самое.