Yahoo! User Interface Blog (YUIBlog)

Filtrar los datos mostrados por YUI DataTable 3

01 de marzo 2011 a las 1:39 pm por Juan Lindal | En Desarrollo , YUI 3 Galería | 4 comentarios

Además de la clasificación, que es apoyada por YUI DataTable 3 , a menudo es útil ser capaz de filtrar los datos y mostrar un subconjunto de las filas disponibles. El Generador de consultas de flash en la Galería de YUI 3 ofrece una interfaz de usuario para la construcción de una expresión de filtro simple.

( Haga clic en la pantalla y jugar con este ejemplo .)

Historia

La primera versión fue escrita por un colega que trabaja conmigo en la red de Yahoo! Publisher (YPN). (. Salió poco después de intentar un empleo honesto con el precedente sentado por Jamie Zawinski, abrió un bar para vender cerveza -. De elaboración casera, nada menos, pero estoy divagando ...) Después de cortar juntos la primera versión de Query Builder, que hizo el error de mostrar a mí. Unos días más tarde, se quejó: "Usted reescribió todo el asunto!" De hecho, lo he reescrito varias veces en los últimos años. YPN se ha ido, pero la última versión de YUI dos poderes Query Builder todas las tablas de datos de APT , la plataforma de Yahoo pantalla de gestión de la publicidad. El puerto de YUI 3 es en realidad la menos cantidad de trabajo que he tenido que hacer para generar una nueva versión!

¿Cómo funciona el ejemplo

El núcleo de este ejemplo es (1) la configuración del generador de consultas que especifica cómo el usuario puede filtrar los datos y (2) la extensión a Y.DataSource.Local que implementa el filtro. (Para la paginación del lado del servidor, que se envían los datos al servidor de filtro y se hornea en la consulta SQL.)

Para configurar el Generador de consultas, el primer ejemplo define una lista de las variables que se pueden filtrar:

 var = INTO
 [
	 {
		 nombre: 'title',
		 Tipo: 'cadena',
		 texto: 'Título'
	 },
	 {
		 nombre: 'Año',
		 tipo: «número»,
		 texto: 'Año',
		 validación: 'yiv enteros: [0,2100] "
	 },
	 {
		 nombre: 'cantidad',
		 tipo: «número»,
		 texto: "Cantidad",
		 validación: 'yiv enteros: [0],'
	 }
 ];

Cada variable se le asigna un nombre (que se corresponda la clave en la configuración de la columna DataTable) y un tipo. Los tipos por defecto son 'cadena', 'número', y 'select', pero se puede extender mediante la creación de plugins personalizados ( ver más abajo ). Para cada tipo que se utiliza, también debe definir un conjunto de operadores:

 var ops =
 {
	 cadena:
	 [
		 {Valor: 'contiene', text: 'Contiene'},
		 {Valor: 'comienza con', text: 'Inicia con'},
		 {Valor: 'termina con', text: 'termina con'}
	 ],

	 número:
	 [
		 {Valor: 'igual', text: '='},
		 {Valor: 'less', text: '<='},
		 {Valor: 'mayor', text: '> ='}
	 ]
 };

Esto especifica los operadores que el usuario puede aplicar a cada tipo de variable. (Si necesita diferentes conjuntos de operadores para las variables de tipo fundamental mismo, puede clonar el tipo. Consulte el Plugins siguiente sección.)

Y. FormManager se utiliza para validar los valores especificados por el usuario antes de aplicar el filtro. La clave de validación para cada variable en la configuración de Query Builder proporciona datos sobre CSS que es interpretado por Y. FormManager.

Si todas las validaciones de paso, se envía una solicitud al origen de datos. La extensión a Y.DataSource.Local es bastante simple. Simplemente filtra los datos antes de volver a los resultados:

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

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

El filter elemento de la solicitud se obtiene a partir QueryBuilder.toDatabaseQuery() , que devuelve una lista de [variable, operator, value] tuplas. También tenga en cuenta que la respuesta debe incluir información sobre el número total de registros, ya que los cambios basados ​​en el filtro que se aplica.

filterData() simplemente recorre el tuplas de toDatabaseQuery() , aplicando el filtro de los operadores definidos en una tabla de dos niveles de búsqueda:

 var = filtros
 {
	 cadena:
	 {
		 contiene: function (valor, filtro)
		 {
			 retorno (value.indexOf (filtro)> = 0);
		 },
		 'Comienza con': function (valor, filtro)
		 {
			 retorno (value.substr (0, filter.length) == filtro);
		 },
		 'Termina con': function (valor, filtro)
		 {
			 retorno (value.substr (-filter.length) == filtro);
		 }
	 },

	 número:
	 {
		 igual: function (valor, filtro)
		 {
			 return (parseInt (valor, 10) == parseInt (filtro, 10));
		 },
		 menos: function (valor, filtro)
		 {
			 return (parseInt (valor, 10) <= parseInt (filtro, 10));
		 },
		 mayor: function (valor, filtro)
		 {
			 return (parseInt (valor, 10)> = parseInt (filtro, 10));
		 }
	 }
 };

Después de todo esto, DataTable simplemente muestra lo que recibe de la fuente de datos.

Plugins

Y.QueryBuilder.plugin_mapping define la asignación de nombres de tipos de clases reales. Puede aumentar esta asignación de dos maneras:

1. Clon de un tipo existente mediante la definición de un nuevo nombre para la misma clase. Esto permite que diferentes grupos de operadores de las distintas variables del tipo fundamental mismo.
2. Crear un nuevo tipo mediante la implementación de la API de plugins . Estudiar el código fuente de los plugins existentes es la mejor manera de tener una idea de cómo funciona esta API.

Generalizar el Generador de consultas

Generador de consultas no admiten paréntesis, por lo que puede y todas las condiciones o O todas las condiciones. Si bien es posible la introducción de paréntesis en una representación gráfica de una expresión booleana, todos los diseños que he visto son demasiado difíciles de utilizar. Una representación textual es mucho más simple y más fácil de manipular. Generador de expresiones incorpora el Generador de consultas en un widget que permite la construcción de una representación textual, sin tener que recordar la sintaxis o todo tipo en la mano.

Sobre el autor: John Lindal ( @ jafl5272 en Twitter) es uno de los ingenieros de conducir la construcción de los cimientos sobre los que Yahoo! APT se construye. Anteriormente, trabajó en la red de Yahoo! Publisher.

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar con del.icio.us | Digg it! | reddit!