Onderdelen voor opties

In plaats van ID in de URL te gebruiken, kun je beter filteren met een speciaal Select component met de mogelijkheid om een land uit de lijst te selecteren. Eerder hebben we al het Relselect component, en de logica ervan is zeer vergelijkbaar, maar dankzij Selectkunnen we niet alleen een keuze maken uit alle beschikbare landen, maar ook onze eigen opties toevoegen.

Select component

Laten we eens kijken naar de Select instelling, de keuze die bepaalt welke steden uit welke landen in de tabel moeten komen, en de mogelijkheid om alle beschikbare steden te tonen, in het algemeen, is toegevoegd.

Bij het maken van een Select component, moet deze worden gevuld met opties waaruit de keuze zal worden gemaakt. Om dit te doen, zoals in Relselect, moet je een algemene lijst van landen krijgen. Maar dan sturen we deze lijst niet Select rechtstreeks, maar zetten we hem om in beschikbare opties, die elk worden voorgesteld als een Select Option model. Daarom declareren we de Select Options array als een variabele en vullen hem met de nodige gegevens in een lus.

In dit voorbeeld zullen de essentiële Select Options velden voor ons Label (de tekst van de voorgestelde optie) en Value (de numerieke identificatie ervan). Stel deze waarden in op de naam van het land en zijn ID.

Wanneer de lus is voltooid, moeten we nog een optie maken en toevoegen die alle beschikbare steden toont zonder te filteren op landen. We stellen Label = World en Value = 0.

Bij het selecteren van een optie zal de Select onChange trigger afgaan. Laten we het gebruiken om de geselecteerde optie te achterhalen en het naar de nieuwe globale variabele schrijven Country selected. In dit geval is het nodig een extra controle uit te voeren, en als de laatste optie (alle beschikbare steden) is geselecteerd, dan moet de waarde van deze variabele op leeg (null).

De laatste actie van dit bedrijfsproces is het klikken op de Refresh knop, die de gegevens in de tabel ververst. Het bedrijfsproces ervan moet ook enigszins worden gewijzigd om rekening te houden met het ontstaan van een nieuwe variabele.

Nu kunnen we kiezen welke steden uit welk land in de tabel getoond moeten worden.

Dropdown component

En laten we tenslotte eens kijken naar een andere component waarmee je verschillende opties kunt kiezen - . Dropdown. Het belangrijkste verschil is dat het selecteren van een bepaalde optie onmiddellijk een of andere actie in gang moet zetten in plaats van alleen de geselecteerde optie te onthouden. Het kan een knop met uitgebreide functionaliteit worden genoemd.

Laten we bijvoorbeeld Dropdown als vervanging voor de knop Land verwijderen in de tabel. Nu zal hij niet onmiddellijk de invoer in de database verwijderen, maar extra opties oproepen waar u de verwijdering kunt bevestigen of annuleren.

Laten we beginnen met de algemene configuratie van de component. We kiezen het uiterlijk en de beschikbare opties.

Vervolgens maken we het bedrijfsproces zelf. En de eerste actie daarin zal zijn het bepalen van het record waarvoor de Dropdown werd geklikt. Voor gewone knoppen wordt deze waarde doorgegeven als een Record ID, maar in dit geval zal niet eens de Dropdown zelf worden ingedrukt, maar zijn kindcomponent met de gewenste optie. Daarom is het verkrijgen van de invoer-ID een beetje ingewikkelder.

Voor herhalende tabelelementen bestaat de Component ID bestaat uit twee delen, gescheiden door een "-" teken. Het eerste deel is de standaard component ID. Maar het tweede deel is gewoon de record-ID, waarvan de toevoeging de identificatie van de herhalende componenten uniek maakt.

Dit wetende, hoeven we alleen deze ID te krijgen. Daarom splitsen we de string in delen (Split string) en achterhalen we de waarde van het tweede deel (index = 1)

Als volgende stap moeten we uitzoeken welke optie is geselecteerd.

Als dit inderdaad een optie is om de verwijdering te bevestigen, voer dan het juiste commando uit. Anders kunt u niets doen omdat een bepaalde actie niet nodig is.

Nu is het verwijderen van records uit de database beveiligd tegen per ongeluk klikken.