Wie fülle ich das Dropdown-Menü „Bundesstaat' mit den richtigen Optionen basierend auf dem ausgewählten Land, wenn ich ein Bearbeitungsformular in jqGrid lade?

Der Wert der Dropdown-Option im Bearbeitungsfeld von jqgrid ist falsch

Beim Bearbeiten des Formulars müssen Sie zwei Dropdown-Felder im verwenden bilden. Das erste Dropdown-Feld wählt das Land aus und das zweite Dropdown-Feld wählt den Staat aus, zu dem das entsprechende Land gehört. Der Optionswert im Dropdown-Feld „Land“ entspricht der ID des Landes, während sich der Optionswert im Dropdown-Feld „Bundesstaat“ auf die ID des Landes bezieht. Zum Beispiel:

Land:

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

US-Bundesstaat:

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

UK-Bundesstaat:

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

Es ist ersichtlich, dass der Optionswert des Staates, zu dem das Vereinigte Königreich gehört, bei 5 beginnt. Wenn der Bearbeitungsdatensatz die Länder-ID=2 (UK) und die Bundesstaats-ID=6 (Oxford) enthält, wird das Bearbeitungsformular korrekt angezeigt – das Land ist Großbritannien und der Bundesstaat Oxford. Wenn ich jedoch das Status-Dropdown-Feld erweitere, sehe ich, dass der Optionstext korrekt ist (London und Oxford werden angezeigt), aber die Optionswerte beginnen bei 0. Das richtige Ergebnis sollte sein, dass der Optionswert bei 5 beginnt.

Wenn Sie das Länder-Dropdown-Menü auswählen und in die Vereinigten Staaten ändern und es dann wieder in das Vereinigte Königreich ändern, werden die Optionswerte korrekt ausgefüllt (beginnend bei 5).

Frage: Wie füllt man beim Laden des Bearbeitungsformulars über das Bearbeitungsfeld die Optionswerte im Status-Dropdown-Feld entsprechend dem Land korrekt aus?

Antwort:

Die Antwort auf Ihre Frage hängt davon ab, wo Sie die Informationen für „US-Bundesstaaten“ und „UK-Bundesstaaten“ erhalten. jqGrid unterstützt zwei Möglichkeiten: 1) die Verwendung des value-Parameters von editoptions oder 2) die Verwendung der dataUrl- und buildSelect-Parameter von editoptions. Die erste Methode eignet sich am besten für die lokale Bearbeitung oder wenn die Liste der Optionen möglicherweise statisch ist. Die zweite Methode wird verwendet, wenn über eine AJAX-Anfrage Land-, Bundesland- und Bundesstaatsinformationen für ein Land aus der Datenbank abgerufen werden. Das folgende Beispiel demonstriert den ersten Fall der Lösung (unter Verwendung des Wertparameters):

Um Abhängigkeiten von Serverkomponenten zu vermeiden, können Sie lokale Beispiele verwenden. Der Wert wird in der dataInit-Funktion überschrieben, aber nachdem der Wert im ersten Auswahl-/Dropdown-Feld geändert wurde, muss das zweite Auswahl-/Dropdown-Feld manuell neu erstellt werden. Dazu müssen Sie verstehen, dass die ID des ausgewählten HTML-Elements aus der Tabellenzeilen-ID „_“ und dem Spaltennamen besteht: rowId „_State“. Darüber hinaus ist es wichtig, dass der Wert von editoptions auf seinen Anfangswert zurückgesetzt werden muss, um etwaige Status-IDs in Statusnamen zu dekodieren.

Beispielcode unten:

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();
              }
          });

Aktualisierung: Der obige Code wurde aktualisiert, um auch in Formularbearbeitungssituationen ordnungsgemäß zu funktionieren. Dieser Code kann nicht getestet werden, da jqGrid die lokale Bearbeitung für die Formularbearbeitung nicht unterstützt. Hoffentlich habe ich jedoch die meisten erforderlichen Änderungen vorgenommen.

Update 2: Der obige Code wurde erweitert, um Folgendes zu unterstützen:

1. Inline-Bearbeitung, Formularbearbeitung, Suchsymbolleiste und erweiterte Suche
2. Vorherige oder nächste Navigationsschaltflächen in Bearbeitungsformularen
3. Verbesserte Auswahl in verschiedenen Browsern Tastaturunterstützung (behebt ein Problem mit der Aktualisierungsauswahlabhängigkeit). in einigen Browsern)

Die neueste Version der Demo kann [hier](http://www.trirand.com/blog/ jqgrid/jqgridfromformwithdependseditboxes.html) gefunden werden.

Der folgende modifizierte Democode:

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

Das obige ist der detaillierte Inhalt vonWie fülle ich das Dropdown-Menü „Bundesstaat' mit den richtigen Optionen basierend auf dem ausgewählten Land, wenn ich ein Bearbeitungsformular in jqGrid lade?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!