チェックボックスがオンになっているときに jqGrid 行を強調表示するにはどうすればよいですか?

チェックボックスが True の場合に行を強調表示

はじめに:

Web 開発では、多くの場合、ユーザーに視覚的な手がかりを提供してユーザーをガイドすることが望ましいです。インターフェース。重要な情報を強調表示する一般的な方法の 1 つは、色やグラデーションを使用して特定の要素に注意を引くことです。データ グリッドでは、行はチェックボックスを使用して選択または変更されることがよくあります。ユーザーエクスペリエンスを向上させるには、チェックされた状態のチェックボックスがある行を強調表示すると効果的です。この記事では、jQuery と jqGrid プラグインを使用してこの効果を実現する方法について説明します。

行の強調表示の実装:

チェックボックスの値に基づいて行を強調表示するには、jqGrid バージョン 4.3 で導入された rowattr コールバックを利用できます。 .2。このコールバックにより、グリッドの塗りつぶし中に行属性を操作できるようになり、特定のデータに基づいた条件付きスタイル設定が可能になります。

次の JavaScript コードについて考えてみましょう。

rowattr: function (rd) {
  if (rd.GroupHeader === "1") { // Adjust condition as per your model
    return { "class": "myAltRowClass" };
  }
}

この例では、次の GroupHeader プロパティを確認します。行 (rd) を指定し、その値が「1」の場合は、その行にカスタム CSS クラス (myAltRowClass) を割り当てます。この CSS クラスは、強調表示された行の背景色を変更するように定義できます。

テンプレートを使用したコードの最適化:

コードを合理化するには、列テンプレートと変数を利用して共通のプロパティと変数を定義できます。行動。次の最適化を検討してください:

cmTemplate: { align: 'center', sortable: false, editable: true, width: 80 },
myCheckboxTemplate = {
  formatter: 'checkbox',
  edittype: 'checkbox',
  type: 'select',
  editoptions: { value: "1:0" }
},
myTextareaTemplate = {
  edittype: "textarea",
  editoptions: { size: "30", maxlength: "30" }
};

colModel: [
  { name: 'TypeID', index: 'TypeID', width: 350, hidden: true, edittype: "select", ... },
  { name: 'Order1', index: 'Order1', template: myTextareaTemplate },
  { name: 'Order2', index: 'Order2', template: myTextareaTemplate },
  // ... Additional columns omitted for brevity
  { name: 'GroupHeader', index: 'GroupHeader', width: 100, template: myCheckboxTemplate },
  { name: 'IsGroup', index: 'IsGroup', template: myCheckboxTemplate }
],

テンプレートと変数を利用することで、コードはより簡潔になり、保守しやすくなります。

結論:

を使用してチェックボックスの値に基づく行の強調表示を組み込みます。 jqGrid の rowattr コールバックは、ユーザー エクスペリエンスを向上させるだけでなく、プラグインの柔軟性と効率性も示します。この手法を列テンプレートと組み合わせることで、特定の要件を満たすエレガントで適切に構造化されたデータ グリッドを作成できます。

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