Flex/AS3 – Truques E Dicas #10 – DP filterFunction

Flex/AS3 – Truques E Dicas #10 – DP filterFunction

Este é mais um dos exemplos que já muita gente usa mas que outros tantos não conhecem… Trata-se da propriedade filterFunction presente na class ArrayCollection.

Num dos meus projectos tinha a necessidade de procurar entre 2500 entradas da base de dados alguns elementos e queria faze-lo em “real-time” ou seja, assim que o utilizador começar a escrever num campo de procura, a minha DataGrid começa a ser filtrada pelas letras/palavras inseridas na caixa de procura… a cada novo caracter introduzido a tabela seria filtrada por determinada ordem…

Claro que não é a tabela que vou filtrar, mas sim o seu DataProvider. Para já definidos alguns pontos como:
Caixa de procura e o listener às mudanças:
[coolcode]
[/coolcode]

o nosso dataProvider que é “imaginariamente” composto pelos campos “nome”, “prenome”, “endereco” e “telefone”:
[coolcode] [Bindable] private var meuDP:ArrayCollection;
[/coolcode] que está previamente preenchido com 2500 resultados e atribuido a uma datagrid.

E finalmente a nosssa função de procura que atribuirá uma segunda função como filtro ao DataProvider:
[coolcode] private function iniciaProcura():void {
meuDP.filterFunction=filtraPorEntrada;
meuDP.refresh();
//associamos a função que vai proceder à filtragem do DP e de seguida “actualizamos” o dataProvider.
}

private function filtraPorEntrada(item:Object):Boolean {
//esta função recebe cada entrada no dataProvider como “item” e devolve true/false no caso de corersponder ao
//texto introduzido na caixa de procura com o id=”procura”.
//vamos comparar o texto escrito primeiramente com o campo “nome”, depois com o “endereco” e por final com o “telefone”

var encontrado:Boolean=false;

if(item.nome.toLowerCase().search(procura.text.toLowerCase()) != -1) encontrado = true;
else if(item.endereco.toLowerCase().search(procura.text.toLowerCase()) != -1) encontrado = true;
else if (item.telefone.toLowerCase().search(procura.text.toLowerCase()) != -1) encontrado = true;
else encontrado=false;
return encontrado;

}
[/coolcode] Esta função à medida que é adicionado ou removido um caracter da caixa “procura” é accionada, filtrando assim os campos do dataProvider, e como este é [Bindable] actualizará a dataGrid automaticamente….

Esta procura, apesar das 2500 entradas na dataGrid, é feita muito rapidamente (sem render’s na dataGrid) pelo que é uma das melhores soluções para procura numa Datagrid, principalmente quando não queremos fazer chamadas repetidas a um backend para filtrar os dados.

Se quiserem remover o filtro, basta colocarem:
[coolcode] meuDP.filterFunction=undefined;
meuDP.refresh();
[/coolcode]

Simples e muito util…

Abraço.


12 comments

add yours
  • Robson Fernandes April 27, 2009

    Vlw pela dica, Mário.
    Pra grande massa de registros eu consigo uma performance imensa com essa funcionalidade!!!

  • Dhimitri May 15, 2009

    Boa dica!
    valeu mesmo pessoal!

  • Diego June 7, 2009

    Cara.. vou montar um altar para você…. só na ultima semana vc salvou minha vida pelo menos umas 15 vezes…

    Parabéns continue com o ótimo trabalho..

  • andersen June 23, 2009

    item.cor.toLowerCase().search(procura3.text.toLowerCase()

    se for busca por string

    e c for uma busca por numbers

    ??
    oq muda ali

    obrigados

  • andersen June 29, 2009

    aproveitando…
    se quisermos fazer dois filtros simultaneos, por exemplo
    tenho dois campos onde eu posso digitar, um deles eu pesquiso pelo nome, ok filtrado,
    a partir dos dados filtrados pelo nome, eu filtro novamente pelo telefone, assim em escala… como ficaria?
    abraco

  • Rafael August 4, 2009

    Muito boa sua dica! Me poupou processamento no servidor: até então estava realizando muitas chamadas ao backend, com essa dica diminuo um pouco esse problema. Quanto à dúvida do anderson, acredito que para realizar mais de um filtro ao mesmo tempo a função que filtra deve realizar todos os filtros ao mesmo tempo. Por exemplo, para filtrar pelo conteúdo de duas caixas de texto, ambas poderiam chamar a mesma função no change, e dentro da função realizar a filtragem usando o conteúdo das duas caixas de texto (TextInput). Bom, é só uma idéia. Obrigado pela dica!

  • George Pacheco July 22, 2010

    E ai grande Mario , blz.
    Cara, acabei de usar esta tua dica e funcionou uma beleza.
    Valeu por compartilhar este grande conhecimento que tu tem !!
    Um abração meu amigo.

  • Armando July 27, 2010

    Simples e objetivo.
    Valeu pela dica.

  • Nelson Junior March 2, 2011

    Preciso de um programado em Flex para continuar um sistema, será que você pode me ajudar ? ou alguem para indicar

  • Gabriel March 7, 2011

    Boa tarde,
    primeiramente parabéns pelo trabalho, estou com um probleminha aqui, sou iniciante no flex e gostaria de saber se essa função funciona com Array e no flex 4, tentei aqui e não consegui fazer funcionar, creio que o flex não localizou o FilterFunction, se for possível disponibilizar um exemplo com o flex 4 e com somente array agradeço.

  • Mário Santos March 10, 2011

    Gabriel, a função filter function apenas está disponivel no ArrayCollection, se quiser implementar algo parecido no array terá que fazer manualmente percorrendo cada um dos elementos, comparando com o desejado (usando o String(elemento).search(“texto”)) e recriando um novo array…

    ;)

  • Reder . May 9, 2011

    Cara…parabéns…
    Passei a manhã toda tentando achar um lugar que me explicasse isso…
    Valeu mesmo…
    Abç…

Leave a Comment

Post