Komponenty dla opcji

Zamiast używać ID w adresie URL można by stworzyć filtrowanie za pomocą specjalnego Select z możliwością wyboru kraju z listy. Poprzednio użyliśmy już komponentu Relselect i logika jego działania jest bardzo podobna, ale dzięki Selectmożemy nie tylko zaoferować wybór spośród wszystkich dostępnych krajów, ale także dodać własne opcje.

Select element

Spójrzmy na. Select ustawienie, wybór, który będzie określał, które miasta z jakich krajów powinny znaleźć się w tabeli, a także dodano możliwość pokazania wszystkich dostępnych miast, w ogóle.

Podczas tworzenia Select komponent, należy wypełnić go opcjami, z których będzie dokonywany wybór. Aby to zrobić, jak w np. Relselect, trzeba uzyskać ogólną listę krajów. Jednak wtedy nie wysyłamy tej listy do Select bezpośrednio, lecz przekształcamy ją w dostępne opcje, z których każda jest reprezentowana jako Select Option model. Dlatego deklarujemy Select Options tablicę jako zmienną i wypełniamy ją potrzebnymi danymi w pętli.

W tym przykładzie istotnymi Select Options pola będą dla nas następujące Label (tekst proponowanej opcji) oraz Value (jej identyfikator numeryczny). Ustaw te wartości na nazwę kraju i jego identyfikator.

Po zakończeniu pętli powinniśmy stworzyć i dodać jeszcze jedną opcję, która pokaże wszystkie dostępne miasta bez filtrowania po krajach. Ustawmy Label = World i Value = 0.

Po wybraniu którejkolwiek z opcji, wyzwalacz Select onChange zostanie odpalony wyzwalacz. Użyjmy go do poznania wybranej opcji i zapiszmy ją do nowej zmiennej globalnej Country selected. W tym przypadku konieczne jest wykonanie dodatkowego sprawdzenia i jeśli wybrana została ostatnia opcja (wszystkie dostępne miasta), to wartość tej zmiennej powinna być ustawiona na pustą (null).

Ostatnią czynnością tego procesu biznesowego jest uruchomienie kliknięcia przycisku Refresh przycisku, który odświeża dane w tabeli. Jej proces biznesowy również należy nieco zmienić, aby uwzględnić pojawienie się nowej zmiennej.

Teraz możemy wybrać, które miasta z jakiego kraju mają być pokazane w tabeli.

Dropdown komponent

I na koniec przyjrzyjmy się kolejnemu komponentowi, który pozwala na wybór różnych opcji -. Dropdown. Jego kluczową różnicą jest to, że wybranie danej opcji powinno od razu wywołać jakąś akcję, a nie tylko zapamiętać wybraną opcję. Można go nazwać przyciskiem o rozszerzonej funkcjonalności.

Na przykład użyjmy Dropdown jako zamiennik dla przycisku usuń kraj w tabeli. Teraz nie będzie on od razu usuwał wpisu w bazie, ale wywoła dodatkowe opcje, w których będzie można potwierdzić usunięcie lub je anulować.

Zacznijmy od ogólnej konfiguracji komponentu. Wybierzmy jego wygląd i dostępne opcje.

Następnie stworzymy sam proces biznesowy. A pierwszą akcją w nim będzie określenie rekordu, dla którego przycisk Dropdown został kliknięty. W przypadku zwykłych przycisków, wartość ta jest przekazywana jako. Record ID, ale w tym przypadku nie zostanie wciśnięty nawet sam przycisk Dropdown zostanie wciśnięty, ale jego komponent potomny z żądaną opcją. Dlatego też uzyskanie identyfikatora wpisu jest nieco bardziej skomplikowane.

W przypadku powtarzających się elementów tabeli, znak Component ID składa się z dwóch części, oddzielonych znakiem "-". Pierwsza część to standardowy identyfikator komponentu. Natomiast druga część to po prostu identyfikator rekordu, którego dodanie sprawia, że identyfikator powtarzających się elementów jest unikalny.

Wiedząc o tym, musimy po prostu uzyskać ten identyfikator. Dlatego podzielimy ciąg na części (Split string) i poznamy wartość drugiej części (index = 1)

W kolejnym kroku musimy dowiedzieć się, jaka opcja została wybrana.

Jeśli rzeczywiście jest to opcja potwierdzenia usunięcia, to należy uruchomić odpowiednie polecenie. W przeciwnym razie można nic nie robić, ponieważ pewne działanie nie jest wymagane.

Teraz usuwanie rekordów z bazy jest zabezpieczone przed przypadkowymi kliknięciami.