Pourquoi les valeurs de l'option de la zone de sélection d'état sont-elles incorrectes dans mon formulaire d'édition jqGrid ?

jqgrid sélection incorrecte des valeurs des options déroulantes dans la zone d'édition

Malgré la sélection correcte des valeurs du pays et de l'État dans le formulaire d'édition, les valeurs des options affichées dans la zone de sélection de l'État sont incorrects lorsque le formulaire est modifié. Ce problème persiste même lorsque vous revenez au pays du Royaume-Uni après avoir sélectionné le pays des États-Unis.

Comment résoudre les valeurs d'option incorrectes dans la zone de sélection de l'État

Pour résoudre ce problème, il est nécessaire de résoudre correctement remplissez la zone de sélection État en fonction de la valeur du pays sélectionné lors du chargement du formulaire de modification. L'approche consiste à :

1. Remplir les valeurs de l'État en fonction de la sélection du pays dans la fonction dataInit.
2. Reconstruire la boîte de sélection de l'État si le pays est modifié.

Solution de code

<code class="javascript">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 &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: "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();
              }
          });</code>

Notes

• La méthode grid.setColProp(...) est utilisée pour définir les propriétés de la colonne.
• Le dataInit La fonction est utilisée pour initialiser la zone de sélection et la remplir avec des options.
• Le tableau dataEvents est utilisé pour attacher des gestionnaires d'événements à la zone de sélection.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!