Yahoo! User Interface Blog (YUIBlog)

Filtern der Daten von YUI 3 DataTable angezeigt

Zusätzlich zu sortieren, die durch unterstützt wird YUI 3 DataTable , ist es oft nützlich, um die Daten zu filtern und zeigt eine Teilmenge der verfügbaren Zeilen. Der Query Builder Widget in der YUI 3 Gallery bietet eine Benutzeroberfläche für den Aufbau eines einfachen Filter Ausdruck.

( Klicken Sie auf den Screenshot, um bei diesem Beispiel zu spielen .)

Geschichte

Die erste Version wurde von einem Kollegen die Arbeit mit mir auf dem Yahoo! Publisher Network (YPN) geschrieben. (Er verließ bald darauf eine ehrliche Beschäftigung versuchen, nach dem Vorbild von Jamie Zawinski gesetzt, er einen Pub, um Bier zu verkaufen geöffnet -.! Hause gebraut, nicht weniger Aber ich schweife ab ....) Nach dem Hacken zusammen die erste Version des Query Builder, machte er die Fehler zu zeigen, es mir. Ein paar Tage später, klagte er, "Sie schrieb das ganze Ding!" In der Tat, ich habe es mehrmals umgeschrieben, im Laufe der Jahre. YPN ist verschwunden, aber die neuesten YUI 2-Version von Query Builder Mächte alle Datentabellen in APT , Yahoos Display-Advertising-Management-Plattform. Der Port, YUI 3 ist eigentlich die geringste Menge an Arbeit, die ich tun musste, um eine neue Version erzeugt haben!

Funktionsweise des Beispiels

Der Kern des Beispiels ist (1) Der Query Builder-Konfiguration, die, wie der Benutzer kann die Daten und (2) die Erweiterung in Y.DataSource.Local, die den Filter implementiert Filters angibt. (Für Server-Seite Paginierung, würden Sie die Filterkriterien Daten an den Server senden und backen Sie ihn auf Ihrer SQL-Abfrage.)

Um Query Builder konfigurieren, die beispielsweise definiert zunächst eine Liste der Variablen, die gefiltert werden können:

 var var_list =
 [
	 {
		 Name: 'title',
		 Typ: 'string',
		 Text: 'Titel'
	 },
	 {
		 Name: 'Jahr',
		 Typ: "Zahl",
		 Text: 'Jahr',
		 Validierung: "Yiv-Integer: [0,2100] '
	 },
	 {
		 Name: "Menge",
		 Typ: "Zahl",
		 text: 'Menge',
		 Validierung: "Yiv-Integer: [0,] '
	 }
 ];

