jQGrid - 更改分组头的背景颜色 [英] jQGrid - Change background color of grouping header

问题描述

我使用jQGrid与分组。每个组头将有三种可能性之一：未决，重复， code>。

根据该文本，我想更改分组标题的背景颜色。我已经使用jQGrid的 rowattr 属性来更改我的网格行的背景颜色，但我不知道如何更改分组头颜色。 p>

这是我的 rowattr 的实现，我相信应该类似于分组头背景颜色：

  gridview：true，
 rowattr：function（rd）{
 alert（rd。 duplicateStatusName）; 
 if（rd.duplicateStatusName ===待审核）{
 return {class：css_trStatusBackground_pending}; 
} 
 else if（rd.duplicateStatusName ===Duplicate）{
 return {class：css_trStatusBackground_dup}; 
} 
 else if（rd.duplicateStatusName ===不是重复的）{
 return {class：css_trStatusBackground_notdup}; 
} 
}，
  

这是我当前网格的截图： / p>

>

我希望深灰色标题颜色是基于标题中的文本的不同颜色（类似于我的行颜色）。

解决方案

当前实现 groupingRender 允许使用某种 rowattr 来设置分组头的样式。所以你必须遍历组 groupingView.groups ，测试 value 并手动添加css类 loadComplete 。

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

相应的代码可能如下：

  grouping：true，
 groupingView：{
 groupField：[name]，我们分组
 groupColumnShow：[true]，
 groupCollapse：true 
}，
 rowattr：function（rd）{
 switch（rd.name）{
 casetest1：
 return {class：class1}; 
 casetest2：
 return {class：class2}; 
 casetest3：
 return {class：class3}; 
默认值：
 return {}; 
} 
}，
 loadComplete：function（）{
 var i，group，cssClass，headerIdPrefix = this.id +ghead_，
 groups = $ this）.jqGrid（getGridParam，groupingView）。groups，
l = groups.length; 
 for（i = 0; i  group = groups [i]; 
 switch（group.value）{
 casetest1：
 cssClass =class1; 
 break; 
 casetest2：
 cssClass =class2; 
 break; 
 casetest3：
 cssClass =class3 
 break; 
默认值：
 cssClass =; 
 break; 
} 
 // listghead_0_1 
 if（cssClass！==）{
 $（＃+ headerIdPrefix + group.idx +_+ i）.addClass （cssClass）; 
} 
} 
} 
  

I'm using jQGrid with grouping. Each group header will have one of three possibilites: Pending, Duplicate, Not Duplicate.

Based on that text, I want to change the background color of my grouping header. I'm already using the rowattr property of jQGrid to change the background color of my grid rows, but I can't figure out how to change the grouping header color.

Here is my implementation of rowattr, which I believe should be similar to the grouping header background color:

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" };
    }
},

Here is a screenshot of my current grid:

I want that dark gray header color to be a different color (similar to my row color) based on that text in the header.

Is this possible?

解决方案

Current implementation of groupingRender don't allow to use some kind of rowattr to style the grouping headers. So You have to iterate over the groups groupingView.groups, test the value and add the css class manually inside of loadComplete.

The demo demonstrates possible implementation of the approach:

The corresponding code could be the following:

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

这篇关于jQGrid - 更改分组头的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！