Comment remplir la liste déroulante des États avec les options correctes en fonction du pays sélectionné lors du chargement d'un formulaire d'édition dans jqGrid ?

La valeur de l'option déroulante dans la zone d'édition de jqgrid est incorrecte

Lors de la modification du formulaire, vous devez utiliser deux zones déroulantes dans la formulaire. La première liste déroulante sélectionne le pays et la deuxième liste déroulante sélectionne l'État auquel appartient le pays correspondant. La valeur de l'option dans la liste déroulante Pays est équivalente à l'identifiant du pays, tandis que la valeur de l'option dans la liste déroulante État est liée à l'identifiant du pays. Par exemple :

Pays :

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

État américain :

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

État britannique :

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

On constate que la valeur d'option de l'État auquel appartient le Royaume-Uni commence à partir de 5. Lorsque l'enregistrement de modification contient l'identifiant du pays = 2 (Royaume-Uni) et l'identifiant de l'État = 6 (Oxford), le formulaire de modification s'affiche correctement : le pays est le Royaume-Uni et l'état est Oxford. Cependant, si je développe la liste déroulante d'état, je vois que le texte de l'option est correct (Londres et Oxford sont affichés), mais les valeurs des options commencent à 0. Le résultat correct devrait être que la valeur de l'option commence à 5.

Si vous sélectionnez et modifiez la liste déroulante des pays vers les États-Unis, puis la redéfinissez sur le Royaume-Uni, les valeurs des options seront renseignées correctement (à partir de 5).

Question : Lors du chargement du formulaire d'édition à l'aide de la zone d'édition, comment renseigner correctement les valeurs des options dans la liste déroulante statut en fonction du pays ?

Réponse :

La réponse à votre question dépend de l'endroit où vous obtenez les informations sur les « États américains » et les « États britanniques ». jqGrid prend en charge deux possibilités : 1) en utilisant le paramètre value de editoptions, ou 2) en utilisant les paramètres dataUrl et buildSelect de editoptions. La première méthode est la mieux adaptée à l'édition locale ou lorsque la liste d'options peut être statique. La deuxième méthode est utilisée lors de l'obtention d'informations sur le pays, l'état et l'état d'un pays à partir de la base de données via une requête AJAX. L'exemple suivant illustre le premier cas de solution (en utilisant le paramètre value) :

Pour éviter les dépendances sur les composants du serveur, vous pouvez utiliser des exemples locaux. La valeur est écrasée dans la fonction dataInit, mais après avoir modifié la valeur dans la première zone de sélection/liste déroulante, la deuxième zone de sélection/liste déroulante doit être reconstruite manuellement. Pour ce faire, vous devez comprendre que l'identifiant de l'élément HTML select se compose de l'identifiant de ligne du tableau '_' et du nom de la colonne : rowId "_State". De plus, il est important que la valeur de editoptions soit réinitialisée à sa valeur initiale afin de décoder les identifiants d'état en noms d'état.

Exemple de code ci-dessous :

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

Mise à jour : Le code ci-dessus a été mis à jour pour fonctionner également correctement dans les situations d'édition de formulaire. Ce code ne peut pas être testé car jqGrid ne prend pas en charge l'édition locale pour l'édition de formulaire. J'espère cependant avoir apporté la plupart des changements nécessaires.

Mise à jour 2 : Le code ci-dessus a été étendu pour prendre en charge :

1. Édition en ligne, édition de formulaire, barre d'outils de recherche et recherche avancée
2. Boutons de navigation précédent ou suivant dans les formulaires d'édition
3. Sélection améliorée dans différents navigateurs Prise en charge du clavier (corrige la sélection de dépendance d'actualisation dans certains navigateurs problèmes)

La dernière version de la démo peut être trouvée [ici](http://www.trirand.com/blog/jqgrid/jqgridfromformwithdependseditboxes.html).

Le code de démonstration modifié suivant :

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

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!