Abhängige Auswahlfeldoptionen im jqGrid-Bearbeitungsformular

jqGrid ermöglicht Ihnen die Erstellung dynamischer Auswahlfelder zum Bearbeiten von Formularen, wobei die Optionen von der Formularbearbeitung abhängen Auswahl, die in einem zugehörigen Auswahlfeld getroffen wurde. Dies ist nützlich für Szenarien wie die Auswahl eines Landes und das entsprechende Ausfüllen der Bundesstaatenoptionen.

Problem: Falsche Optionswerte

Bei der Bearbeitung eines Datensatzes mit a tritt jedoch ein Problem auf Dynamisch gefülltes Statusauswahlfeld. Die Optionswerte des Statusauswahlfelds beginnen bei 0 statt beim erwarteten Wert von 5.

Lösung: Bearbeitungsoptionen zurücksetzen und manuell neu erstellen

Um dieses Problem zu beheben, muss der Der Schlüssel besteht darin, zu verstehen, dass jqGrid Editoptions bei der Initialisierung nur einmal verwendet. Um das Auswahlfeld für den Bundesstaat basierend auf dem ausgewählten Land korrekt auszufüllen, müssen die Bearbeitungsoptionen zurückgesetzt und das Auswahlfeld manuell neu erstellt werden.

So wird die Lösung implementiert:

1. Bearbeitungsoptionen zurücksetzen:

   • Setzen Sie beim Laden der Seite die Bearbeitungsoptionen für das Statusauswahlfeld auf statisch Wert.

2. Datenänderung:

   • Wenn sich das Länderauswahlfeld ändert, setzen Sie die Bearbeitungsoptionen des Statusauswahlfelds auf zurück statischer Wert.

3. Auswahl neu erstellen Feld:

   • Erstellen Sie basierend auf dem ausgewählten Land neue Optionen für das Auswahlfeld für den Bundesstaat.
   • Aktualisieren Sie für die Inline-Bearbeitung das Auswahlfeld für die bestimmte Zeile.
   • Aktualisieren Sie zum Bearbeiten des Formulars das Auswahlfeld im Bearbeitungsformular.

4. Status beibehalten Werte:

   • Nachdem Sie das Land geändert und das Auswahlfeld für den Bundesstaat neu erstellt haben, stellen Sie sicher, dass der ausgewählte Bundesstaat korrekt wiedergegeben wird, indem Sie den entsprechenden Bearbeitungsoptionswert festlegen.

Code-Snippet:

// Reset the editoptions for the state select box
var resetStatesValues = function () {
    grid.setColProp('State', { editoptions: { value: states}});
};

// Build new options for the state select box based on the selected country
var changeStateSelect = function (countryId, countryElem) {
    var sc = statesOfCountry[countryId];
    var newOptions = 'All'; // If needed
    for (stateId in sc) { newOptions  = ''   states[stateId]   ''; }
    grid.setColProp('State', { editoptions: { value: statesOfCountry[countryId]} });
    if ($(countryElem).is('.FormElement')) {
        // Form editing
        $(countryElem).closest('form.FormGrid').find("select#state.FormElement").html(newOptions);
    } else {
        // Inline editing
        var row = $(countryElem).closest('tr.jqgrow');
        var rowId = row.attr('id');
        $("select#"   rowId   "_State", row[0]).html(newOptions);
    }
};

Fazit

Durch Zurücksetzen der Bearbeitungsoptionen, manuelles Neuerstellen des Statusauswahlfelds und Beibehalten des ausgewählten Statuswerts können Sie sicherstellen, dass das Bearbeitungsformular in jqGrid angezeigt wird die richtigen Optionswerte für abhängige Auswahlfelder.