チェックボックスのステータスに基づいて JqGrid 内の行を強調表示する方法は?

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

jqGrid プロジェクトでは、チェックボックスのステータスに基づいて行を強調表示することを目的としています。

Rowattr コールバック

jqGrid のバージョン 4.3.2 では、rowattr コールバックが導入され、グリッドの塗りつぶしプロセス中に行にカスタム属性を追加できるようになります。これは行の強調表示に適したアプローチです。

rowattr: function (rd) {
    if (rd.GroupHeader === "1") { // Verify this logic based on your data structure
        return {"class": "myAltRowClass"};
    }
}

強調表示用の CSS クラス

強調表示された行の背景色を設定する CSS クラス myAltRowClass を定義します。

複数選択とグリッドビュー

行を選択せず​​に行を強調表示する場合は、multiselect: true を省略します。パフォーマンスを向上させるには、gridview: true を有効にします。

列テンプレートの使用

コードを合理化するには、列テンプレートを利用できます:

cmTemplate

cmTemplate: {align: 'center', sortable: false, editable: true, width: 80}

カスタム テンプレート

よく使用されるプロパティのカスタム テンプレートを作成します:

var myCheckboxTemplate = {
    formatter: 'checkbox',
    edittype: 'checkbox',
    type: 'select',
    editoptions: {value: "1:0"}
};

var myTextareaTemplate = {
    edittype: "textarea",
    editoptions: {size: "30", maxlength: "30"}
};

最適化されたcolModel

colModel: [
    {name: 'TypeID', index: 'TypeID', width: 350, hidden: true, edittype: "select",
        editoptions: {value: getTypeID()}, editrules: { edithidden: true}},
    {name: 'Order1', index: 'Order1', template: myTextareaTemplate},
    {name: 'Order2', index: 'Order2', template: myTextareaTemplate},
    {name: 'Order3', index: 'Order3', template: myTextareaTemplate},
    {name: 'Description', index: 'Description', width: 140, template: myTextareaTemplate},
    {name: 'Notes', index: 'Notes', width: 120, template: myTextareaTemplate},
    {name: 'Measure', index: 'Measure', template: myTextareaTemplate},
    {name: 'UnitPrice', index: 'UnitPrice', width: 100, editable: false, template: myTextareaTemplate},
    {name: 'Remarks', index: 'Remarks', width: 140, template: myTextareaTemplate},
    {name: 'UnitCost', index: 'UnitCost', width: 100, template: myTextareaTemplate},
    {name: 'Service', index: 'Service', width: 120, template: myTextareaTemplate},
    //If the GroupHeader is true the row background is yellow
    {name: 'GroupHeader', index: 'GroupHeader', width: 100, template: myCheckboxTemplate},
    {name: 'IsGroup', index: 'IsGroup', template: myCheckboxTemplate}
],
cmTemplate: {align: 'center', sortable: false, editable: true, width: 80}

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