編集中に jqGrid に依存する選択ボックスの誤ったオプション値を修正するにはどうすればよいですか?

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

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

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

ただし、動的に設定される状態選択ボックス。状態選択ボックスのオプション値は、期待値 5 ではなく 0 から始まります。

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

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

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

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

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

2. データ変更:

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

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

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

4. 状態値の維持:

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

コード スニペット:

<code class="javascript">// 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 = '<option value="">All</option>'; // If needed
    for (stateId in sc) { newOptions += '<option value="' + stateId + '">' + states[stateId] + '</option>'; }
    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);
    }
};</code>

結論

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

以上が編集中に jqGrid に依存する選択ボックスの誤ったオプション値を修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。