Yahoo! User Interface Blog (YUIBlog)

Fragen Sie Satyam: Row Expansion und Nested DataTables

Satyam (aka Daniel Barreiro) ist ein seit langem YUI Beitragszahler und einer der produktivsten, großzügige Experten in den Foren YUI . Er ist auch der Autor eines neuen Buches über YUI 2.8.0, 2.8.0 YUI: Erlernen der Bibliothek . Dieser Artikel im "Ask Satyam"-Serie war Santini vorgeschlagen von Alberto und Bryan Kane . Satyam wird die Beantwortung mehrere zusätzliche Fragen in den kommenden Wochen hier auf YUIBlog als Teil der Serie.

Es ist ein häufiges Problem in der Informations-Architektur: Sie haben tabellarische Daten, und Sie haben die Notwendigkeit, zusätzliche Informationen über das Unternehmen durch jede Zeile der Tabelle dargestellt anzuzeigen. Üblicherweise wird dies durch "Ausbau" die Zeile auf Mausklick oder Auswahl und Darstellung der Daten direkt unterhalb der gewählten Zeile erreicht. Manchmal kommt diese zusätzlichen Daten im Wege einer weiteren DataTable, die auch vielleicht seine Reihen erweiterbar in mehr verschachtelte Ebenen. Wir rufen die grundlegende Verwendung bei Drilldown in einer einzigen Zeile row Expansion, und wenn die Use Case beinhaltet weitere tabellarische Daten Zeile findet mit jedem, das Feature DataTable beschrieben als verschachtelt.

Bisher gab es die schon einige ernsthafte Versuche mit auf diese Funktionen unterstützen YUI 2 DataTable . DataTable eigene Liste von Beispielen enthält eine Reihe Expansion Beispiel von Eric Gelinas. John Lindal präsentierte seine Treeble in einem YUI Blog-Artikel vor einiger Zeit mit einer Version für YUI 3 in der Galerie. Ich habe auch versucht mit meinem NestedDataTable Projekt.

Keine dieser Lösungen ist völlig ausreichend und die Frage, neigt zu Rezidiven, ja, Leute fragten zwei für sie als Teil der Fragen Satyam -Serie. In diesem Artikel werde ich tauche wieder und entdecken Sie Strategien und Optionen für den Umgang mit der Zeile Expansion und verschachtelte DataTables.

Ein paar Punkte zu berücksichtigen

DataTable macht ein paar sehr grundlegende Annahmen. Einer ist, dass die Ordnungszahl Position eines Record Zeile entspricht der gleichen Ordnungszahl Position eines im <tbody> des Markups. Ich zähle 17 Vorkommen von Eigentum sectionRowIndex die eine gibt die Ordnungszahl von <tr> Element in seinem Abschnitt (das heißt, innerhalb der <tbody> , <thead> oder <tfoot> wo es enthalten ist). Es gibt auch viele Ereignisse, wo die Ordinalposition der Aufnahme als Index in das Array von Zeilen verwendet wird. Zum Beispiel in der Reihe Expansion Beispiel sei Ende ausführen, um die, erweitern jede Zeile etwa auf halbem Weg zum Tisch und führen Sie dann die folgenden beiden Aussagen in der Debug-Konsole:

  YAHOO.example.Basic.oDT.getTrEl (YAHOO.example.Basic.oDT.getRecord (17)). Id 

 YAHOO.example.Basic.oDT.get Weiter TREL (YAHOO.example.Basic.oDT.getRecord (17)). Id 

Beide zeigen yui-rec17 als die Antwort, die nicht korrekt ist seit der zweiten Reihe neben Anweisung zurückgeben sollte die ID des. Wenn Sie das gleiche tun, ohne Zeilen erweitert oder mit einer geringen Anzahl, bevor die erweiterte Reihe, zweite Erklärung wird die Rückkehr richtig yui-rec18 .

Offensichtlich aufgeführten Beispiele funktionieren alle in ihrer Grundform, die "Fehler" genannten Beträge zu einem Trick gezeigt. Wenn Ihre Anwendung bleibt innerhalb sicherer Grenzen, sind Sie fein. Allerdings hat eine Funktion, um Ihre Bewerbung zu einem späteren Zeitpunkt, eine, die tiefer Annahmen darüber, wie die DataTable's Einbauten Betrieb macht, kann zu einigen Problemen führen. (Für was es wert ist, ist DataTable sehr robust. Seine integrierte Funktionalität ist ziemlich sicher, bearbeitet es allerlei Spalten, Zellen auswählt und hebt feine, soweit ich es getestet. Ich war nicht in der Lage, seine populärste gebaut Pause -in Funktionen.)