Jede Variable ist ein Name (passend zum Schlüssel in der DataTable-Spalte-Konfiguration) und einen Typ zugewiesen. Die Standard-Typen sind 'String', 'Zahl', und 'Select', aber Sie können dies durch die Erstellung benutzerdefinierter Plugins (Verlängerung siehe unten ). Für jeden Typ, den Sie verwenden möchten, müssen Sie auch eine Reihe von Operatoren:

 var ops =
 {
	 Zeichenfolge:
	 [
		 {Wert: 'enthält', text: 'Enthält'},
		 {Wert: "starts-with ', text:' Beginnt mit '},
		 {Wert: "ends-with ', text:' Endet mit '}
	 ],

	 Anzahl:
	 [
		 {Wert: "gleich", text: '='},
		 {Wert: "weniger", text: '<='},
		 {Wert: 'größer', text: '> ='}
	 ]
 };

Dies legt die Betreiber, dass der Benutzer zu jedem Variablentyp anwenden können. (Wenn Sie verschiedene Sätze von Operatoren für Variablen des gleichen Grundtypus benötigen, können Sie die Art zu klonen. Sehen Sie sich die Plugins Abschnitt weiter unten.)

Y.FormManager wird verwendet, um die Werte von dem Benutzer eingegeben zu überprüfen, bevor der Filter angewendet wird. Die Validierung Schlüssel für jede Variable in der obigen Abfrage-Generator-Konfiguration bietet CSS-Daten, die von Y.FormManager interpretiert wird.

Wenn alle Validierungen übergeben, wird eine Anforderung an die Datenquelle gesendet. Die Erweiterung auf Y.DataSource.Local ist ganz einfach. Es wird lediglich filtert die Daten vor der Rückgabe der Ergebnisse:

 Y.extend (CustomDataSource, Y.DataSource.Local,
 {
	 _defDataFn: function (e)
	 {
		 var data = filterData (e.data, e.request.filter);
		 var antwort =
		 {
			 Ergebnisse: data.slice (e.request.recordOffset,
						 e.request.recordOffset + e.request.rowsPerPage),
			 Meta:
			 {
				 totalRecords: data.length
			 }
		 };

		 this.fire ("Response", Y.mix ({response: Antwort}, E));
	 }
 });

Die filter Element des Antrags wird erhalten QueryBuilder.toDatabaseQuery() , gibt die eine Liste von [variable, operator, value] Tupel. Beachte auch, dass die Antwort muss Informationen über die Gesamtzahl der Datensätze enthalten, da diese Veränderungen auf dem Filter basierend angewandt werden.

filterData() einfach Schleifen über die Tupel aus toDatabaseQuery() , die Anwendung der Filter-Operatoren in einer Zwei-Ebenen-Lookup-Tabelle definiert:

 var Filter =
 {
	 Zeichenfolge:
	 {
		 Enthält: Funktion (Wert, Filter)
		 {
			 Rückkehr (value.indexOf (Filter)> = 0);
		 },
		 "Starts-with ': function (value, Filter)
		 {
			 zurück (value.substr (0, filter.length) == Filter);
		 },
		 "Ends-with ': function (value, Filter)
		 {
			 return (value.substr (-filter.length) == Filter);
		 }
	 },

	 Anzahl:
	 {
		 gleich: function (value, Filter)
		 {
			 return (parseInt (Wert 10) == parseInt (Filter, 10));
		 },
		 weniger: function (value, Filter)
		 {
			 return (parseInt (Wert 10) <= parseInt (Filter, 10));
		 },
		 größer: function (value, Filter)
		 {
			 return (parseInt (Wert 10)> = parseInt (Filter, 10));
		 }
	 }
 };

Nach all dem, DataTable zeigt einfach, was es aus der Datenquelle erhält.

Plugins

Y.QueryBuilder.plugin_mapping definiert die Zuordnung von Namen zu geben tatsächlichen Klassen. Sie können diese Zuordnung in zweierlei Hinsicht zu ergänzen:

1. Klonen eines vorhandenen Typs durch die Definition einen neuen Namen für die gleiche Klasse. Dadurch können verschiedene Sätze von Operatoren für verschiedene Variablen des gleichen Grundtypus.
2. Erstellen Sie eine neue Art durch die Implementierung der Plugin-API . Studieren Sie den Quellcode für die vorhandenen Plugins ist der beste Weg, um ein Gefühl dafür, wie diese API arbeitet bekommen.

In Verallgemeinerung Query Builder

Query Builder unterstützt keine Klammern, so dass Sie entweder Und all die Bedingungen oder OR alle Bedingungen. Zwar ist es möglich auf die Einführung von Klammern in eine grafische Darstellung eines booleschen Ausdrucks ist, sind alle Entwürfe, die ich gesehen habe, zu umständlich zu bedienen. Eine textuelle Darstellung ist viel einfacher und leichter zu manipulieren. Expression Builder enthält Query Builder in ein Widget, das den Bau eine textuelle Repräsentation, ohne die Syntax oder die Art alles in der Hand erinnern können.

Über den Autor: John Lindal ( @ jafl5272 auf Twitter) ist einer der leitenden Ingenieure bauen das Fundament, auf dem Yahoo! APT wird gebaut. Zuvor arbeitete er auf dem Yahoo! Publisher Network.

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!