jqGrid 編輯表單中的相關選擇框選項

jqGrid 可讓您建立編輯表單的動態選擇框，其中選項取決於在相關選擇框中進行的選擇。這對於選擇國家/地區並相應填充州選項等場景很有用。

問題：選項值不正確

但是，使用動態填滿的狀態選擇框。狀態選擇框的選項值從 0 開始，而不是預期的 5。

解決方案：重置 Editoptions 和手動重建

要解決此問題，關鍵是要了解 jqGrid 在初始化時僅使用一次 editoptions 。若要根據所選國家/地區正確填入州選擇框，必須重設編輯選項並手動重新建立選擇框。

解決方案的實施方式如下：

1. 重置編輯選項：

   • 頁面載入時，將狀態選擇框的編輯選項設定為靜態value.

2. 資料變更：

   • 當國家選擇框變更時，將狀態選擇框編輯選項重設為靜態值。

3. 重建選擇Box:

   • 根據所選國家/地區，為州選擇框建立新選項。
   • 對於內嵌編輯，更新特定行的選擇框。
   • 對於表單編輯，更新編輯表單中的選擇框。

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);
    }
};

結論

透過重置editoptions，手動重建狀態選擇框，維護選取的狀態值，可以確保jqGrid中的編輯表單顯示相關選擇框的正確選項值。