如何在jqGrid表單編輯中動態更新依賴選擇框？

jqGrid 編輯框中的狀態選擇不正確

問題：

使用表單編輯時兩個選擇框（國家和州），其中州框取決於所選國家，編輯記錄後，州下拉清單中會出現不正確的選項值。

說明：

editoptions屬性的value參數在初始化時只使用一次。要正確填滿“州”框，必須根據所選國家/地區動態更新它，然後手動重建。這是因為選擇框有一個由行 ID 和列名稱建構的 ID。

解決方案：

在實例中提供了全面的解決方案：

var countries = { '1': 'US', '2': 'UK' };
var states = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii', '5': 'London', '6': 'Oxford' };
var statesOfCountry = {
    1: { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii' },
    2: { '5': 'London', '6': 'Oxford' }
};
var mydata = [
    { id: '0', Country: '1', State: '1', Name: "Louise Fletcher" },
    { id: '1', Country: '1', State: '3', Name: "Jim Morrison" },
    { id: '2', Country: '2', State: '5', Name: "Sherlock Holmes" },
    { id: '3', Country: '2', State: '6', Name: "Oscar Wilde" }
];

var lastSel = -1;
var grid = jQuery("#list");
var resetStatesValues = function () {
    grid.setColProp('State', { editoptions: { value: states} });
};
grid.jqGrid({
    data: mydata,
    datatype: 'local',
    colModel: [
        { name: 'Name', width: 200 },
        { name: 'Country', width: 100, editable: true, formatter: 'select',
            edittype: 'select', editoptions: {
                value: countries,
                dataInit: function (elem) {
                    var v = $(elem).val();
                    grid.setColProp('State', { editoptions: { value: statesOfCountry[v]} });
                },
                dataEvents: [
                    {
                        type: 'change',
                        fn: function(e) {
                            // Update 'State' options based on the selected 'Country' value
                            var v = parseInt($(e.target).val(), 10);
                            var sc = statesOfCountry[v];
                            var newOptions = '';
                            for (var stateId in sc) {
                                newOptions += '<option role="option" value="' +
                                                   stateId + '">' +
                                                   states[stateId] + '</option>';
                            }

                            // Populate the new options
                            if ($(e.target).is('.FormElement')) {
                                // Form editing
                                var form = $(e.target).closest('form.FormGrid');
                                $("select#State.FormElement", form[0]).html(newOptions);
                            } else {
                                // Inline editing
                                var row = $(e.target).closest('tr.jqgrow');
                                var rowId = row.attr('id');
                                $("select#" + rowId + "_State", row[0]).html(newOptions);
                            }
                        }
                    }
                ]
            }
        },
        {
            name: 'State', width: 100, editable: true, formatter: 'select',
            edittype: 'select', editoptions: { value: states }
        }
    ],
    onSelectRow: function (id) {
        // Handler to maintain row selection and reset 'State' values
        if (id && id !== lastSel) {
            if (lastSel != -1) {
                resetStatesValues();
                grid.restoreRow(lastSel);
            }
            lastSel = id;
        }
    },
    ondblClickRow: function (id) {
        // Handler for double-click editing
        if (id && id !== lastSel) {
            grid.restoreRow(lastSel);
            lastSel = id;
        }
        resetStatesValues();
        grid.editRow(id, true, null, null, 'clientArray', null,
                         function (rowid, response) {  // aftersavefunc
                            grid.setColProp('State', { editoptions: { value: states} });
                         });
        return;
    },
    editurl: 'clientArray',
    sortname: 'Name',
    height: '100%',
    viewrecords: true,
    rownumbers: true,
    sortorder: "desc",
    pager: '#pager',
    caption: "Demonstrate dependend select/dropdown lists (edit on double-click)"
}).jqGrid('navGrid','#pager', 
           { edit: true, add: true, del: false, search: false, refresh: false },
           { // edit options
               recreateForm:true,
               onClose:function() {
                   resetStatesValues();
               }
           },
           { // add options
               recreateForm:true,
               onClose:function() {
                   resetStatesValues();
               }
           });

此腳本擴展了原始解決方案以支援：

• 內聯和表單編輯
• 搜尋工具列和進階搜尋
• 增強的鍵盤支援選擇

以上是如何在jqGrid表單編輯中動態更新依賴選擇框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！