Pourquoi le formulaire d'édition dans jqGrid affiche-t-il des valeurs d'option incorrectes dans les zones de sélection lors de la modification des enregistrements ?

Valeurs d'option de sélection déroulante incorrectes dans la zone d'édition

Lors de l'utilisation de la modification de formulaire dans jqGrid, il est possible de rencontrer des valeurs d'option incorrectes dans les zones de sélection lors de l'édition des enregistrements. Plus précisément, les valeurs peuvent commencer à 0 au lieu de la valeur de départ correcte.

Description du problème

Considérez le scénario suivant :

• Deux sélections des cases sont présentes : Pays et État.
• Les options de la boîte de sélection d'État dépendent du pays sélectionné.
• Par exemple, "Pays : États-Unis (valeur de l'option = 1)" a des options d'état avec des valeurs commençant par à partir de 1 ("Alabama : valeur d'option = 1").

Lors de la modification d'un enregistrement dont le pays est le Royaume-Uni (valeur d'option = 2) et l'état est Oxford (valeur d'option = 6), le Le formulaire de modification affichera initialement le pays et l’état corrects. Cependant, lorsque la boîte de sélection d'état est ouverte, les valeurs des options seront incorrectes et commenceront à partir de 0. Les valeurs d'option correctes devraient commencer à partir de 5.

Cause

Le La cause première est que la valeur des options d'édition pour les zones de sélection n'est utilisée qu'une seule fois lors de l'initialisation. Dans les cas où les options de la deuxième zone de sélection sont renseignées dynamiquement en fonction de la valeur de la première zone de sélection, il est nécessaire de mettre à jour les options de la deuxième zone de sélection manuellement.

Solution

Pour résoudre ce problème, nous suivrons ces étapes :

1. Réinitialisez les valeurs d'option initiales de la deuxième zone de sélection sur une liste statique (par exemple, tous les états disponibles).
2. Quand la valeur de la première zone de sélection change, reconstruisez les options de la deuxième zone de sélection en fonction du pays sélectionné.
3. Utilisez dataEvents pour gérer les modifications dans la première zone de sélection et déclencher la reconstruction de la deuxième zone de sélection.

Exemple de code

<code class="javascript">resetStatesValues = function () {
    grid.setColProp('State', { editoptions: { value: states} });
};
grid.jqGrid({
   // ... other configuration options
   editoptions: {
       value: countries,
       dataEvents: [
           {
               type: 'change',
               fn: function(e) {
                   resetStatesValues();

                   var countryId = $(e.target).val();
                   var sc = statesOfCountry[countryId];
                   var newOptions = '';
                   for (var stateId in sc) {
                       newOptions += '<option value="' +
                                  stateId + '">' +
                                  states[stateId] + '</option>';
                   }

                   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);
                   }
               }
           }
       ]
   }
});</code>

En mettant en œuvre ces étapes, nous garantissons que les valeurs d'option de la deuxième zone de sélection sont toujours exactes en fonction du pays sélectionné dans la première case 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!