wiki:WF/CaixadeSelecaoMultipla-Duplex

Version 3 (modified by cassiomaes, 17 years ago) (diff)

--

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

http://doc.workflow.celepar.parana/wiki/select_duplex.png

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:

http://doc.workflow.celepar.parana/wiki/select_duplex_cities.png

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}
            <s c r i p t> draw_cities('disponiveis',1, callDiff); </s c r i p t>
        </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.

Attachments