Nesting Strukturen innerhalb der DataTable lädt auch einige andere Komplikationen: Durch einen Klick irgendwo in einem erweiterten benutzerdefinierten Zeile könnte problematisch sein, da die Klicken Sie auf das verschachtelte Element würde Blase bis zu den mit DataTable wo sie durcheinander zu bringen. Sie müssen bedenken, diesen Punkt beim Hören von Veranstaltungen wie cellClickEvent auf der übergeordneten Tabelle seit der Zielzelle berichtet könnte nicht einen gehören zu der übergeordneten Tabelle, sondern auf eine verschachtelte - so holen Sie die Record oder Spalte für die Zelle möglicherweise fehl.

Schließlich gibt es einige konzeptionelle Fragen. Was bedeutet getNextTrEl bedeuten? Ist es auch nur DataTable eigenen Reihen (nennen wir sie Datenzeilen), oder sollte es gehören benutzerdefinierte Zeilen später hinzugefügt, wie es jetzt tut? Ich würde sagen, es sollte nur Datenzeilen seit dem benutzerdefinierten Zeilen, wobei verschachtelt sind nicht Geschwister, um die Daten Zeilen, aber Kinder, und obwohl das HTML-Markup zwingt uns dazu einfach nutzen <TR> Elementen, konzeptionell, sind sie nicht Geschwister. Dann, wenn Sie irgendwie erreichen <TR> Element und fragen Sie nach dem entsprechenden Datensatz in der DataTable enthalten mit der Methode getRecord() , wenn das <TR> ist eine benutzerdefinierte Zeile, was Record entsprechenden wäre seine: null (da es doesn ' t gehören zu den mit DataTable, sondern auf die verschachtelten eins) oder der Aufzeichnung der Datenreihe ist es ein Kind?

Wie wollen Sie die Streifen auf den Zeilen? Derzeit nimmt der Logik Striping gerade und ungerade Zeilen wahllos, ob Datenzeilen oder benutzerdefinierte Reihen, aber vielleicht möchten Sie die benutzerdefinierte Reihen auf der gleichen Hintergrundfarbe wie die Datenzeile zu denen sie gehören zu tragen.

Dies sind einige der Aspekte der Zeile-Erweiterung Funktionalität, die Definition benötigen, eine Entscheidung über sie, solange ist es konsequent und vorhersehbar, würde wahrscheinlich Platz für die meisten Anwendungsfälle.

Schachteln ohne DataTable

Natürlich könnten wir mit diesen Einschränkungen leben, aber was ist dann der Punkt zu belästigen mit dem DataTable überhaupt? Wenn alles, was Sie wollen, ist, bilden sie sich einige verschachtelte Informationen in tabellarischer, können Sie einfach einen regulären <table> Element oder etwas Ähnliches. In der Tat, die YUI 3-Version von Treeble ( zB der Fall ist) genau, dass, da es noch keine YUI 3-Version von DataTable zu werden, verwendet es nutzt gar nichts. Genauso gut könnte man tun, ganz gleich, was mit YUI 2, wie in diesem Beispiel , wo keine DataTable noch HTML <table> alle an verwendet wurde. Zugegeben, das Beispiel sehr einfach und optisch hässlich (Ich habe nie behauptet, sein künstlerisches), aber, wenn es das ist alles, was Sie für Pflege, du wenigstens wird es nicht scheitern Sie wissen. Nur eine Idee möchten Sie vielleicht zu bewerten, wenn Sie entscheiden, was zu tun.

Row Erweiterung mit DataTable

Schließlich können Sie wirklich wollen, eine DataTable verwenden. Wenn ja, wie gehen wir davon? Beide Treeble und meine eigene NestedDataTable Nest zwei DataTables. Eric Gelinas hingegen hat ein anderes Konzept, das finde ich flexibler eingesetzt. Er macht keine Annahmen über die Vorgänge in den Ausbau werden. Es verwendet eine rowExpansionTemplate Konfiguration Attribut Funktion einen kann entweder ein String-Vorlage oder ein Verweis auf. Der String Vorlage über verarbeitete YAHOO.lang.substitute zusammen mit den Daten aus dem Record-Objekt für die Zeile über ausgebaut werden. Wir wissen bereits, dass wir nicht brauchen, um in der Spalte Definitionen Array definieren wir alle Felder mit der DataSource gelesen haben, wir können zusätzliche Felder DataSource in die Reserve für den späteren Gebrauch aufbewahren. Die Template-Mechanismus lässt uns Anzeige in den Ausbau Zeile die anderen Bereiche, für die wir nicht haben Platz in der regulären Reihe. Das Beispiel listet Bildnamen von Flickr, Bilder, die DataTable könnte zu groß sein Haupt zu zeigen, in der. Die Felder zu montieren die URL, die auf diesen Bildern sind von Anfang an belastet. Nach Zeile Expansion Bits sind jene einer antistatischen zusammen gebaut <img> Begriffe und die Vorschau für das Bild Zeile dargestellt in den Ausbau.

Nun, wenn wir setzen rowExpansionTemplate zu einer Funktionsreferenz, dann bekommen wir alle die Flexibilität, die wir möglicherweise möchten. Früher habe ich diese Idee in diesem Beispiel , aber mit einem etwas anderen rowexpansion.js Datei. Das Original wurde mehr über die Verwendung der String-Vorlage konzentriert und davon ausgegangen, dass der Ausbau Zeile zerstört werden könnte und umgebaut jederzeit ohne Kosten. Das ist nicht der Fall, wenn die Expansion etwas komplizierter ist, wie eine DataTable mit weiteren DataTables verschachtelt. Jedes Mal, wenn eine Spalte sortiert ist, wird DataTable löschen Sie alle Zeilen und neu anzufangen, das wäre enorm teuer mit komplexem Inhalt, wenn sie gelöscht werden und wurde rekonstruiert. Statt dessen, was ich tue, ist zu rudern halten einen Verweis auf die Expansion in den Ausbau staatlicher Objekt (siehe Beschreibung in Methode getExpansionState ), die Tabelle parent ist gespeichert in der Aufzeichnung der. Diese Daten werden nicht gelöscht, und als Ergebnis ist es viel effizienter, in derselben Zeile, wenn die übergeordnete Zeile ist neu gerendert wiederherzustellen.

Manchmal jedoch wird die übergeordneten Zeilen absichtlich gelöscht werden oder die Eltern DataTable aus der Server mit möglicherweise unterschiedlichen Daten, die die Kinder aktualisiert werden muss nachgeladen. Ich muss explizit löschen die untergeordneten Zeilen in solchen Fällen, weil sie sonst in der Erinnerung als Zombies bleiben würde. So überschreiben ich mehrere Methoden ( deleteRow , deleteRows , initializeTable , destroy ) und löschen Sie die verschachtelte Inhalte, bevor seine Eltern Datensatz wurde gelöscht. Löschen ist jedoch nicht genug, da der Inhalt könnte etwas aufwändigere Maßnahmen zur Beseitigung müssen. Wie bei vielen komplexen Komponenten, hat ein DataTable destroy Methode, welche Ereignisse Bedürfnisse findet in Anspruch genommen werden, um ganz klar die Instanz und ihre. Ich habe die rowExpansionDestroyEvent Ereignis zu signalisieren, dass die verschachtelte Zeile zerstört wird über sein, so dass der Entwickler zum Inhalt der Griff nach Bedarf. Zum Beispiel:

  albumDT.on ('rowExpansionDestroyEvent', function (state) ( 

     . Zustand [NESTED_DT] destroy (); 

 )); 

Alle Veranstaltungen erhalten die state Aufgabe als einziges Argument. Hier verwende ich den Verweis auf die verschachtelten DataTable, die ich (gespeichert unter den Namen einer Eigenschaft meiner eigenen NESTED_DT ) und nennen ihre destroy Methode.

RowExpansionDataTable fügt die Spalte, Zeile Erweiterung löst automatisch und hört auch auf Klicks auf diese Spalte. Sie müssen nicht alles tun für diese Spalte zu zeigen, und aktiv sein. Es ist immer fügt es auf der linken Seite mit Hilfe von diesem einfachen Code im Konstruktor:

  var REDT = function (elContainer, aColumnDefs, oDataSource, oConfigs) ( 

  aColumnDefs.unshift (( 

           Schlüssel: ROW_EXPANSION, 

           Label: ", 

           className: CLASS_TRIGGER 

      )); 

      REDT.superclass.constructor.call (this, elContainer, aColumnDefs, oDataSource, oConfigs); 

 ); 
  YAHOO.widget.RowExpansionDataTable = REDT; 

RowExpansionDataTable setzt auch ein Listener für cellClickEvent und prüft, ob die Spalte geklickt wird das mit seinem Schlüssel auf den Wert konstant gespeichert ROW_EXPANSION , es gibt keine Notwendigkeit für uns zu einem Event zu reagieren, dass wir zwar wünschen kann die Einrichtung weiterer Hörer für unsere eigenen Zwecke auf anderen Spalten.

Obwohl die Grundlage meiner rowexpansion.js Datei ist Eric Gelinas Arbeit, es gibt auch viele Unterschiede. Ich änderte viele der Variablen, Methoden und Eigenschaften Bezeichnungen von entsprechen der Norm Namenskonventionen und fest genug gekennzeichnet Fehler JSLint . In ihrer Grundlagen, jedoch wird der Code noch Eric's.

Das Beispiel ist gut kommentiert und beschrieben, nachdem die Probe Tabelle, die rowexpansion.js Datei ist einfach zu folgen und seine API Docs sind ebenfalls erhältlich.

Überlagern Kinder

Eine weitere Alternative zum Hinzufügen von Zeilen ist es, die Expansion über die übergeordnete Zeile zu schweben. Ich habe selbst verwendet in meinem NestedDataTable Beispiel . Dieses Beispiel nutzt auch YQL Tabellen über YQLDataSource und, wie ich die erwähnten früheren Artikel , YQL Künstler Suche Tabelle ist die etwas ungeschickt zu bedienen zusammen mit YUI 2 AutoVervollständigen da es nicht zurück bringen teilweise Übereinstimmungen mit Künstlernamen.

Hier, wenn Sie Zeile erweitern Sie ein, einen Container <div> wird erstellt und im Anhang zum Hauptteil des Dokuments. Der Behälter verwendet absolute Positionierung und bewegt Überlappung der Zeile direkt unter dem zu erweitert. Der Behälter deckt damit den Reihen neben dem zu so erweitert, ist die Höhe dieser Zeile erhöht werden, um Platz für die überlappende Behälter zu machen.

Dieser Mechanismus erspart uns von den beiden Fragen, die ich bereits erwähnt: keine Zeile der DataTable, die Ordnungszahl Positionen der Rekorde und Zeilen angefügt passen zu allen Zeiten und Ereignisse können nicht Blase aus den Behältern auf die DataTable, da sie nicht sind Nachfahren der DataTable. Jedoch kann die Position der Behälter erfordert Aufmerksamkeit auf einige Ereignisse und ihre Position neu zu berechnen. Sortieren der Haupttabelle mit mehreren Kindern öffnet alle Container zu ihren neuen Positionen bewegen sich mit Leichtigkeit, und so wird die Größe des Browser-Fensters.

Dieses Beispiel nutzt nur zwei Ebenen der Verschachtelung, während die RowExpansionDataTable Beispiel keine Grenzen gesetzt werden könnten ausgebaut. Ich habe versucht, beides zu verbinden und ich sehe keinen theoretischen Grund, warum es nicht gelingen würde, aber bei dem Versuch, dies zu tun fand ich das Beispiel war so komplex, dass es schwer in einem Blog-Artikel von angemessener Größe beschreibt. Das Beispiel, wie es ist, hat die vollständige Kontrolle über die Eltern-Kind-Tabellen, weiß, wann sie oder erweitern Vertrag, verschieben, neu gezeichnet bekommen oder ändern in anderer Weise, und kann leicht der Zugang zu ihnen und stellen ihre Layout. Bei dem Versuch, diese zu einer beliebigen Anzahl von Ebenen erstrecken, fand ich, dass die Kommunikation all jene Veränderungen nach oben und unten der Hierarchie der verschachtelten Komponenten, die nicht alle von ihnen unbedingt DataTables war hart, mit den Veränderungen tief in einem Zweig eventuell beeinflussen verschachtelte Komponenten auf andere Branchen .

Die Komplexität liegt nicht so sehr bei der Vermittlung dieser Veränderungen auf und ab und auf sie einwirkenden wie bei dem Versuch, Standard-Schnittstellen für generische untergeordnete Elemente zur Teilnahme bieten. Wenn Sie die volle Kontrolle über mehrere Behälter und deren Inhalt haben, sollte es zu handhaben sein, aber es wäre nur dann sinnvoll, dies zu tun, wenn die RowExpansionDataTable nicht in einer bestimmten Anwendung, wie ich es kann zugeben, und kann nicht einfach festgelegt werden.

Fazit

Sie müssen nicht immer echte DataTables Tabellen ineinander verschachtelt sind, aber wenn Sie wollen, ist mein RowExpansionDataTable eine gute Wahl, nicht nur ein gutes Beispiel, wie man verlängern DataTable. Es hat einige Probleme, die ich beschrieben, so dass, wenn Sie stoßen sie Sie, wo Sie suchen, wie Sie diese umgehen wissen. DataTable selbst ist erstaunlich robust und Griffe selbst ganz gut. Überlappende Inhalt in der DataTable ist auch eine mögliche Lösung, wenn Signalisierung der Veränderungen in Größe und Lage der Kinder effizient gelöst werden kann, obwohl es schwer ist, in einer generischen Komponente zu tun - und ich habe nicht versucht, dies hier tun. Weder habe ich versucht eine Version Erben von ScrollingDataTable, es ist nicht so, dass ich vergaß, sondern dass ich weiß, es ist kein triviales Unterfangen.

Finden Gespräche: Bloglines | technorati

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