Heim > Artikel > Web-Frontend > Wie aktualisiere ich abhängige Auswahlfelder in der jqGrid-Formularbearbeitung dynamisch?
Falsche Statusauswahl im jqGrid-Bearbeitungsfeld
Problem:
Bei Verwendung der Formularbearbeitung mit Wenn Sie zwei Auswahlfelder (Land und Bundesstaat) verwenden, wobei das Feld „Bundesstaat“ vom ausgewählten Land abhängt, werden nach der Bearbeitung eines Datensatzes falsche Optionswerte im Dropdown-Menü „Bundesstaat“ angezeigt.
Erklärung:
Der Wertparameter der editoptions-Eigenschaft wird während der Initialisierung nur einmal verwendet. Um das Feld „Bundesstaat“ korrekt auszufüllen, muss es basierend auf dem ausgewählten Land dynamisch aktualisiert und dann manuell neu erstellt werden. Dies liegt daran, dass die Auswahlbox eine ID hat, die aus der Zeilen-ID und dem Spaltennamen besteht.
Lösung:
Eine umfassende Lösung wird in einem Live-Beispiel vorgestellt:
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(); } });
Dieses Skript erweitert die ursprüngliche Lösung um Folgendes zu unterstützen:
Das obige ist der detaillierte Inhalt vonWie aktualisiere ich abhängige Auswahlfelder in der jqGrid-Formularbearbeitung dynamisch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!