Yahoo! User Interface Blog (YUIBlog)

In der YUI 3 Gallery: Bulk Widget-Editor

Die QuickEdit Plugin für YUI 3 DataTable macht es einfach, eine ganze Seite von Datensätzen in einer atomaren Operation zu bearbeiten. Allerdings muss man manchmal auch noch mehr tun. Zum Beispiel müssen Sie möglicherweise gleichzeitig bearbeiten mehr Datensätze als Sie bequem auf eine einzige Seite passen. Oder müssen Sie möglicherweise das Hinzufügen, Duplizieren und Entfernen von Datensätzen als Teil der atomaren Operation zu unterstützen. Oder Sie könnten, um visuell Gruppe Felder, indem sie in einer einzigen Tabellenzelle wollen. Die Bulk-Editor -Widget unterstützt alle diese Möglichkeiten.

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

Überblick

Die Bulk-Widget-Editor besteht aus drei Komponenten:

Data source

Bricht eine YUI DataSource und verwaltet die Änderungen: Einfügungen, Umzüge und veränderte Werte.

Base widget

Dies bietet die grundlegende Struktur für die Bearbeitung durch die Verwaltung Datensätze und Felder in jedem Datensatz. Abgeleitete Klassen sind für die Wiedergabe jeden Datensatz in einer separaten Zeile, die ein div, ein tbody, oder ein anderer Behälter sein könnte.

HTML table implementation

Dadurch verlängert sich die Basis-Widget, um jeden Datensatz in ein tbody machen in einer HTML-Tabelle. Die Spalte Konfiguration bestimmt, welches Feld in jeder Spalte der Tabelle angezeigt. Eine benutzerdefinierte Formatierer Zelle können mehrere Felder in einer einzigen Tabellenzelle gerendert werden.

Konfiguration

In dem Beispiel, das die obigen Screenshot generiert wurde die Konfiguration gehalten worden so einfach wie möglich:

fields definiert die editierbaren Werte in den einzelnen Datensätzen. Der Standard-Typ eingegeben wird. Die anderen Typen sind gültig select und textarea. (Wählen Sie erfordert eine Liste von Werten.) Basic Validierung durch bereitgestellt Formular Manager Galerie-Modul. Dies umfasst Felder sind Pflichtfelder, Länge Einschränkungen, und numerische Bereiche . Komplexere Validierung kann durch Angabe durchgeführt werden regex oder Ihre eigene Funktion ( fn ). Hier ist ein Auszug aus der Live-Beispiel:

 var fields =
 {
	 Titel:
	 {
		 Typ: 'textarea'
	 },
	 Jahr:
	 {
		 Validierung:
		 {
			 CSS: 'Yiv-Integer: [1500,2100]'
		 }
	 },
	 Farbe:
	 {
		 Typ: 'select',
		 Werte:
		 [
			 {Wert: 'rot', text: 'Red'},
			 {Wert: 'grün', text: 'Grüne'},
			 {Wert: 'blau', text: 'Blue'}
		 ]
	 }
 };

Y.BulkEditDataSource erfordert eine Instanz Y.DataSource und die folgenden Parameter:

uniqueIdKey

Der Name eines Schlüssels, der jeden Datensatz eindeutig identifiziert.

generateRequest

Eine Funktion zum Request-Parameter für die Erzeugung Y.DataSource . (Dies ist leer in dem Beispiel, weil Y.DataSource.Local gibt immer alle Daten.)

extractTotalRecords

Eine Funktion, um die Gesamtzahl von Datensätzen aus dem Extrakt Y.DataSource Antwort.

Da das Beispiel verwendet Y.DataSource.Local , totalRecordsReturnExpr ist ebenfalls erforderlich. Dieser Ausdruck gibt an, wo OGNL in der Antwort auf die Gesamtzahl der Datensätze speichern. (Beachten Sie, dass extractTotalRecords diesen Wert liest.)

 var ds = new Y.BulkEditDataSource (
 {
	 DS: raw_ds,
	 uniqueIdKey: 'id',
	 GenerateRequest: function () {},
	 totalRecordsReturnExpr: '. meta.totalRecords',
	 extractTotalRecords: function (response)
	 {
		 zurück response.meta.totalRecords;
	 }
 });

