Curso de Crash 101
10 Módulos
5 Semanas

Componentes para opções

Clique para copiar

Componentes para a escolha de várias opções em aplicações web


Em vez de usar o ID no URL, pode preferir criar filtragem usando Select componente com a capacidade de seleccionar um país da lista. Anteriormente, já tínhamos utilizado o Relselect e a lógica do seu trabalho é muito semelhante, mas graças a Selectpodemos não só oferecer uma escolha de todos os países disponíveis, mas também acrescentar as nossas próprias opções.

Select componente

Vejamos o Select a escolha que irá determinar quais as cidades de que países devem constar da tabela, e a capacidade de mostrar todas as cidades disponíveis, em geral, foi acrescentada.


Ao criar um Select componente, deve ser preenchida com opções a partir das quais a selecção será feita. Para o fazer, como em Relselecté necessário obter uma lista geral de países. Mas depois não enviamos esta lista para Select directamente, mas convertê-lo em opções disponíveis, cada uma das quais é representada como Select Option modelo. Por conseguinte, declaramos o Select Options como uma variável e preenchê-la com os dados necessários num laço.


Neste exemplo, o essencial Select Options campos para nós serão Label (o texto da opção proposta) e Value (o seu identificador numérico). Fixar estes valores com o nome do país e o seu ID.

Quando o laço estiver completo, devemos criar e adicionar mais uma opção que mostrará todas as cidades disponíveis sem filtragem por países. Vamos definir Label = World e Value = 0.

Quando selecciona qualquer opção, a Select onChange gatilho irá disparar. Vamos usá-la para descobrir a opção seleccionada e escrevê-la na nova variável global Country selected. Neste caso, é necessário fazer uma verificação adicional, e se a última opção (todas as cidades disponíveis) foi seleccionada, então o valor desta variável deve ser definido para vazio (null).

A última acção deste processo comercial é começar a clicar no Refresh o que actualiza os dados na tabela. O seu processo empresarial também precisa de ser ligeiramente alterado para ter em conta o aparecimento de uma nova variável.


Agora podemos escolher que cidades de que país devem ser mostradas na tabela.


E finalmente, vejamos outro componente que lhe permite escolher diferentes opções - Dropdown. A sua principal diferença é que a selecção de uma determinada opção deve desencadear imediatamente alguma acção em vez de apenas recordar a opção seleccionada. Pode chamar-se um botão com funcionalidade alargada.

Por exemplo, vamos utilizar Dropdown como um substituto para o botão apagar país na tabela. Agora não eliminará imediatamente a entrada na base de dados, mas chamará opções adicionais onde poderá confirmar a eliminação ou cancelá-la.

Comecemos com a configuração geral do componente. Vamos escolher a sua aparência e as opções disponíveis.


A seguir, criaremos o próprio processo de negócio. E a primeira acção nele será determinar o registo para o qual o Dropdown foi clicado. Para botões normais, este valor é passado como um Record IDmas, neste caso, nem sequer o Dropdown será pressionada, mas a sua componente infantil com a opção desejada. Portanto, obter o ID de entrada é um pouco mais complicado.

Para a repetição de elementos da tabela, o Component ID consiste em duas partes, separadas por um sinal "-". A primeira parte é o ID do componente padrão. Mas a segunda parte é apenas o ID do registo, cuja adição torna único o identificador dos componentes que se repetem.

Sabendo isto, só temos de obter este ID. Por conseguinte, vamos dividir a cadeia em partes (Split string) e descubra o valor da segunda parte (index = 1)


Como passo seguinte, precisamos de descobrir qual a opção seleccionada.


Se esta for de facto uma opção para confirmar a eliminação, então execute o comando apropriado. Caso contrário, não se pode fazer nada porque alguma acção não é necessária.


Agora a eliminação de registos da base de dados está protegida contra cliques acidentais.

Was this article helpful?
Ainda à procura de uma resposta?
Junte-se à Comunidade