Blog Interface utilisateur Yahoo! (YUIBlog)

Filtrage des données affichées par YUI 3 DataTable

En plus de tri, qui est soutenu par YUI 3 DataTable , il est souvent utile d'être capable de filtrer les données et afficher un sous-ensemble des lignes disponibles. Le Query Builder widget dans la Galerie YUI 3 fournit une interface utilisateur pour la construction d'une expression simple filtre.

( Cliquez sur la capture d'écran pour jouer avec cet exemple .)

Histoire

La première version a été écrit par un collègue travaillant avec moi sur le Yahoo! Publisher Network (YPN). (Il a laissé peu de temps après pour tenter un emploi honnête Conformément au précédent établi par Jamie Zawinski, il a ouvert un pub à vendre de la bière -.! La maison brassée, pas moins Mais je m'égare ....) Après le piratage ainsi que la première version de Query Builder, il a fait l'erreur de montrer à moi. Quelques jours plus tard, il se plaint: «Vous réécrit le tout!" En fait, j'ai réécrit plusieurs fois au fil des ans. YPN est allé, mais au plus tard le YUI version 2 des pouvoirs du Générateur de requêtes tous les tableaux de données dans APT , la plate-forme de Yahoo affichage publicitaire de gestion. Le port de YUI 3 est en fait le moins de travail que j'ai eu à faire pour générer une nouvelle version!

Comment fonctionne l'exemple

Le noyau de l'exemple est (1) la configuration Query Builder qui précise comment l'utilisateur peut filtrer les données et (2) l'extension à Y.DataSource.Local qui met en œuvre le filtre. (Pour la pagination côté serveur, vous envoyez les données de filtre sur le serveur et le faire cuire dans votre requête SQL.)

Pour configurer Query Builder, l'exemple définit d'abord une liste des variables qui peuvent être filtrés:

 var = var_list
 [
	 {
		 nom: 'title',
		 Type: 'string',
		 texte: «Titre»
	 },
	 {
		 nom: «année»,
		 Type: «numéro»,
		 texte: «Année»,
		 de validation: «yiv-entier: [0,2100]»
	 },
	 {
		 nom: la «quantité»,
		 Type: «numéro»,
		 texte: «Quantité»,
		 de validation: «yiv-entier: [0,] '
	 }
 ];

Chaque variable se voit attribuer un nom (correspondant à la clé dans la configuration la colonne DataTable) et un type. Les types par défaut sont 'string', 'nombre', et 'select', mais vous pouvez étendre cette mesure par la construction des plugins ( voir ci-dessous ). Pour chaque type que vous utilisez, vous devez également définir un ensemble d'opérateurs:

 var = ops
 {
	 chaîne:
	 [
		 {Valeur: «contient», le texte: «Contient»},
		 {Valeur: 'commence-avec », texte:« Commence par'},
		 {Valeur: «extrémités-avec», texte: «se termine par '}
	 ],

	 numéro:
	 [
		 {Valeur: «égal», texte: '='},
		 {Valeur: «moins», texte: '<='},
		 {Valeur: «plus grand», texte: '> ='}
	 ]
 };

Ceci spécifie les opérateurs que l'utilisateur peut appliquer à chaque type de variable. (Si vous avez besoin différents ensembles d'opérateurs pour les variables du même type fondamental, vous pouvez cloner le type. Voir l' Plugins section ci-dessous.)

Y.FormManager est utilisé pour valider les valeurs saisies par l'utilisateur avant le filtre est appliqué. La clé de validation pour chaque variable dans la configuration ci-dessus Query Builder fournit des données CSS qui est interprété par Y.FormManager.

Si toutes les validations passer, une requête est envoyée à la source de données. L'extension à Y.DataSource.Local est assez simple. Il filtre simplement les données avant de retourner les résultats:

 Y.extend (CustomDataSource, Y.DataSource.Local,
 {
	 _defDataFn: function (e)
	 {
		 var data = filterData (e.data, e.request.filter);
		 var response =
		 {
			 résultats: data.slice (e.request.recordOffset,
						 e.request.recordOffset + e.request.rowsPerPage),
			 meta:
			 {
				 totalRecords: data.length
			 }
		 };

		 this.fire («réponse», Y.mix ({response: réponse}, e));
	 }
 });

Le filter élément de la demande est obtenue à partir QueryBuilder.toDatabaseQuery() , qui retourne une liste de [variable, operator, value] tuples. A noter également que la réponse doit inclure des informations sur le nombre total d'enregistrements, car cela changements fondés sur l'application du filtre.

filterData() boucle simplement sur ​​les tuples de toDatabaseQuery() , en appliquant les opérateurs de filtrage définies dans un tableau à deux niveaux de recherche:

 filtres var =
 {
	 chaîne:
	 {
		 Contient: fonction (valeur, filtre)
		 {
			 retour (value.indexOf (filtre)> = 0);
		 },
		 »Commence-avec»: la fonction (valeur, filtre)
		 {
			 retourner (value.substr (0, filter.length) == filtre);
		 },
		 «Extrémités-avec»: la fonction (valeur, filtre)
		 {
			 retour (value.substr (-filter.length) == filtre);
		 }
	 },

	 numéro:
	 {
		 égale: la fonction (valeur, filtre)
		 {
			 retour (parseInt (valeur, 10) == parseInt (filtre, 10));
		 },
		 moins: la fonction (valeur, filtre)
		 {
			 retour (parseInt (valeur, 10) <= parseInt (filtre, 10));
		 },
		 plus: la fonction (valeur, filtre)
		 {
			 retour (parseInt (valeur, 10)> = parseInt (filtre, 10));
		 }
	 }
 };

Après tout cela, DataTable affiche simplement ce qu'il reçoit de la source de données.

Plugins

Y.QueryBuilder.plugin_mapping définit le mappage des noms de type de classes réelles. Vous pouvez augmenter cette cartographie de deux manières:

1. Cloner un type existant en définissant un nouveau nom pour la même classe. Cela permet différents ensembles d'opérateurs pour les différentes variables du même type fondamental.
2. Créer un nouveau type en mettant en œuvre l' API plug-in . Etudier le code source pour les plugins existants est la meilleure façon d'obtenir une idée de comment cette API fonctionne.

La généralisation de Query Builder

Query Builder ne prend pas en charge entre parenthèses, de sorte que vous pouvez soit et toutes les conditions ou OU toutes les conditions. Bien qu'il soit possible d'introduire des parenthèses dans une représentation graphique d'une expression booléenne, tous les dessins que j'ai vus sont trop difficiles à utiliser. Une représentation textuelle est beaucoup plus simple et plus facile à manipuler. Expression Builder intègre Query Builder dans un widget qui permet de construire une représentation textuelle, sans avoir à vous rappeler la syntaxe ou de tout type dans la main.

À propos de l'auteur: John Lindal ( @ jafl5272 sur Twitter) est l'un des ingénieurs de plomb construire le fondement sur ​​lequel Yahoo! APT est construit. Auparavant, il a travaillé sur le Yahoo! Publisher Network.

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!