Bagaimana untuk mengisi lungsur negeri dengan pilihan yang betul berdasarkan negara yang dipilih semasa memuatkan borang edit dalam jqGrid?

Nilai pilihan lungsur turun dalam kotak edit jqgrid adalah salah

Apabila mengedit borang, anda perlu menggunakan dua kotak lungsur dalam bentuk. Kotak lungsur pertama memilih negara, dan kotak lungsur kedua memilih keadaan negara yang sepadan. Nilai pilihan dalam kotak drop-down negara adalah bersamaan dengan id negara, manakala nilai pilihan dalam kotak drop-down negeri berkaitan dengan id negara. Contohnya:

Negara:

美国 (选项值=1)
英国 (选项值=2)

Negeri AS:

阿拉巴马州 (选项值=1)
加利福尼亚州 (选项值=2)
佛罗里达州 (选项值=3)
夏威夷州 (选项值=4)

Negeri UK :

伦敦 (选项值=5)
牛津 (选项值=6)

Dapat dilihat bahawa nilai opsyen bagi negeri yang dimiliki United Kingdom bermula dari 5. Apabila rekod suntingan mengandungi id negara=2 (UK) dan id negeri=6 (Oxford), borang edit dipaparkan dengan betul - negara itu ialah UK dan negeri itu ialah Oxford. Walau bagaimanapun, jika saya mengembangkan kotak dropdown status, saya melihat bahawa teks pilihan adalah betul (London dan Oxford ditunjukkan), tetapi nilai pilihan bermula pada 0. Keputusan yang betul ialah nilai pilihan bermula dari 5.

Jika anda memilih dan menukar menu lungsur negara ke Amerika Syarikat, kemudian menukarnya kembali ke United Kingdom, nilai pilihan akan diisi dengan betul (bermula pada 5).

Soalan: Apabila memuatkan borang edit menggunakan kotak edit, bagaimana untuk mengisi nilai pilihan dengan betul dalam kotak drop-down status mengikut negara?

Jawapan:

Jawapan kepada soalan anda bergantung pada tempat anda mendapat maklumat untuk "negeri AS" dan "negeri UK". jqGrid menyokong dua kemungkinan: 1) menggunakan parameter nilai editoptions, atau 2) menggunakan dataUrl dan buildSelect parameter editoptions. Kaedah pertama paling sesuai untuk penyuntingan tempatan atau di mana senarai pilihan mungkin statik. Kaedah kedua digunakan apabila mendapatkan maklumat negara, negeri dan negeri untuk sesebuah negara daripada pangkalan data melalui permintaan AJAX. Contoh berikut menunjukkan kes pertama penyelesaian (menggunakan parameter nilai):

Untuk mengelakkan kebergantungan pada komponen pelayan, anda boleh menggunakan contoh setempat. Nilai ditimpa dalam fungsi dataInit, tetapi selepas menukar nilai dalam kotak pilih/drop-down pertama, kotak pilih/drop-down kedua perlu dibina semula secara manual. Untuk melakukan ini, anda perlu memahami bahawa id elemen HTML pilih terdiri daripada id baris jadual '_' dan nama lajur: rowId "_State". Selain itu, adalah penting bahawa nilai pilihan edit mesti ditetapkan semula kepada nilai awalnya untuk menyahkod sebarang id keadaan kepada nama negeri.

Contoh kod di bawah:

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) {
                            // 为了能够保存当前选择的查看结果，列属性值至少应该包含
                            // 当前选定的状态。因此，我们必须将列属性重置为以下值
                            //grid.setColProp('State', { editoptions:{value: statesOfCountry[v]} });
                            //grid.setColProp('State', { editoptions: { value: states} });
                            resetStatesValues();

                            // 根据选定的国家值创建状态选项
                            var v = parseInt($(e.target).val(), 10);
                            var sc = statesOfCountry[v];
                            var newOptions = '';
                            for (var stateId in sc) {
                                if (sc.hasOwnProperty(stateId)) {
                                    newOptions += '<option role="option" value="' +
                                                  stateId + '">' +
                                                  states[stateId] + '</option>';
                                }
                            }

                            // 填充新值到 select/drop-down
                            if ($(e.target).is('.FormElement')) {
                                // 表单编辑
                                var form = $(e.target).closest('form.FormGrid');
                                $("select#State.FormElement", form[0]).html(newOptions);
                            } else {
                                // 内联编辑
                                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) {
        if (id &amp;&amp; id !== lastSel) {
            if (lastSel != -1) {
                resetStatesValues();
                grid.restoreRow(lastSel);
            }
            lastSel = id;
        }
    },
    ondblClickRow: function (id, ri, ci) {
        if (id &amp;&amp; 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: "使用依赖 select/drop-down 列表（双击编辑）"
}).jqGrid('navGrid','#pager', 
          { edit: true, add: true, del: false, search: false, refresh: false },
          { // 编辑选项
              recreateForm:true,
              onClose:function() {
                  resetStatesValues();
              }
          },
          { // 添加选项
              recreateForm:true,
              onClose:function() {
                  resetStatesValues();
              }
          });

Kemas kini: Kod di atas telah dikemas kini untuk berfungsi dengan betul dalam situasi pengeditan borang juga. Kod ini tidak boleh diuji kerana jqGrid tidak menyokong penyuntingan tempatan untuk penyuntingan borang. Mudah-mudahan saya telah membuat kebanyakan perubahan yang diperlukan.

Kemas kini 2: Kod di atas telah diperluaskan untuk menyokong:

1. Pengeditan sebaris, pengeditan borang, bar alat carian dan carian lanjutan
2. Butang navigasi sebelumnya atau seterusnya dalam borang edit
3. Pilihan yang lebih baik dalam pelayar berbeza Sokongan papan kekunci (membetulkan pergantungan muat semula pilih dalam beberapa pelayar isu)

Versi demo terkini boleh didapati [di sini](http://www.trirand.com/blog/jqgrid/jqgridfromformwithdependseditboxes.html).

Kod demo yang diubah suai berikut:

美国 (选项值=1)
英国 (选项值=2)

Atas ialah kandungan terperinci Bagaimana untuk mengisi lungsur negeri dengan pilihan yang betul berdasarkan negara yang dipilih semasa memuatkan borang edit dalam jqGrid?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!