チェックボックス列の値に基づいて jqGrid 行を強調表示する方法は?

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

jqGrid では、チェックボックス列の値に基づいて行を簡単に強調表示できます。これを実現する方法は次のとおりです。

CSS クラスを使用した行の強調表示

元の質問では、CSS クラスを使用して強調表示された行の背景色を変更すると述べました。 rowattr コールバック関数を使用すると、グリッド内のデータに基づいて CSS クラスを行に動的に追加できます。

次のコードは、rowattr コールバックの使用方法を示しています。

gridview: true,
rowattr: function (rd) {
    if (rd.GroupHeader === "1") {
        return {"class": "myAltRowClass"};
    }
}

この例では、たとえば、GroupHeader 列の値が「1」である行には、CSS クラス myAltRowClass が割り当てられます。目的の背景色を実現するには、スタイルシートでこのクラスの CSS ルールを定義する必要があります。

背景色を使用した行の強調表示

または、背景を直接設定することもできます。 cellattr コールバックを使用して、強調表示された行の色を設定します。このコールバックは、グリッド内の個々のセルの属性を変更するために使用できます。

cellattr コールバックを使用する例を次に示します。

gridview: true,
cellattr: function (rd, cell) {
    if (cell.name === "GroupHeader" && rd[cell.name] === "1") {
        return {"style": "background-color: yellow"};
    }
}

この例では、セルの背景色は、値が「1」の GroupHeader 列は黄色に設定されます。

その他考慮事項

• この機能を有効にするには、必ず Gridview: true を設定してください。
• 特定の要件に応じて CSS ルールを調整する必要がある場合があります。
• 列プロパティの定義を簡素化するために、cmTemplate および template オプションの使用を検討してください。

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