YUI ist YAHOOs mächtige Javascript-Komponentensammlung für Web-Anwendungen. Die DataTable-Komponente ist ein Widget, mit dem Daten in Tabellen dargestellt und bearbeitet werden können. Rene Schmidt zeigt an einem mitgelieferten Beispielskript, wie man Mehrfachselektionen auf einfache Weise realisiert.
Das Yahoo-User-Interface (kurz: YUI) ist eine Javascript-Bibliothek, mit der asynchrone Web-Anwendungen zügig entwickelt werden können. Das YUI-Archiv bringt sehr viele praktische Beispiele für die Verwendung mit, so dass die Lernkurve schnell erklommen werden kann.
Allerdings sind auch einige weniger praktische Beispiele dabei. Ein Beispiel ist das Skript dt_formatting_source.html, mit dem die Möglichkeiten zur Formatierung von DataTable-Zellen demonstriert wird. In der verwendeten Tabelle sind Checkboxen, Radio-Felder und Buttons eingebaut, die sich unterschiedlich verhalten. Im Fall der Checkboxen ist das Verhalten allerdings eher sinnfrei. Klickt man eine Checkbox an, wird zwar ein Häkchen gemacht, was man aber nun weiter damit anfangen soll, wird nicht demonstriert. Außerdem „vergessen“ die Checkboxen ihren Zustand, sobald die Tabelle neu sortiert wird. An eine vernünftig benutzbare Mehrfachselektion ist mit diesem Checkbox-Verhalten jedenfalls nicht zu denken.
Das Verhalten der Checkboxen ist nicht sinnvoll
Event-Handler erweitern
Aber das muss ja nicht so bleiben. Erweitern wir also das Skript. Sie finden es, nachdem Sie das YUI-Archiv entpackt haben, im Verzeichnis „examples/datatable/dt_formatting_source.html“. Vorweg: DataTable-Elemente werden hier über bestimmte Events (engl. „Ereignisse“) mit Event-Handlern verknüpft. Event-Handler sind einfach Funktionen oder Objektmethoden. Die Klasse „DataTable“ bietet einen fertigen Event namens „checkboxClickEvent“ an. Der wird, wie der Name andeutet, abgearbeitet, wenn eine Checkbox angeklickt wird. Im Beispielskript ist bereits eine Methode enthalten, die mit diesem Ereignis verknüpft ist:
Der originale checkBoxClickEvent-Handler
Der Event-Handler liest das Feld „field5“ aus und zeigt in einem alert() an, welchen Inhalt das Feld und welchen Status die Checkbox hat. Hier wird auch schon eine Besonderheit von DataTable deutlich: Hinter der Darstellung von Informationen als HTML-Tabelle und Tabellenzellen verbirgt sich eine Datenstruktur, aus der die Daten kommen. Das heißt, das was dargestellt wird, muss sich nicht mit der dahinter stehenden Datenstruktur decken. Im Beispiel ist es so, dass die Checkbox zwar in der Tabelle dargestellt wird und ihr Zustand ausgelesen werden kann – allerdings gibt es keine Entsprechung der Checkbox in der Datenstruktur. Das ist auch der Grund dafür, dass nach einem Sortieren die Checkbox-Zustände verloren gehen. Sortiert wird nämlich nicht die Tabelle selbst, sondern die Datenstruktur. Die Tabelle wird nach dem Sortieren neu aufgebaut. Und weil der Zustand der Checkboxen dann wieder unbekannt ist, erhalten die Checkboxen keinen Haken.
Checkbox-Zustand speichern
Wir müssen also der Datenstruktur „mitteilen“, dass es auch den Zustand der Checkboxen speichern soll. Den Event-Handler erweitern wir wie folgt:
Der neue checkBoxClickEvent-Handler
Die Erweiterung macht Folgendes: Der Datensatz (engl. „Record“) der angeklickten Zeile wird ausgelesen und im Objekt „upd“ gespeichert (Zeile 125). Dann greifen wir einfach auf ein Objektattribut namens „cbState“ („Checkbox-Status“) zu. Wenn es bisher nicht existiert hat, wird es angelegt und diesem der Wert „true“ zugewiesen (daran denken: die Checkbox wurde gerade angeklickt, wenn der Event-Handler aufgerufen wird). Falls es schon existiert hat, bekommt es den entgegengesetzten Wert, der schon darin gespeichert war, also „false“ statt „true“ oder umgekehrt (Zeile 126). In Zeile 127 aktualisieren wir den alten Datensatz mit neuen Daten aus „upd“.
Die drei Zeilen kann man auch einfach durch eine einzige Zeile ersetzen, wie in Zeile 130 zu sehen. Dort wird direkt auf die Objektvariable „_oData“ zugegriffen. Allerdings ist das „getrickst“. Der Unterstrich in „_oData“ deutet es bereits an: „oData“ ist eine als privat deklarierte Variable, die nicht von außen manipuliert werden soll. Es ist nicht sicher, dass diese Vorgehensweise in späteren Versionen noch funktionieren wird, daher sollte man eigentlich nicht auf private Attribute zugreifen, schon gar nicht schreibend.
Checkbox-Zustand wieder auslesen
Wenn man das Skript jetzt ausführt, einige Checkboxen markiert und die Tabelle neu sortiert, ist noch kein anderes Verhalten erkennbar, obwohl doch die Checkbox-Zustände in der Datenstruktur gespeichert sind. Um das anschaulich zu prüfen, können Sie das Firefox-Plugin FireBug benutzen. Eine Alternative wäre, der Spaltendefinition „myColumnDefs“ das neue Attribut „cbState“ hinzuzufügen:
Zum Testen die Spalte cbState anlegen
Wenn Sie das Skript nun ausführen, einige Checkboxen markieren und die Tabelle sortieren, steht in der Spalte „cbState“ der Zustand der Checkboxen. Diese Spalte ist aber nicht notwendig für die Funktion und kann wieder entfernt werden. Was nun noch fehlt, ist die Restaurierung der Checkbox-Zustände nach dem Sortieren. Das erledigt ein neuer Event-Handler:
Unser neuer columnSortEvent-Handler
Die Methode ist mit dem DataTable-Ereignis „columnSortEvent“, also dem Sortier-Ereignis, verbunden. In der For-Schleife wird von hinten durch alle Datensätze iteriert. Das Iterieren von hinten ist bei DataTable besser, insbesondere beim Löschen von Datensätzen. Wird ein Datensatz gelöscht, werden die Indizes der Datenstruktur nicht aktualisiert, so dass es dann beim Vorwärts-Durchlaufen der Struktur zu Fehlzugriffen auf nicht existente Datensätze kommen kann. Bei jedem Durchlauf wird für jeden Datensatz geprüft, ob „cbState“ den boolschen Wert „true“ besitzt. Ist das der Fall, wird ein Häkchen gemacht. Wenn nicht, dann nicht.
Die Checkboxen treten in Aktion
Jetzt werden die Checkbox-Zustände gespeichert und nach dem Sortieren wieder hergestellt. Das ist näher an der Praxis, aber machen kann man so noch nichts. Was jetzt fehlt, ist eine Aktion, die anschaulich demonstriert, wie man die selektierten Datensätze erfasst und verarbeiten kann.
Dazu fügen Sie irgendwo im HTML einen Schaltknopf ein:
<button name="testknopf" id="testknopf"
type="button">Test</button>
Die Objektreferenz auf das HTML-Element holen wir mit „YAHOO.util.Dom.get(„testknopf“)“. Wir verbinden es mit dem generischen Event-Handler „click“, der erstaunlicherweise ausgeführt wird, wenn auf den Knopf geklickt wird:
Horchen, ob jemand den Knopf drückt
Es wird wieder rückwärts iteriert und alle Werte in „field5“ angezeigt, die selektiert wurden. Das so veränderte Beispiel sollte nun ein gutes Sprungbrett für eigene Versuche sein. Für die Radio-Felder gilt im Übrigen das Gleiche wie für die Checkboxen.
So ists besser
Dies ist nur eine von vielen Möglichkeiten, DataTable vernünftige Checkboxen zu verpassen. Haben Sie eine andere, bessere, schnellere Lösung? Schreiben Sie eine Nachricht, die besten Lösungen stellen wir gerne vor.
Kleiner Exkurs zum Schluss
Ein interessanter und eigentlich auch naheliegender Ansatz für Mehrfachselektion in DataTable-Widgets zeigt das Beispiel dt_rowselect.html. Die Selektion wird in diesem Beispiel allerdings nicht über Checkboxen realisiert, sondern über die Tastatur und Maus: Bei einem Klick auf einen Datensatz muss die STRG-Taste gedrückt werden, um mehrfach zu selektieren. Dieser Ansatz ist allerdings nicht intuitiv oder leicht verständlich, insbesondere für Anfänger. Ein weiterer Stolperstein ist die DataTable-Methode „isSelected()“. Sie soll Record-Indizes, HTML-Elemente oder Record-Referenzen annehmen können und feststellen, ob sie selektiert sind oder nicht. Die Methode funktioniert allerdings nicht korrekt, sie liefert in vielen Fällen einfach garnichts zurück oder wird überhaupt nicht ausgeführt. Außerdem wird die Selektion intern über gesetzte oder nicht gesetzte Stylesheet-Klassen festgestellt, was offensichtlich ein Missbrauch dieser Technik ist. CSS ist nicht dazu gedacht, Programmlogik abzubilden, sondern dient nur der Gestaltung. Insofern erscheint dieses vorgegebene Modell der Mehrfachselektion derzeit nicht so naheliegend wie es eigentlich sein sollte. ™
Links zum Artikel:
- developer.yahoo.com/yui (engl.)
- DataTable-Customformatting-Beispiel (engl.)
- Erweitertes Beispiel zum Herunterladen (2 Kb)
