Yahoo! User Interface Blog (YUIBlog)

Quick Edit-Modus für YUI 2 DataTable

YUI 2 DataTable liefert glatt Inline-Editing. Wenn disableBtns drehte Konfiguration wird auf der Spalte, einfache Werte wie Strings oder Zahlen fühlt Bearbeitung wie Excel. Allerdings kann die Erfahrung nicht so reagieren, wie eine Desktop-Anwendung, da jede Änderung erfordert normalerweise eine XHR Aufruf an den Server zu speichern (oder ablehnen!) Den neuen Wert. Wenn der Benutzer braucht, um viele der angezeigten Werte ändern, kann es eine langsame und frustrierende Erfahrung sein. Um das zu lösen, entwickelte ich QuickEditDataTable. Dieser erstreckt sich DataTable zu Quick-Edit-Modus hinzufügen, die den Betrieb ermöglicht allen editierbare Werte Bulk man verändert werden:

( Klicken Sie auf den Screenshot, um zB spielen mit diesem .)

Übersicht

Um Quick-Edit-Modus aufrufen startQuickEdit() . Zum Verlassen des Quick-Edit-Modus aufrufen cancelQuickEdit() .

Es ist Ihre Verantwortung zu fordern speichern Sie die Änderungen vor cancelQuickEdit() . Um dies zu vereinfachen, bietet QuickEditDataTable getQuickEditChanges() . Dies gibt ein Array von Objekten, eines für jede Zeile. Jedes Objekt enthält nur die Werte, die in dieser Zeile geändert wurden, aus der Säule id's Erläuterungstext. Zum Beispiel, wenn die Tabelle 4 Spalten (Titel, Autor, Jahr, Menge), und der Benutzer nur verändert die Menge in einer Reihe auf 20, dann das Objekt für diese Zeile wäre {quantity:20} . Die anderen Werte würde entfallen.

QuickEditDataTable leicht erweitern YAHOO.widget.ScrollingDataTable , wenn Sie diese Funktionen benötigen, die. Wenn Sie diese benötigen, machen Sie einfach eine Kopie der Quelldatei und ändern Sie die Basisklasse.

Konfiguration

Quick Edit ist ein modales Zustand, in dem die Zelle Formatierer für editierbare Spalten heraus und ersetzt werden vertauscht mit speziellen Formatierer dass generieren input , textarea , oder select Elemente. Nur Spalten, die quickEdit Konfiguration bearbeitet werden können. Die Konfigurationsmöglichkeiten sind:

copyDown

Wenn das stimmt, wird die oberste Zelle in der Spalte eine Schaltfläche, um den Wert bis auf den Rest der Zeilen zu kopieren.

formatter

Die Zelle Formatierer, die eine entsprechende Formularfeld machen wird: <input type="text">, <textarea> oder <select>. Standardmäßig wird die Zelle Formatierer YAHOO.widget.QuickEditDataTable.textQuickEditFormatter ist für alle Zellen verwendet, um Elemente zu erzeugen Eingang. Um ein textarea -Element, konfigurieren Sie eine Spalte zu verwenden YAHOO.widget.QuickEditDataTable.textareaQuickEditFormatter statt. Sie können auch eine benutzerdefinierte Quick Edit Formatierer - siehe unten.

validation

Validation Konfiguration für jedes Feld in der Spalte.

css

CSS-Klassen-Codierung grundlegende Validierung Regeln:

yiv-required

Der Wert muss nicht leer sein.

yiv-length:[x,y]

String muss mindestens x Zeichen und höchstens y Zeichen. Mindestens eine von x und y angegeben werden.

yiv-integer:[x,y]

Der ganzzahlige Wert muss mindestens x und maximal y . x und y sind beide optional.

yiv-decimal:[x,y]

Der Dezimalwert muss mindestens sein bei x und maximal y . Exponenten sind nicht erlaubt. x und y sind beide optional.

fn

Eine Funktion, mit der DataTable als die Tragweite und die Zelle bilden Element als Argument aufgerufen wird. Gibt true zurück, wenn der Wert gültig ist. Andernfalls nennen this.displayQuickEditMessage(...) Irrtum zeigen eine und dann wieder falsch.

msg

Eine Karte der Arten von Nachrichten, die angezeigt wird, wenn ein Grund-oder regex Gültigkeitsregel fehlschlägt wird. Die gültigen Typen sind: required , min_length , max_length , integer , decimal , und regex . Es gibt keinen Standard für Typ regex , so müssen Sie angeben, eine Nachricht, wenn Sie konfigurieren Validierung eines regex. Die Standard-Fehlermeldungen für die anderen Arten sind in gespeicherten YAHOO.widget.QuickEditDataTable.Strings und kann überschrieben werden und / oder lokalisiert.

regex

Regulärer Ausdruck, dass der Wert erfüllen müssen, um als gültig angesehen werden.

Manchmal muss einem nicht bearbeitbaren Spalte anders gerendert werden während Quick Edit-Modus. Das beste Beispiel ist eine Spalte mit einem Link, da die Navigation weg von der Seite, während im Quick-Edit-Modus können verheerend sein. So entfernen Sie den Link bei Quick Edit, konfigurieren qeFormatter für die Spalte zu sein YAHOO.widget.QuickEditDataTable.readonlyLinkQuickEditFormatter . Für E-Mails verwenden YAHOO.widget.QuickEditDataTable.readonlyEmailQuickEditFormatter . Sie können auch schreiben Sie eigene, Nur-Lese-Formatierer. Folgen Sie einfach den normalen Regeln für den Bau einer DataTable Zelle Formatierer.

Custom Quick Edit Formatierer

So schreiben Sie eine benutzerdefinierte Formatierung von Zelle QuickEdit Modus müssen Sie die Struktur-Funktion wie folgt:

 Funktion myQuickEditFormatter (el, oRecord, oColumn, oData) {
   var Markup =
     "<input Type="text" class="{yiv} yui-quick-edit yui-quick-edit-key:{key}"/> '+
     YAHOO.widget.QuickEditDataTable.MARKUP_QE_ERROR_DISPLAY;
     el.innerHTML = lang.substitute (Markup, {
       Schlüssel: oColumn.key,
       Yiv: oColumn.quickEdit.validation?  (OColumn.quickEdit.validation.css | |''):''
     });
     el.firstChild.value = extractMyEditableValue (oData);
     YAHOO.widget.QuickEditDataTable.copyDownFormatter.apply (this, Argumente);
 };

Sie können textarea oder select statt input , aber Sie können nur ein einziges Feld.

extractMyEditableValue() nicht funktionieren kann eine separate noch muss es sein, beschränkt auf die Verwendung nur oData . Die Arbeit sollte in der Regel getan inline in der Formatierer Funktion, sondern den Namen der Probe-Funktion macht den Punkt klar.

Über den Autor: John Lindal ( @ jafl5272 auf Twitter) ist einer der führenden Ingenieure konstruieren die Grundlage für die Yahoo! APT wird gebaut. Zuvor arbeitete er an der Yahoo! Publisher Network.

Finden Gespräche: Bloglines | technorati

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