jQGrid - изменить цвет фона заголовка группировки

Question

Я использую jQGrid с группировкой. Каждый заголовок группы будет иметь один из трех возможных вариантов: Pending, Duplicate, Not Duplicate.

Основываясь на этом тексте, я хочу изменить цвет фона моего заголовка группировки. Я уже использую свойство jQGrid rowattr, чтобы изменить цвет фона моих строк сетки, но я не могу понять, как изменить цвет заголовка группировки.

Вот моя реализация rowattr, которую я считаю, должен быть похож на группирования цвет фона заголовка:

gridview: true, 
rowattr: function (rd) { 
    alert(rd.duplicateStatusName); 
    if (rd.duplicateStatusName === "Pending Review") { 
     return { "class": "css_trStatusBackground_pending" }; 
    } 
    else if (rd.duplicateStatusName === "Duplicate") { 
     return { "class": "css_trStatusBackground_dup" }; 
    } 
    else if (rd.duplicateStatusName === "Not a duplicate") { 
     return { "class": "css_trStatusBackground_notdup" }; 
    } 
}, 

Вот скриншот моей текущей сетки:

Я хочу, чтобы темный серый цвет заголовка был другого цвета (аналогично цвету строки) на основе этого текста в заголовке.

Возможно ли это?

Answer 1

В настоящее время реализация groupingRender не позволяет использовать какой-либо тип rowattr для создания заголовков группировки. Итак, вам нужно перебирать группы groupingView.groups, протестировать value и добавить класс css вручную внутри loadComplete.

The demo демонстрирует возможную реализацию подхода:

Соответствующий код может быть следующее:

grouping: true, 
groupingView: { 
    groupField: ["name"], // column name by which we group 
    groupColumnShow: [true], 
    groupCollapse: true 
}, 
rowattr: function (rd) { 
    switch (rd.name) { 
    case "test1": 
     return { "class": "class1" }; 
    case "test2": 
     return { "class": "class2" }; 
    case "test3": 
     return { "class": "class3" }; 
    default: 
     return {}; 
    } 
}, 
loadComplete: function() { 
    var i, group, cssClass, headerIdPrefix = this.id + "ghead_", 
     groups = $(this).jqGrid("getGridParam", "groupingView").groups, 
     l = groups.length; 
    for (i = 0; i < l; i++) { 
     group = groups[i]; 
     switch (group.value) { 
     case "test1": 
      cssClass = "class1"; 
      break; 
     case "test2": 
      cssClass = "class2"; 
      break; 
     case "test3": 
      cssClass = "class3"; 
      break; 
     default: 
      cssClass = ""; 
      break; 
     } 
     // listghead_0_1 
     if (cssClass !== "") { 
      $("#" + headerIdPrefix + group.idx + "_" + i).addClass(cssClass); 
     } 
    } 
}