Options de zone de sélection dépendantes dans le formulaire d'édition jqGrid

jqGrid vous permet de créer des zones de sélection dynamiques pour éditer des formulaires, où les options dépendent du sélection effectuée dans une boîte de sélection associée. Ceci est utile pour des scénarios tels que la sélection d'un pays et le remplissage des options d'état en conséquence.

Problème : valeurs d'option incorrectes

Cependant, un problème survient lors de la modification d'un enregistrement avec un zone de sélection d’état remplie dynamiquement. Les valeurs des options de la zone de sélection d'état commencent à 0 au lieu de la valeur attendue de 5.

Solution : Réinitialisation des options d'édition et reconstruction manuelle

Pour résoudre ce problème, le la clé est de comprendre que jqGrid n'utilise les options d'édition qu'une seule fois lors de l'initialisation. Pour remplir correctement la zone de sélection de l'état en fonction du pays sélectionné, les options d'édition doivent être réinitialisées et la zone de sélection reconstruite manuellement.

Voici comment la solution est implémentée :

1. Réinitialiser les options d'édition :

   • Au chargement de la page, définissez les options d'édition de la zone de sélection d'état sur une valeur statique. valeur.

2. Modification des données :

   • Lorsque la zone de sélection du pays change, réinitialisez les options d'édition de la zone de sélection de l'état sur la valeur valeur statique.

3. Reconstruire la zone de sélection :

   • En fonction de la valeur sélectionnée pays, créez de nouvelles options pour la zone de sélection de l'état.
   • Pour la modification en ligne, mettez à jour la zone de sélection pour la ligne spécifique.
   • Pour la modification du formulaire, mettez à jour la zone de sélection dans le formulaire d'édition.

4. Conserver les valeurs d'état :

   • Après avoir modifié le pays et reconstruit la zone de sélection de l'état, assurez-vous que l'état sélectionné est correctement reflété en définissant la valeur d'édition appropriée.

Extrait de code :

// Reset the editoptions for the state select box
var resetStatesValues = function () {
    grid.setColProp('State', { editoptions: { value: states}});
};

// Build new options for the state select box based on the selected country
var changeStateSelect = function (countryId, countryElem) {
    var sc = statesOfCountry[countryId];
    var newOptions = 'All'; // If needed
    for (stateId in sc) { newOptions  = ''   states[stateId]   ''; }
    grid.setColProp('State', { editoptions: { value: statesOfCountry[countryId]} });
    if ($(countryElem).is('.FormElement')) {
        // Form editing
        $(countryElem).closest('form.FormGrid').find("select#state.FormElement").html(newOptions);
    } else {
        // Inline editing
        var row = $(countryElem).closest('tr.jqgrow');
        var rowId = row.attr('id');
        $("select#"   rowId   "_State", row[0]).html(newOptions);
    }
};

Conclusion

En réinitialisant les options d'édition, en reconstruisant manuellement la zone de sélection d'état et en conservant la valeur d'état sélectionnée, vous pouvez vous assurer que le formulaire d'édition dans jqGrid affiche les valeurs d'option correctes pour les zones de sélection dépendantes.