Inizio Interfaccia utente sul blog (YUIBlog)

Filtrare i dati visualizzati dal YUI 3 DataTable

Oltre alla selezione, che è supportato da YUI 3 DataTable , è spesso utile per essere in grado di filtrare i dati e visualizzare un sottoinsieme delle righe a disposizione. Il generatore di query widget nella 3 YUI Galleria fornisce un'interfaccia utente per la costruzione di una semplice espressione di filtro.

( Clicca l'immagine per giocare con questo esempio .)

Storia

La prima versione è stata scritta da un collega che lavora con me sul Yahoo! Publisher Network (YPN). (. Ha lasciato presto in seguito al tentativo di occupazione onesta Dopo il precedente stabilito da Jamie Zawinski, ha aperto un pub a vendere birra -. Fatta in casa, non meno Ma sto divagando ...) Dopo hacking insieme la prima versione del generatore di query, ha fatto l'errore di mostrare a me. Pochi giorni dopo, si lamentò: "Tu ha riscritto tutta la faccenda!" In effetti, l'ho riscritto più volte nel corso degli anni. YPN c'è più, ma recenti YUI versione 2 di poteri Query Builder tutte le tabelle dati APT , la piattaforma di Yahoo gestione del display advertising. La porta di YUI 3 è in realtà la minore quantità di lavoro che ho dovuto fare per generare una nuova versione!

Come l'esempio funziona

Il nucleo di questo esempio è (1) la configurazione del generatore di query che specifica come l'utente può filtrare i dati e (2) l'estensione a Y.DataSource.Local che implementa il filtro. (Per la paginazione lato server, si dovrebbe inviare i dati al server filtro e cuocere nella vostra query SQL.)

Per configurare il generatore di query, il primo esempio definisce un elenco delle variabili che possono essere filtrati:

 var = var_list
 [
	 {
		 Nome: 'title',
		 Tipo: 'string',
		 testo: 'Titolo'
	 },
	 {
		 Nome: 'anno',
		 Tipo: 'numero',
		 testo: 'Anno',
		 convalida: 'yiv-intero: [0,2100]'
	 },
	 {
		 Nome: 'quantità',
		 Tipo: 'numero',
		 testo: 'Quantità',
		 convalida: 'yiv-intero: [0,]'
	 }
 ];

Ogni variabile è assegnato un nome (corrispondente alla chiave nella configurazione colonna DataTable) e un tipo. I tipi di default sono 'stringhe', 'numero', e 'selezionare', ma si può estendere questo con la costruzione di plug-in personalizzati ( vedi sotto ). Per ogni tipo di utilizzo, è inoltre necessario definire un insieme di operatori:

 ops var =
 {
	 stringa:
	 [
		 {Valore: 'contiene', text: 'Contiene'},
		 {Valore: 'inizia-con', text: 'Inizia con'},
		 {Valore: 'conclude-con', text: 'Finisce con'}
	 ],

	 numero:
	 [
		 {Valore: 'pari', text: '='},
		 {Valore: 'meno', text: '<='},
		 {Valore: 'maggiore', text: '> ='}
	 ]
 };

Questo specifica degli operatori che l'utente può applicare a ogni tipo di variabile. (Se avete bisogno di diversi gruppi di operatori per le variabili dello stesso tipo fondamentale, è possibile clonare il tipo. Vedere il Plugin sezione seguente.)

Y. FormManager viene utilizzato per convalidare i valori immessi dall'utente prima che il filtro viene applicato. La chiave di convalida per ogni variabile nella configurazione sopra Query Builder fornisce i dati CSS, che è interpretato da Y. FormManager.

Se tutte le convalide passano, viene inviata una richiesta alla sorgente dati. L'estensione a Y.DataSource.Local è abbastanza semplice. Filtra solo i dati prima di restituire i risultati:

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

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

Il filter elemento della richiesta è ottenuta da QueryBuilder.toDatabaseQuery() , che restituisce una lista di [variable, operator, value] tuple. Si noti inoltre che la risposta deve includere informazioni sul numero totale di record, dato che questo cambia in base al filtro che viene applicato.

filterData() loop semplicemente sopra le tuple da toDatabaseQuery() , applicando gli operatori filtro definito in una tabella di due livelli di ricerca:

 var = filtri
 {
	 stringa:
	 {
		 contiene: funzione (valore, filtro)
		 {
			 ritorno (value.indexOf (filtro)> = 0);
		 },
		 'Inizia-con': function (valore, filtro)
		 {
			 ritorno (value.substr (0, filter.length) == filtro);
		 },
		 'Conclude-con': function (valore, filtro)
		 {
			 ritorno (value.substr (-filter.length) == filtro);
		 }
	 },

	 numero:
	 {
		 uguale: funzione (valore, filtro)
		 {
			 ritorno (parseInt (valore, 10) == parseInt (filtro, 10));
		 },
		 meno: la funzione (valore, filtro)
		 {
			 ritorno (parseInt (valore, 10) <= parseInt (filtro, 10));
		 },
		 maggiore: funzione (valore, filtro)
		 {
			 ritorno (parseInt (valore, 10)> = parseInt (filtro, 10));
		 }
	 }
 };

Dopo tutto questo, DataTable visualizza semplicemente ciò che riceve dalla fonte dati.

Plugin

Y.QueryBuilder.plugin_mapping definisce la mappatura dei nomi dei tipi di classi reali. Si può aumentare questa mappatura in due modi:

1. Clonare un tipo esistente attraverso la definizione di un nuovo nome per la stessa classe. Ciò consente di diversi gruppi di operatori per diverse variabili dello stesso tipo fondamentale.
2. Creare un nuovo tipo implementando l' API plug-in . Studiare il codice sorgente per il plugin esistenti è il modo migliore per avere un'idea di come funziona questa API.

Generalizzando Query Builder

Query Builder non supporta parentesi, così è possibile e tutte le condizioni OR tutte le condizioni. Mentre è possibile introdurre parentesi in una rappresentazione grafica di un espressione booleana, tutti i disegni che ho visto sono troppo complesse da usare. Una rappresentazione testuale è molto più semplice e più facile da manipolare. Generatore di espressioni incorpora generatore di query in un widget che permette di costruire una rappresentazione testuale, senza dover ricordare la sintassi di tipo tutto o in mano.

Circa l'autore: Giovanni Lindal ( @ jafl5272 su Twitter) è uno degli ingegneri di piombo costruendo le fondamenta su cui Yahoo! APT è costruito. In precedenza, ha lavorato sulla Publisher Network Yahoo!.

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | Digg it! | reddit!