jqGrid 編集フォームの依存選択ボックス オプション

jqGrid を使用すると、フォームを編集するための動的選択ボックスを作成できます。オプションは、関連する選択ボックスで行われた選択。これは、国を選択し、それに応じて州のオプションを入力するようなシナリオに役立ちます。

問題: オプションの値が正しくありません

ただし、レコードを編集するときに問題が発生します。動的に設定される状態選択ボックス。状態選択ボックスのオプション値は、期待値 5 ではなく 0 から始まります。

解決策: 編集オプションのリセットと手動再構築

この問題を解決するには、重要なのは、jqGrid が初期化時に editoptions を 1 回だけ使用することを理解することです。選択した国に基づいて州選択ボックスを正しく設定するには、編集オプションをリセットし、選択ボックスを手動で再構築する必要があります。

ソリューションの実装方法は次のとおりです:

1. 編集オプションをリセット:

   • ページの読み込み時に、状態選択ボックスの編集オプションを静的な値に設定します。

2. データ変更:

   • 国選択ボックスが変更されると、州選択ボックスの編集オプションが静的な値にリセットされます。

3. ]選択ボックスを再構築:

   • 選択した国に基づいて、州選択ボックスの新しいオプションを作成します。
   • インライン編集の場合、選択ボックスを更新します。特定の行。
   • フォーム編集の場合は、編集フォームの選択ボックスを更新します。

4. 状態値の維持:

   ]
   • 国を変更して州選択ボックスを再構築した後、適切な編集オプション値を設定して、選択した州が正しく反映されていることを確認します。

]コード スニペット:

// Reset the editoptions for the state select box
var resetStatesValues = function () {
    grid.setColProp('State', { editoptions: { value: states}});
};

// Build new options for the state select box based on the selected country
var changeStateSelect = function (countryId, countryElem) {
    var sc = statesOfCountry[countryId];
    var newOptions = 'All'; // If needed
    for (stateId in sc) { newOptions  = ''   states[stateId]   ''; }
    grid.setColProp('State', { editoptions: { value: statesOfCountry[countryId]} });
    if ($(countryElem).is('.FormElement')) {
        // Form editing
        $(countryElem).closest('form.FormGrid').find("select#state.FormElement").html(newOptions);
    } else {
        // Inline editing
        var row = $(countryElem).closest('tr.jqgrow');
        var rowId = row.attr('id');
        $("select#"   rowId   "_State", row[0]).html(newOptions);
    }
};

結論

編集オプションをリセットし、状態選択ボックスを手動で再構築し、選択された状態の値を維持することで、jqGrid の編集フォームが確実に表示されるようにすることができます。依存する選択ボックスの正しいオプション値。