Caixa de Seleção Múltipla - Duplex
Plugin: wf_select_duplex_init
Descrição: Insere código que referencia arquivos de javascript responsáveis pela funcionalidade.
Parâmetros: <nenhum>
Exemplo:
{wf_select_duplex_init}
Observação: antes de utilizar "wf_select_duplex" (seja uma ou mais vezes), deve-se fazer uma única chamada ao plugin "wf_select_duplex_init".
Plugin: wf_select_duplex
Descrição: Este plugin insere dois select boxes de seleções múltiplas que permitem ao usuário cadastrar vários ítens de uma lista dada. O primeiro select é utilizado para mostrar todos os ítens "cadastráveis". Pode-se selecionar um ou mais ítens que são transferidos para o segundo select através do botão ">>". O mesmo pode ser feito do segundo select para o primeiro através do botão "<<". A idéia é realizar o cadastro de todos os ítens contidos no segundo select ao final das operações.
Parâmetros:
nameLeft: o nome que o select da esquerda irá receber.
nameRight: o nome que o select da direita irá receber.
arrayLeft: lista dos ítens a serem carregados no select da esquerda.
arrayRight: lista dos ítens a serem carregados no select da direita.
size: tamanho dos select boxes.
diffEnable: valor indicando se deve-se executar o diff entre os select boxes.
style: para definir os estilos dos select boxes.
Parâmetros obrigatórios:
nameLeft
nameRight
Valor padrão:
nameLeft: "_disponiveis_" + <valor randômico>
nameRight: "_cadastrados_" + <valor randômico>
size: 8
style: "width:200px"
diffEnable: true
Exemplo de utilização:
{wf_select_duplex nameLeft="disponiveis" nameRight="cadastrados"}
O exemplo acima cria dois selects vazios, que podem ser populados posteriormente.
{wf_select_duplex nameLeft="disponiveis" nameRight="cadastrados" arrayLeft=$lista}
O exemplo acima cria dois selects carregando a variável "lista", que é um array vindo do modelo, no select da esquerda. Para cada item de $lista será criada uma option no select, de forma que os índices do array serão atribuídos ao value da option e os valores do array ao text.
{wf_select_duplex nameLeft="disponiveis" nameRight="cadastrados" arrayLeft=$listaLeft arrayRight=$listaRight diffEnable=false}
O exemplo acima cria dois selects carregados automaticamente com os arrays $listaLeft e $listaRight. Especificando-se 'diffEnable=false', não é efetuado o diff entre os selects, caso nada fosse passado, seria utilizado o valor default 'diffEnable=true', que eliminaria os valores de $listaLeft encontrados em $listaRight.
Exemplo integrado com o Select City:
Pode-se integrar esse componente com o Select City:
Utilizando uma tabela para posicionar os componentes de maneira mais organizada:
<table> <tr> <td class="form_label"> Estado</td> <td> {wf_select_city_init}{wf_select_state name="estado" onChange="atualizaCidades();"} </td> </tr> <tr> <td class="form_label"> Cidades</td> <td> {wf_select_duplex nameLeft="disponiveis" nameRight="cadastrados" arrayRight=$cidades} <script> draw_cities('disponiveis',1, callDiff); </script> </td> </tr> </table>
Para o código acima, atualizaCidades e callDiff podem ser definidas da seguinte forma:
function atualizaCidades() { objEstado = eval('document.forms[0].estado'); draw_cities('disponiveis', objEstado.value, callDiff); } var callDiff = function (){ selectDiff('cadastrados','disponiveis'); }
Onde, selectDiff é uma função javascript definida no plugin wf_select_duplex e os parâmetros 'cadastrados' e 'disponiveis' são os nomes dos selects.
draw_cities é uma função javascript definida no plugin wf_select_city e atribui ao select disponiveis todas as cidades do estado de código 1(Paraná).
Como draw_cities é uma chamada Ajax (assíncrona), ela aceita um terceiro parâmetro, no caso callDiff, que é a função que será executada ao final de draw_cities.
Portanto, ao final dessa execução, teremos todas as cidades do Paraná carregadas no select 'disponiveis', todas as cidades recuperadas em $lista carregadas em 'cadastradas' e após a chamada callDiff, as cidades de 'disponiveis' encontradas em 'cadastradas' serão removidas, pois elas não podem estar nos dois selects simultaneamente.
ATENÇÃO: Antes do formulário ser submetido, você deve chamar a função javascript do componente "selectAllOptions". Essa função recebe como parâmetro o nome do select a ter as options selecionadas. No PHP serão recuperados os values dos elementos selecionados.