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

Question

我正在使用 jQGrid 进行分组。每个组标题将具有三种可能性之一:待处理、重复、不重复。

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

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