Componenti per le opzioni

Invece di usare l'ID nell'URL, si potrebbe preferire creare un filtro usando il componente speciale Select con la possibilità di selezionare un paese dall'elenco. In precedenza, abbiamo già utilizzato il componente Relselect e la logica del suo funzionamento è molto simile, ma grazie al componente Selectpossiamo non solo offrire una scelta tra tutti i Paesi disponibili, ma anche aggiungere le nostre opzioni.

Select componente

Vediamo l'impostazione Select è stata aggiunta l'impostazione che determina quali città di quali Paesi devono essere presenti nella tabella e la possibilità di mostrare tutte le città disponibili, in generale.

Quando si crea un Select deve essere riempito con le opzioni da cui verrà effettuata la selezione. Per farlo, come in Relselectè necessario ottenere un elenco generale di paesi. Ma poi non si invia questo elenco a Select direttamente, ma lo convertiamo in opzioni disponibili, ognuna delle quali è rappresentata come un Select Option modello. Pertanto, dichiariamo l'array Select Options come variabile e la riempiamo con i dati necessari in un ciclo.

In questo esempio, i campi essenziali Select Options per noi saranno Label (il testo dell'opzione proposta) e Value (il suo identificatore numerico). Impostare questi valori sul nome del Paese e sul suo ID.

Una volta completato il ciclo, dovremo creare e aggiungere un'altra opzione che mostrerà tutte le città disponibili senza filtrare per paese. Impostiamo Label = World e Value = 0.

Quando si seleziona una qualsiasi opzione, il trigger Select onChange si attiverà. Usiamolo per scoprire l'opzione selezionata e scriviamola nella nuova variabile globale Country selected. In questo caso, è necessario fare un ulteriore controllo e se l'ultima opzione (tutte le città disponibili) è stata selezionata, allora il valore di questa variabile deve essere impostato a vuoto (null).

L'ultima azione di questo processo aziendale consiste nel fare clic sul pulsante Refresh che aggiorna i dati della tabella. Anche il suo processo aziendale deve essere leggermente modificato per tenere conto della comparsa di una nuova variabile.

Ora possiamo scegliere quali città di quale paese devono essere mostrate nella tabella.

Dropdown componente

Infine, analizziamo un altro componente che consente di scegliere diverse opzioni - . Dropdown. La sua differenza fondamentale è che la selezione di una particolare opzione deve attivare immediatamente un'azione, anziché limitarsi a ricordare l'opzione selezionata. Può essere chiamato pulsante con funzionalità estese.

Ad esempio, utilizziamo Dropdown come sostituto del pulsante Elimina paese nella tabella. Ora non cancellerà immediatamente la voce nel database, ma richiamerà ulteriori opzioni in cui è possibile confermare la cancellazione o annullarla.

Cominciamo con la configurazione generale del componente. Scegliamo il suo aspetto e le opzioni disponibili.

Successivamente, creeremo il processo aziendale stesso. La prima azione sarà quella di determinare il record per il quale è stato cliccato il tasto Dropdown è stato cliccato. Per i pulsanti ordinari, questo valore viene passato come un valore Record IDma in questo caso, non sarà premuto nemmeno il pulsante Dropdown sarà premuto, ma il suo componente figlio con l'opzione desiderata. Pertanto, ottenere l'ID della voce è un po' più complicato.

Per gli elementi di tabella ripetuti, l'elemento Component ID è composto da due parti, separate dal segno "-". La prima parte è l'ID standard del componente. Ma la seconda parte è solo l'ID del record, la cui aggiunta rende unico l'identificatore dei componenti ripetuti.

Sapendo questo, dobbiamo solo ottenere questo ID. Pertanto, divideremo la stringa in parti (Split string) e scopriremo il valore della seconda parte (index = 1)

Come passo successivo, dobbiamo scoprire quale opzione è stata selezionata.

Se si tratta di un'opzione per confermare l'eliminazione, eseguire il comando appropriato. In caso contrario, non si può fare nulla perché un'azione non è richiesta.

Ora l'eliminazione dei record dal database è protetta da clic accidentali.