jQGrid – 更改分组标题的背景颜色

我正在使用jQGrid进行分组。 每个组标题将具有三种可能性之一： Pending ， Duplicate ， Not Duplicate 。

基于该文本，我想更改分组标题的背景颜色。 我已经在使用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并在loadComplete手动添加css类。

该演示演示了该方法的可能实现：

相应的代码可能如下：

 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); } } }