Comment corriger les valeurs d'option incorrectes dans les zones de sélection dépendantes de jqGrid pendant l'édition ?

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 zone 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 mise en œuvre :

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.

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 à la valeur statique.

3. Reconstruire la zone de sélection :

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

4. Maintenir 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 de l'option d'édition appropriée.

Extrait de code :

<code class="javascript">// 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 = '<option value="">All</option>'; // If needed
    for (stateId in sc) { newOptions += '<option value="' + stateId + '">' + states[stateId] + '</option>'; }
    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);
    }
};</code>

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 assurez-vous que le formulaire d'édition dans jqGrid affiche les valeurs d'option correctes pour les zones de sélection dépendantes.

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!