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

jqGrid のチェックボックスのステータスに基づいて行を強調表示する

jqGrid を使用する場合、次の条件に基づいて行を強調表示したい場合があります。チェックボックスの状態。この機能は、選択した行を明確かつ視覚的に表現できます。

実装:

jQuery UI ThemeRoller

より単純なこのアプローチは、jQuery UI ThemeRoller を利用してチェックボックス セルのスタイルを設定することです。この方法には、チェックされた状態に基づいてセルの外観をカスタマイズすることが含まれます。これを実現するには、次の CSS をコードに追加します。

.ui-jqgrid .ui-sgfcb .ui-state-checked {
  background-color: #ffff99;
}

カスタム スタイリング

よりカスタマイズされたアプローチを希望する場合は、独自のスタイルを実装できます。 rowattr コールバックを使用します。このコールバックを使用すると、グリッド行ごとにカスタム属性を定義できるため、チェックボックスの値に基づいて行の外観を動的に変更できます。サンプル実装は次のようになります。

rowattr: function (rd) {
  if (rd.GroupHeader === "1") {
    return {"class": "highlighted-row"};
  }
}

この場合、強調表示された行クラスには、強調表示された行のカスタム スタイルが含まれます。

その他の考慮事項:

• 次の場合に予期しない動作が発生するのを防ぐために、チェックボックス列が並べ替え可能でないことを確認してください。並べ替え。
• セルクラスを使用して、データに基づいて個々のセルの外観をさらにカスタマイズすることを検討してください。
• 強調表示されたセルは視覚的に目立ち、グリッド内を移動する際のユーザー エクスペリエンスが向上します。

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