Heim > Web-Frontend > js-Tutorial > Wie aktualisiere ich abhängige Auswahlfelder in der jqGrid-Formularbearbeitung dynamisch?

Wie aktualisiere ich abhängige Auswahlfelder in der jqGrid-Formularbearbeitung dynamisch?

Susan Sarandon
Freigeben: 2024-10-30 18:25:02
Original
688 Leute haben es durchsucht

How to dynamically update dependent select boxes in jqGrid form editing?

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 &amp;&amp; id !== lastSel) {
            if (lastSel != -1) {
                resetStatesValues();
                grid.restoreRow(lastSel);
            }
            lastSel = id;
        }
    },
    ondblClickRow: function (id) {
        // Handler for double-click editing
        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: "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();
               }
           });
Nach dem Login kopieren

Dieses Skript erweitert die ursprüngliche Lösung um Folgendes zu unterstützen:

  • Inline- und Formularbearbeitung
  • Suchsymbolleiste und erweiterte Suche
  • Erweiterte Tastaturunterstützung für wählt aus

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage