Yahoo! User Interface Blog (YUIBlog)

Quick Edit-Modus für YUI 3 DataTable

Obwohl YUI 3 DataTable noch nicht über Inline-Editing von einzelnen Zellen, ist es relativ einfach, Quick Edit-Modus zu implementieren. Die QuickEdit Plugin für DataTable in die YUI 3 Galerie können alle sichtbaren Werte in einer DataTable bearbeitet werden gleichzeitig.

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

Überblick

Wie bei den YUI-2-Version , ist der Kerngedanke der Quick Edit-Modus zu tauschen alle die Zelle Formatierer durch neue, die die Zellen mit Formular-Elemente, z. B. Eingabefelder oder Dropdown-Listen zu füllen. Dies geschieht, wenn start() aufgerufen wird, basierend auf der Konfiguration beschrieben. Nachdem der Benutzer fertig ist, können Sie getChanges() , um die geänderten Werte zu bekommen und dann bleiben sie. Zum Verlassen des Quick Edit-Modus aufrufen cancel() . (Es ist benannt stornieren statt stoppen Sie daran erinnern, dass es alle Änderungen verworfen.)

Da die Quick Edit-Galerie-Modul ist ein Plugin für DataTable, müssen Sie es in Ihrem datatable Stecker, bevor Sie es verwenden können:

 my_table.plug (Y.Plugin.DataTableQuickEdit);

Dieser speichert das Plugin in den qe Mitglied der Datentabelle, so müssen Sie das Plugin-Funktionen wie folgt aufrufen:

 my_table.qe.start ();

Konfiguration

Quick Edit fügt zwei neue Konfiguration Attribute, um alle Spalten: quickEdit und qeFormatter .

Wenn eine Spalte der quickEdit Eigenschaft definiert ist, wird die Spalte bearbeitet werden in Quick Edit-Modus. So nehmen Sie alle Standardeinstellungen, können Sie einfach eingestellt quickEdit:true . Für mehr Kontrolle haben, können Sie ein Objekt übergeben mit folgenden Eigenschaften:

formatter

Die Zelle Formatter, die eine entsprechende Formularfeld machen wird: <input type="text">, <textarea> oder <select>. Standardmäßig wird die Zelle Formatierer Y.Plugin.QuickEdit.textFormatter ist für alle Zellen verwendet werden, um input-Elemente zu erzeugen. Um ein textarea -Element, konfigurieren Sie eine Spalte zur Verwendung Y.Plugin.QuickEdit.textareaFormatter statt.

validation

Validation-Konfiguration für jedes Feld in der Spalte.

css

CSS-Klassen kodieren grundlegende Validierungsregeln:

yiv-required

Der Wert muss nicht leer sein.

yiv-length:[x,y]

String muss mindestens x Zeichen und höchstens y Zeichen. Mindestens eine der x-und y müssen 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 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. Ansonsten rufen this.displayMessage(...) zu einer Fehleranzeige und dann return false.

msg

Eine Karte der Arten von Nachrichten, die angezeigt wird, wenn eine basische oder regex Gültigkeitsregel fehlschlägt. Die gültigen Typen sind: required , min_length , max_length , integer , decimal und regex . Es gibt keinen Standardwert für Typ regex , so müssen Sie eine Nachricht, wenn Sie einen regex Validierung konfigurieren. Die Standard-Fehlermeldungen für die anderen Arten sind in gespeicherten Y.FormManager.Strings (von Galerie-formmgr-css-Validierung ) 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 eine nicht-editierbare Spalte anders bei Quick Edit-Modus wiedergegeben werden. Das beste Beispiel ist eine Spalte mit einem Link, da die Navigation weg von der Seite, während in Quick Edit-Modus können verheerend sein. So entfernen Sie den Link in Quick Edit, konfigurieren qeFormatter für die Spalte zu Y.Plugin.QuickEdit.readonlyLinkFormatter . Für E-Mail-Adressen verwenden Y.Plugin.QuickEdit.readonlyEmailFormatter . Sie können auch schreiben Sie eigene, read-only-Formatierer. Folgen Sie einfach den normalen Regeln für den Aufbau einer DataTable Zelle Formatierer.

Fehlende Funktionen

Aufgrund eines Fehlers in YUI 3.3.0 DataTable , die td weitergegeben Element, um eine Spalte Formatter ist eigentlich aus der vorherigen Spalte. Dies machte es zu mühsam, notieren Sie unterstützen, wo eine Schaltfläche in der ersten Reihe können Sie kopieren Sie den Wert auf alle anderen Zeilen.

Der Bug auch eine komplette Überarbeitung der grundlegenden Quick Edit Zelle Formatierer erforderlich, um Text anstelle der Manipulation des DOM zurückkehren. Aus diesem Grund benutzerdefinierte Zelle Formatierer nicht offiziell in dieser ersten Version nicht unterstützt. Wenn Sie abenteuerlustig sind, können Sie dennoch bauen sie, aber bedenken Sie, dass Sie brauchen, um sie neu zu schreiben, einschließlich dem Hinzufügen von Unterstützung für abschreiben, wenn die Fehler in DataTable festgelegt ist.

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

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!