Pemilihan Negeri Salah dalam Kotak Edit jqGrid
Masalah:
Apabila menggunakan penyuntingan borang dengan dua kotak pilihan (Negara dan Negeri), di mana kotak Negeri bergantung pada Negara yang dipilih, nilai pilihan yang salah muncul dalam menu lungsur Negeri selepas mengedit rekod.
Penjelasan:
Parameter nilai bagi sifat editoptions hanya digunakan sekali semasa permulaan. Untuk mengisi kotak Negeri dengan betul, ia mesti dikemas kini secara dinamik berdasarkan Negara yang dipilih dan kemudian dibina semula secara manual. Ini kerana kotak pilihan mempunyai ID yang dibina daripada ID baris dan nama lajur.
Penyelesaian:
Penyelesaian komprehensif dibentangkan dalam contoh langsung:
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(); } });
Skrip ini memanjangkan penyelesaian asal untuk menyokong:
Atas ialah kandungan terperinci Bagaimana untuk mengemas kini kotak pilihan bergantung secara dinamik dalam pengeditan borang jqGrid?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!