jqgrid falsche Auswahl-Dropdown-Optionswerte im Bearbeitungsfeld

Obwohl die Länder- und Bundeslandwerte im Bearbeitungsformular korrekt ausgewählt wurden, werden die im Bundesland-Auswahlfeld angezeigten Optionswerte angezeigt sind falsch, wenn das Formular bearbeitet wird. Dieses Problem bleibt bestehen, auch wenn nach Auswahl des US-Landes wieder zum britischen Land gewechselt wird.

So beheben Sie falsche Optionswerte im Feld „Staat“

Um dieses Problem zu beheben, ist eine korrekte Eingabe erforderlich Füllen Sie das Auswahlfeld „Bundesland“ basierend auf dem ausgewählten Länderwert aus, wenn das Bearbeitungsformular geladen wird. Der Ansatz umfasst Folgendes:

1. Auffüllen der Statuswerte basierend auf der Länderauswahl in der dataInit-Funktion.
2. Neuerstellen des Statusauswahlfelds, wenn das Land geändert wird.

Code-Lösung

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 resetStatesValues = function () {
    grid.setColProp('State', { editoptions: { value: states} });
};

$("#list").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) {
                    setStateValues($(elem).val());
                },
                dataEvents: [
                    { type: 'change', fn: function (e) { changeStateSelect($(e.target).val(), e.target); } },
                    { type: 'keyup', fn: function (e) { $(e.target).trigger('change'); } }
                ]
            }
        },
        {
            name: 'State', 
            width: 100, 
            editable: true, 
            formatter: 'select',
            edittype: 'select', 
            editoptions: { value: states }
        }
    ],
    onSelectRow: function (id) {
        if (id && id !== lastSel) {
            if (lastSel != -1) {
                resetStatesValues();
                grid.restoreRow(lastSel);
            }
            lastSel = id;
        }
    },
    ondblClickRow: function (id, ri, ci) {
        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();
              }
          });

Notizen

• Die Methode „grid.setColProp(...)“ wird zum Festlegen der Spalteneigenschaften verwendet.
• Die Funktion „dataInit“ wird zum Initialisieren verwendet das Auswahlfeld und füllen Sie es mit Optionen.
• Das dataEvents-Array wird verwendet, um Ereignishandler an das Auswahlfeld anzuhängen.