Yahoo! Blog User Interface (YUIBlog)

Filtrando os dados exibidos pelo YUI 3 DataTable

Além disso a separação, que é suportado por YUI 3 DataTable , é muitas vezes útil para ser capaz de filtrar os dados e exibir um subconjunto das linhas disponíveis. O Query Builder widget na Galeria 3 YUI fornece uma interface para a construção de uma simples expressão de filtro.

( Clique na imagem para jogar com este exemplo .)

História

A primeira versão foi escrita por um colega que trabalha comigo no Yahoo! Publisher Network (YPN). (Ele saiu logo depois para tentar um emprego honesto Seguindo o precedente criado por Jamie Zawinski, ele abriu um bar para vender cerveja -.! Caseira, não menos Mas estou divagando ....) Depois de cortar juntos a primeira versão do Query Builder, ele fez o erro de mostrar isso para mim. Poucos dias depois, ele reclamou: "Você reescreveu a coisa toda!" Na verdade, eu reescrevi várias vezes ao longo dos anos. YPN se foi, mas o mais recente versão do YUI 2 poderes Construtor de Consulta todas as tabelas de dados em APT Yahoo plataforma de exibição, gestão de publicidade. A porta para YUI 3 é realmente a menor quantidade de trabalho que eu tive que fazer para gerar uma nova versão!

Como funciona o exemplo

O núcleo do exemplo é (1) a configuração do construtor de consultas que especifica como o utilizador pode filtrar os dados e (2) extensão da Y.DataSource.Local para que implementa o filtro. (Para paginação do lado do servidor, você deve enviar os dados de filtro para o servidor e cozê-lo em sua consulta SQL.)

Para configurar o Query Builder, o primeiro exemplo define uma lista das variáveis ​​que podem ser filtradas:

 var var_list =
 [
	 {
		 nome: 'title',
		 type: 'string',
		 text: 'Título'
	 },
	 {
		 nome: 'ano',
		 tipo: 'número',
		 text: 'Ano',
		 validação: 'yiv-inteiro: [0,2100]'
	 },
	 {
		 nome: 'quantidade',
		 tipo: 'número',
		 text: 'Quantidade',
		 validação: 'yiv-inteiro: [0],'
	 }
 ];

Cada variável é atribuído um nome (correspondente à chave na configuração coluna DataTable) e um tipo. Os tipos padrão são 'string', 'número', e 'select', mas você pode estender essa construindo plugins personalizados ( veja abaixo ). Para cada tipo que você usa, você também deve definir um conjunto de operadores:

 var ops =
 {
	 string:
	 [
		 {Valor: 'contém', text: 'Contém'},
		 {Valor: 'começa com', text: "Inicia com"},
		 {Valor: 'termina com', text: 'termina com'}
	 ],

	 Número:
	 [
		 {Valor: 'iguais', text: '='},
		 {Valor: 'menos', text: '<='},
		 {Valor: 'maior', text: '> ='}
	 ]
 };

Este especifica os operadores que o usuário pode aplicar a cada tipo de variável. (Se você precisar de diferentes conjuntos de operadores para as variáveis ​​do mesmo tipo fundamental, você pode clonar o tipo. Veja o Plugins abaixo.)

Y.FormManager é usado para validar os valores digitados pelo usuário antes do filtro é aplicado. A chave de validação para cada variável na configuração acima Query Builder fornece dados de CSS que é interpretado por Y.FormManager.

Se todas as validações passar, um pedido é enviado para a fonte de dados. A extensão para Y.DataSource.Local é bastante simples. Ele simplesmente filtra os dados antes de retornar os resultados:

 Y.extend (CustomDataSource, Y.DataSource.Local,
 {
	 _defDataFn: function (e)
	 {
		 var data = FilterData (e.data, e.request.filter);
		 var resposta =
		 {
			 resultados: data.slice (e.request.recordOffset,
						 e.request.recordOffset + e.request.rowsPerPage),
			 meta:
			 {
				 totalRecords: data.length
			 }
		 };

		 this.fire ("resposta", Y.mix ({resposta: resposta}, e));
	 }
 });

O filter elemento do pedido é obtido a partir QueryBuilder.toDatabaseQuery() , que retorna uma lista de [variable, operator, value] tuplas. Observe também que a resposta deve incluir informações sobre o número total de registros, uma vez que isso muda com base no filtro a ser aplicado.

filterData() simplesmente faz um loop sobre as tuplas de toDatabaseQuery() , aplicando-se os operadores de filtros definidos em uma tabela de dois níveis:

 filtros var =
 {
	 string:
	 {
		 contém: função (valor, filtro)
		 {
			 retorno (value.indexOf (filtro)> = 0);
		 },
		 'Começa com': function (valor, filtro)
		 {
			 retornar (value.substr (0 filter.length) == filtro);
		 },
		 'Termina com': function (valor, filtro)
		 {
			 de retorno (value.substr (-filter.length) == filtro);
		 }
	 },

	 Número:
	 {
		 igual: function (valor, filtro)
		 {
			 de retorno (parseInt (valor, 10) == parseInt (filtro, 10));
		 },
		 menos: function (valor, filtro)
		 {
			 retorno (parseInt (valor, 10) <= parseInt (filtro, 10));
		 },
		 maior: function (valor, filtro)
		 {
			 retorno (parseInt (valor, 10)> = parseInt (filtro, 10));
		 }
	 }
 };

Depois de tudo isso, DataTable simplesmente exibe o que recebe da fonte de dados.

Plugins

Y.QueryBuilder.plugin_mapping define o mapeamento de nomes de tipo de aulas reais. Você pode aumentar esse mapeamento de duas maneiras:

1. Clonar um tipo existente, definindo um novo nome para a mesma classe. Isto permite que diferentes conjuntos de operadores para diferentes variáveis ​​do mesmo tipo fundamental.
2. Criar um novo tipo de implementação da API de plugin . Estudar o código fonte para os plugins existentes é a melhor maneira de ter uma idéia de como essa API funciona.

Generalizando Query Builder

Query Builder não suporta parênteses, para que você possa, quer e todas as condições ou ou todas as condições. Embora seja possível a introdução de parênteses em uma representação gráfica de uma expressão booleana, todos os projetos que tenho visto são muito complicados de usar. Uma representação textual é muito mais simples e mais fácil de manipular. Expression Builder incorpora Query Builder em um widget que permite a construção de uma representação textual, sem ter que lembrar a sintaxe ou tipo tudo à mão.

Sobre o autor: John Lindal ( @ jafl5272 no Twitter) é um dos engenheiros de chumbo construindo o alicerce sobre o qual Yahoo! APT é construído. Anteriormente, ele trabalhou no Yahoo! Publisher Network.

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!