如何根據複選框值突出顯示 jqGrid 中的行？

根據複選框值反白顯示行

在jqGrid 中，您可以反白顯示特定複選框為true 的行，在某些情況下為您提供視覺回饋條件滿足。這可以透過回調和 CSS 樣式來實現。

實作：

1. Rowattr 回呼： 利用 rowattr 回呼來設定自訂屬性到行。在您的情況下，您可以為突出顯示的行定義 CSS 類別。

rowattr: function (rd) {
    if (rd.GroupHeader === "1") { // assuming your checkbox column is named "GroupHeader"
        return {"class": "myAltRowClass"};
    }
}

2. CSS 樣式： 定義一個 CSS 類別來控制突出顯示的行的外觀。例如，您可以使用以下內容：

.myAltRowClass {
    background-color: #ffff00;
}

替代解決方案：

除了rowattr 回呼之外，jqGrid 版本4.3.2 還提供了稱為gridview 的新功能，它增強了效能並提供了一種更簡潔的方式來突出顯示行。

gridview: true,
rowattr: function (rd) {
    if (rd.GroupHeader === "1") { // assuming your checkbox column is named "GroupHeader"
        return {"class": "myAltRowClass"};
    }
}

列模板：

要簡化程式碼，請考慮使用列模板定義多個列的公共屬性。這簡化了您的列定義並使其更易於維護。

cmTemplate: {align: 'center', sortable: false, editable: true, width: 80},
...
colModel: [
    {name: 'TypeID', ...},
    {name: 'Order1', template: myTextareaTemplate},
    // ...
]

範例：

#maingrid").jqGrid({
    rowattr: function (rd) {
        if (rd.GroupHeader === "1") { // assuming your checkbox column is named "GroupHeader"
            return {"class": "myAltRowClass"};
        }
    },
    cmTemplate: {align: 'center', sortable: false, editable: true, width: 80},
    colModel: [
        {name: 'TypeID', ...},
        {name: 'Order1', template: myTextareaTemplate},
        // ...
    ]
});

以上是如何根據複選框值突出顯示 jqGrid 中的行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！