如何根據複選框狀態突出顯示 JqGrid 中的行？

當複選框為True 時反白顯示行

在您的jqGrid 專案中，您的目標是根據複選框的狀態突出顯示行。

Rowattr 回調

jqGrid 4.3.2 版本引入了 rowattr 回調，它允許您在網格填充過程中向行添加自訂屬性。這是行突出顯示的合適方法。

rowattr: function (rd) {
    if (rd.GroupHeader === "1") { // Verify this logic based on your data structure
        return {"class": "myAltRowClass"};
    }
}

用於突出顯示的 CSS 類別

定義一個 CSS 類別 myAltRowClass，用於設定突出顯示的行的背景顏色。

多選和 gridview

對於不選擇行的行突出顯示，請省略 multiselect: true。若要提高效能，請啟用 gridview: true。

列模板的使用

要簡化代碼，您可以使用列模板：

cmTemplate

cmTemplate: {align: 'center', sortable: false, editable: true, width: 80}

自訂範本

為常用屬性建立自訂範本：

var myCheckboxTemplate = {
    formatter: 'checkbox',
    edittype: 'checkbox',
    type: 'select',
    editoptions: {value: "1:0"}
};

var myTextareaTemplate = {
    edittype: "textarea",
    editoptions: {size: "30", maxlength: "30"}
};

最佳化的colModel

colModel: [
    {name: 'TypeID', index: 'TypeID', width: 350, hidden: true, edittype: "select",
        editoptions: {value: getTypeID()}, editrules: { edithidden: true}},
    {name: 'Order1', index: 'Order1', template: myTextareaTemplate},
    {name: 'Order2', index: 'Order2', template: myTextareaTemplate},
    {name: 'Order3', index: 'Order3', template: myTextareaTemplate},
    {name: 'Description', index: 'Description', width: 140, template: myTextareaTemplate},
    {name: 'Notes', index: 'Notes', width: 120, template: myTextareaTemplate},
    {name: 'Measure', index: 'Measure', template: myTextareaTemplate},
    {name: 'UnitPrice', index: 'UnitPrice', width: 100, editable: false, template: myTextareaTemplate},
    {name: 'Remarks', index: 'Remarks', width: 140, template: myTextareaTemplate},
    {name: 'UnitCost', index: 'UnitCost', width: 100, template: myTextareaTemplate},
    {name: 'Service', index: 'Service', width: 120, template: myTextareaTemplate},
    //If the GroupHeader is true the row background is yellow
    {name: 'GroupHeader', index: 'GroupHeader', width: 100, template: myCheckboxTemplate},
    {name: 'IsGroup', index: 'IsGroup', template: myCheckboxTemplate}
],
cmTemplate: {align: 'center', sortable: false, editable: true, width: 80}

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