如何在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中文网其他相关文章！