jqGridフォーム編集で依存する選択ボックスを動的に更新するにはどうすればよいですか?

jqGrid 編集ボックスでの状態の選択が正しくありません

問題:

でフォーム編集を使用する場合2 つの選択ボックス (国と州) で、州ボックスが選択した国に依存すると、レコードの編集後に間違ったオプション値が州ドロップダウンに表示されます。

説明:

editoptions プロパティの value パラメーターは、初期化中に 1 回だけ使用されます。 [州] ボックスに正しく値を入力するには、選択した国に基づいて動的に更新し、手動で再構築する必要があります。これは、選択ボックスには行 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 中国語 Web サイトの他の関連記事を参照してください。