チェックボックスの値に基づいて jqGrid 内の行を強調表示するにはどうすればよいですか?

チェックボックスの値に基づいて行を強調表示

チェックボックスの値に基づいて jqGrid 内の行を強調表示するソリューションを探します。この機能は、rowattr コールバックを使用すると簡単に実現できます。これにより、グリッドの初期化中に個々の行の属性を操作できます。

rowattr コールバックの実装

rowattr コールバックは、行データを表す 1 つの引数 rd を取る関数。 rd オブジェクトを調べることで、特定の行を強調表示するかどうかを決定できます。あなたの場合、GroupHeader 属性が「1」に設定されている場合、次のような行に適用する CSS クラスを返すことができます。

gridview: true,
rowattr: function (rd) {
    if (rd.GroupHeader === "1") { // Adjust according to your data
        return {"class": "myAltRowClass"};
    }
}

追加の拡張機能

効率とコードベースの構成を改善するには、次の推奨事項を考慮してください。

• gridview: true を使用してください。パフォーマンスを向上させます。
• 列定義を効率化するために列テンプレートを定義します。
• myCheckboxTemplate や myTextareaTemplate などの繰り返しプロパティには変数テンプレートを使用します。

使用例

上記の推奨事項をコードに適用すると、最終的には簡素化された定義になります。

colModel: [
    {name: 'TypeID', index: 'TypeID', width: 350, hidden: true, ... },
    {name: 'Order1', index: 'Order1', template: myTextareaTemplate },
    {name: 'Order2', index: 'Order2', template: myTextareaTemplate },
    ...  // Other columns
    //If the GroupHeader is true, the row has a yellow background
    {name: 'GroupHeader', index: 'GroupHeader', width: 100, template: myCheckboxTemplate},
    {name: 'IsGroup', index: 'IsGroup', template: myCheckboxTemplate }
],
cmTemplate: {align: 'center', sortable: false, editable: true, width: 80},

これらの手法を組み込むことで、チェックボックスの値に基づいて行の強調表示を効率的に実装し、jqGrid の全体的な機能を強化できます。

以上がチェックボックスの値に基づいて jqGrid 内の行を強調表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。