3

グループ化でjQGridを使用しています。Pending各グループ ヘッダーには、Duplicate、 、の 3 つの可能性のうちの 1 つがありNot Duplicateます。

そのテキストに基づいて、グループ化ヘッダーの背景色を変更したいと考えています。rowattrjQGridのプロパティを使用してグリッド行の背景色を変更していますが、グループ化ヘッダーの色を変更する方法がわかりません。

これは、グループ化ヘッダーの背景色に似ている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" };
    }
},

これが私の現在のグリッドのスクリーンショットです:

ここに画像の説明を入力

ヘッダーのテキストに基づいて、濃い灰色のヘッダーの色を別の色 (行の色と同様) にしたいです。

これは可能ですか？

4

1 に答える 1

6

の現在の実装では、グループ化ヘッダーのスタイルgroupingRenderを設定するために何らかの種類を使用することは許可されていません。rowattrしたがって、グループを反復処理しgroupingView.groups、テストしてvalue、css クラスを手動で追加する必要がありloadCompleteます。

デモは、アプローチの可能な実装を示しています。

ここに画像の説明を入力

対応するコードは次のようになります。

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);
        }
    }
}
于 2013-11-11T10:08:18.630 に答える