Y.HTMLTableBulkEditor erfordert die Datenquelle, das Feld Konfiguration, und die Spalte Konfiguration. In der Spalte Konfiguration, ist der Schlüssel der Feldname, wenn Sie einen benutzerdefinierten Formatierer angeben. Das Etikett wird als Spaltenüberschrift verwendet. Hier ist ein Auszug aus der Live-Beispiel:

 var columns =
 [
	 {
		 Schlüssel: 'Option',
		 Etikett: "<input type="checkbox" id="select-all" /> ',
		 Formatierer: function (o)
		 {
			 var Markup = '<input type="checkbox" class="record-select" id="{id}" />';
			 o.cell.set ('innerHTML', Y.Lang.sub (Markup,
			 {
				 ID: this.getRecordId (o.record)
			 }));
		 }
	 },
	 {Key: 'title', Aufschrift: 'Titel'},
	 {Key: 'Jahr', Aufschrift: 'Jahr'},
	 {Key: 'color', Aufschrift: 'Farbe'}
 ];

(Beachten Sie, dass die Live-Beispiel eine geringfügige Erweiterung definiert Y.HTMLTableBulkEditor auf das Kontrollkästchen Spalte zu behandeln.)

Sie können auch übergeben Sie eine Instanz Y.Paginator zu Y.BulkEditDataSource . Dies wird in einem separaten, komplizierter gezeigt anschauliches Beispiel .

Lokale vs Remote Data Sources

Bei der Entscheidung, ob eine lokale oder eine Remote-Datenquelle verwenden, müssen Sie sorgfältig die Vor-und Nachteile. Der offensichtliche Nachteil ist, dass eine lokale Datenquelle schneller ist, wenn Paginieren, aber die erste Seite zu laden dauert länger und erfordert mehr Speicher auf dem Client.

Die Bulk-Editor Widget verursachen zusätzliche Trade-offs, jedoch.

Erstens muss das YUI DataSource zurückkehren unveränderlichen Daten. Dies ist für die automatische lokale Datenquellen, aber kann tückisch sein, um für Remote-Datenquellen zu implementieren. Sie benötigen, um die Zeilen in der Datenbanktabelle für die Dauer der Bulk-Bearbeitung Betrieb zu sperren, wenn mehr als einem Benutzer erlaubt wird, sie zu ändern.

Zweitens wirkt sich die Wahl zwischen lokalen und Remote-Datenquelle wie Sie berechtigt sind, die Daten zu speichern. Wenn Sie eine lokale Datenquelle verwenden, können Sie Best-Effort-Einsparung, also tun, speichern Sie alle gültigen Datensätze an den Server, entfernen Sie sie aus dem lokalen Datenquelle, und erlauben dem Benutzer, auf die Datensätze, die ungültige Werte haben zu konzentrieren. Wenn Sie eine Remote-Datenquelle verwenden, die Unveränderlichkeit Anforderung können Sie nur alles oder nichts sparen, also tun, können die Daten nur dann gespeichert, nach all die Daten gültig werden.

Real-world Use Case

Die ursprüngliche Motivation für die Bulk-Editor Widget wurde auf die Nachbearbeitung einer hochgeladenen Tabellenkalkulation erlauben. Die Einführung eines Post-Prozessierungsschritt beseitigt die Notwendigkeit für die Tabelle Werte perfekt zu sein. Fehler können markiert und Festnetz in der Bulk-Widget-Editor statt Ablehnung des gesamten Upload. Darüber hinaus kann die Verarbeitung auf dem Server zu tun Best-Guess Zuweisung von zusätzlichen Werten für jeden Datensatz erforderlich, und der Benutzer kann überprüfen und beheben diese zusätzlichen Werte vor dem Speichern. Dies vereinfacht die erstmalige Erstellung der Tabelle.

In diesem Szenario ist eine Remote-Datenquelle die beste Wahl. Die hochgeladenen Daten werden in einer Scratch-Bereich gespeichert, und wird daher unveränderlich gewährleistet, da kein anderer Benutzer sie sehen kann. "Alles oder nichts" Sparen angemessen ist: Wenn alle Fehler wurden behoben, der Speichervorgang ist atomar, wie bei einem Standard-Upload-Vorgang.

Ü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!