Composants pour les options

Au lieu d'utiliser l'ID dans l'URL, vous pouvez préférer créer un filtrage en utilisant un composant spécial Select avec la possibilité de sélectionner un pays dans la liste. Auparavant, nous avons déjà utilisé le composant Relselect et la logique de son fonctionnement est très similaire, mais grâce au composant Selectnous pouvons non seulement proposer un choix parmi tous les pays disponibles, mais aussi ajouter nos propres options.

Select composant

Examinons le paramètre Select le choix qui déterminera quelles villes de quels pays doivent être dans le tableau, et la possibilité de montrer toutes les villes disponibles, en général, a été ajoutée.

Lors de la création d'un Select il faut le remplir avec les options à partir desquelles la sélection sera faite. Pour ce faire, comme dans Relselectvous devez obtenir une liste générale de pays. Mais alors on n'envoie pas cette liste à Select directement mais on la convertit en options disponibles, chacune d'entre elles étant représentée comme un Select Option modèle. Par conséquent, nous déclarons le tableau Select Options comme une variable et le remplissons avec les données nécessaires dans une boucle.

Dans cet exemple, les champs essentiels Select Options essentiels pour nous seront Label (le texte de l'option proposée) et Value (son identifiant numérique). Définissez ces valeurs comme le nom du pays et son identifiant.

Lorsque la boucle est terminée, nous devons créer et ajouter une autre option qui affichera toutes les villes disponibles sans filtrer par pays. Définissons Label = World et Value = 0.

Lorsque vous sélectionnez une option, le déclencheur Select onChange se déclenchera. Utilisons-le pour connaître l'option sélectionnée et l'écrire dans la nouvelle variable globale Country selected. Dans ce cas, il est nécessaire de faire une vérification supplémentaire, et si la dernière option (toutes les villes disponibles) a été sélectionnée, alors la valeur de cette variable doit être définie comme vide (null).

La dernière action de ce processus de gestion consiste à cliquer sur le bouton Refresh qui rafraîchit les données dans le tableau. Son processus de gestion doit également être légèrement modifié pour tenir compte de l'apparition d'une nouvelle variable.

Maintenant nous pouvons choisir quelles villes de quel pays doivent être montrées dans le tableau.

Dropdown composant

Et enfin, examinons un autre composant qui vous permet de choisir différentes options -. Dropdown. Sa principale différence est que la sélection d'une option particulière doit immédiatement déclencher une action, au lieu de simplement se souvenir de l'option sélectionnée. On peut l'appeler un bouton avec une fonctionnalité étendue.

Par exemple, utilisons Dropdown pour remplacer le bouton "Supprimer le pays" dans le tableau. Désormais, il ne supprimera pas immédiatement l'entrée dans la base de données mais appellera des options supplémentaires où vous pourrez soit confirmer la suppression, soit l'annuler.

Commençons par la configuration générale du composant. Choisissons son apparence et les options disponibles.

Ensuite, nous allons créer le processus métier lui-même. Sa première action consistera à déterminer l'enregistrement pour lequel le bouton Dropdown a été cliqué. Pour les boutons ordinaires, cette valeur est transmise sous la forme d'une valeur Record IDmais dans ce cas, ce n'est pas le bouton Dropdown lui-même ne sera pas pressé, mais son composant enfant avec l'option désirée. Par conséquent, l'obtention de l'ID de l'entrée est un peu plus compliquée.

Pour les éléments de tableau répétitifs, l'élément Component ID se compose de deux parties, séparées par un signe "-". La première partie est l'ID du composant standard. Mais la seconde partie n'est que l'ID de l'enregistrement, dont l'ajout rend l'identifiant des composants répétitifs unique.

Sachant cela, il nous suffit de récupérer cet ID. Par conséquent, nous allons diviser la chaîne de caractères en plusieurs parties (Split string) et trouver la valeur de la deuxième partie (index = 1)

L'étape suivante consiste à déterminer quelle option a été sélectionnée.

S'il s'agit bien d'une option permettant de confirmer la suppression, alors exécutez la commande appropriée. Sinon, vous ne pouvez rien faire car une action n'est pas requise.

Désormais, la suppression d'enregistrements de la base de données est protégée contre les clics accidentels.