チェックボックスの値に基づいて 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: 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 中国語 Web サイトの他の関連記事を参照してください。