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 :
Réinitialiser les options d'édition :
Modification des données :
Reconstruire la zone de sélection :
Maintenir les valeurs d'état :
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!