Visualisierung: Tabelle

Wird die Richtlinie auf „true“ gesetzt, werden formatierte Werte von Zellen, die HTML-Tags enthalten, als HTML gerendert. Wenn die Richtlinie auf „false“ gesetzt ist, funktionieren die meisten benutzerdefinierten Formatierer nicht richtig.

Bestimmt, ob ungeraden und geraden Zeilen ein abwechselnder Farbstil zugewiesen wird.

Ein Objekt, in dem jeder Attributname ein Tabellenelement beschreibt und der Attributwert ein String ist, mit dem eine Klasse definiert wird, die diesem Tabellenelement zugewiesen werden soll. Mit dieser Eigenschaft weisen Sie bestimmten Elementen Ihrer Tabelle benutzerdefinierten CSS-Code zu. Weisen Sie zur Verwendung dieses Attributs ein Objekt zu, wobei der Attributname das Tabellenelement angibt und der Attributwert ein String ist, der einen Klassennamen angibt, der diesem Element zugewiesen werden soll. Anschließend müssen Sie einen CSS-Stil für diese Klasse auf Ihrer Seite definieren. Die folgenden Attributnamen werden unterstützt:

• headerRow: Weist der Kopfzeile der Tabelle einen Klassennamen zu (<tr>-Element).
• tableRow: Weist den Nicht-Header-Zeilen einen Klassennamen zu (<tr>-Elemente).
• oddTableRow: Weist ungeraden Tabellenzeilen (<tr>-Elemente) einen Klassennamen zu. Hinweis:Die Option „alternatingRowStyle“ muss auf „true“ festgelegt sein.
• selectedTableRow: Weist der ausgewählten Tabellenzeile (<tr>-Element) einen Klassennamen zu.
• hoverTableRow: Weist der Tabellenzeile, auf die der Mauszeiger bewegt wird (<tr>-Element), einen Klassennamen zu.
• headerCell: Weist allen Zellen in der Kopfzeile (<td>-Element) einen Klassennamen zu.
• tableCell: Weist allen Tabellenzellen ohne Header einen Klassennamen zu (<td>-Element).
• rowNumberCell: Weist den Zellen in der Spalte mit der Zeilennummer (<td>-Element) einen Klassennamen zu. Hinweis:Die Option „showRowNumber“ muss auf „true“ festgelegt sein.

Beispiel: var cssClassNames = {headerRow: 'bigAndBoldClass',
hoverTableRow: 'highlightClass'};

Hinweis:In CSS überschreiben einige Elemente andere. Wenn Sie beispielsweise eine Hintergrundfarbe für ein <tr>- und ein <td>-Element angeben, hat letztere Vorrang vor der ersten. Gib alle relevanten CSS-Stile in cssClassNames an, um Konflikte zu vermeiden.

Die Zeilennummer der ersten Zeile in der dataTable. Wird nur verwendet, wenn showRowNumber „wahr“ ist.

Die Anzahl der Spalten von links, die fixiert werden. Diese Spalten bleiben an ihrer Position, wenn horizontal durch die verbleibenden Spalten gescrollt wird. Wenn showRowNumber auf false gesetzt ist, sieht die Festlegung von frozenColumns auf 0 so aus wie bei der Einstellung null. Wenn showRowNumber jedoch auf true gesetzt ist, ist die Spalte mit der Zeilennummer fixiert.

Legt die Höhe des Containerelements der Visualisierung fest. Sie können Standard-HTML-Einheiten verwenden (z. B. „100 px“, „80 em“, „60“). Wenn keine Einheiten angegeben sind, wird angenommen, dass Pixel eine Zahl sind. Wenn Sie nichts angeben, passt der Browser die Höhe automatisch an die Tabelle an, wobei die Größe dabei so weit wie möglich verkleinert wird. Wird sie kleiner als die erforderliche Höhe, wird in der Tabelle eine vertikale Bildlaufleiste hinzugefügt. Die Kopfzeile ist ebenfalls fixiert. Bei der Einstellung „100 %“ wird die Tabelle so weit wie möglich in das Containerelement maximiert.

Ob und wie das Durchblättern der Daten aktiviert werden kann Wählen Sie einen der folgenden Stringwerte aus:

• „enable“: Die Tabelle enthält die Schaltflächen „Seite vor“ und „Zurück“. Wenn Sie auf diese Schaltflächen klicken, wird der Paging-Vorgang ausgeführt und die angezeigte Seite geändert. Sie können auch die Option „pageSize“ festlegen.
• „event“ – Die Tabelle enthält die Schaltflächen „Seite vor“ und „Seite zurück“. Wenn Sie darauf klicken, wird jedoch ein Ereignis vom Typ „Seite“ ausgelöst und die angezeigte Seite nicht geändert. Diese Option sollte verwendet werden, wenn im Code eine eigene Logik für den Seitenwechsel implementiert ist. Ein Beispiel für die manuelle Verarbeitung von Paging-Ereignissen finden Sie im TableQueryWrapper-Beispiel.
• „disable“ – [Standard] Paging wird nicht unterstützt.
Typ: String
Standardeinstellung: „disable“

Die Anzahl der Zeilen pro Seite, wenn Paging mit der Seitenoption aktiviert ist.

Legt eine bestimmte Option für die Seitenschaltflächen fest. Es gibt folgende Optionen:

• „Beide“: die Schaltflächen „Zurück“ und „Weiter“ werden aktiviert.
• „Zurück“: Nur die Schaltfläche „Zurück“ ist aktiviert.
• „Weiter“ – nur die Schaltfläche „Weiter“ ist aktiviert.
• "auto" - die Schaltflächen werden entsprechend der aktuellen Seite aktiviert. Auf der ersten Seite wird nur die nächste angezeigt. Auf der letzten Seite wird nur die vorherige Seite angezeigt. Andernfalls sind beide aktiviert.
• number - die Anzahl der Seitenschaltflächen, die angezeigt werden sollen. Diese explizite Zahl überschreibt die aus „pageSize“ berechnete Zahl.

Bietet grundlegende Unterstützung für linksläufige Sprachen (z. B. Arabisch oder Hebräisch) durch Umkehren der Spaltenreihenfolge der Tabelle, sodass Spalte 0 die Spalte ganz rechts und die letzte Spalte ganz links ist. Dies wirkt sich nicht auf den Spaltenindex in den zugrunde liegenden Daten aus, sondern nur auf die Anzeigereihenfolge. Die vollständige bidirektionale Sprachanzeige (BiDi) wird von der Tabellenvisualisierung nicht unterstützt, selbst wenn diese Option aktiviert ist. Diese Option wird ignoriert, wenn Sie das Paging (über die Seitenoption) aktivieren oder wenn die Tabelle Bildlaufleisten enthält, weil Sie Optionen für Höhe und Breite angegeben haben, die kleiner als die erforderliche Tabellengröße sind.

Legt die horizontale Scrollposition in Pixeln fest, wenn die Tabelle horizontale Bildlaufleisten hat, da Sie die Eigenschaft für die Breite festgelegt haben. Die Tabelle wird geöffnet und um so viele Pixel über die Spalte ganz links hinaus gescrollt.

Wenn die Richtlinie auf „true“ gesetzt ist, wird die Zeilennummer als erste Spalte der Tabelle angezeigt.

Ob und wie Spalten sortiert werden sollen, wenn der Nutzer auf eine Spaltenüberschrift klickt. Wenn das Sortieren aktiviert ist, sollten Sie auch die Eigenschaften sortAscending und sortColumn einrichten. Wählen Sie einen der folgenden Stringwerte aus:

• „Aktivieren“ – [Standard] Nutzer können auf Spaltenüberschriften klicken, um nach der angeklickten Spalte zu sortieren. Wenn Nutzer auf die Spaltenüberschrift klicken, werden die Zeilen automatisch sortiert und ein Sortierereignis ausgelöst.
• „event“: Wenn Nutzer auf die Spaltenüberschrift klicken, wird ein „sort“-Ereignis ausgelöst, die Zeilen werden jedoch nicht automatisch sortiert. Diese Option sollte verwendet werden, wenn für die Seite eine eigene Sortierung implementiert wird. Ein Beispiel für die manuelle Verarbeitung von Sortierereignissen finden Sie im TableQueryWrapper-Beispiel.
• „Deaktivieren“: Das Klicken auf eine Spaltenüberschrift hat keine Auswirkungen.

Die Reihenfolge, in der die anfängliche Sortierspalte sortiert ist. "True" für aufsteigend, "false" für absteigend. Wird ignoriert, wenn sortColumn nicht angegeben ist.

Ein Index einer Spalte in der Datentabelle, nach der die Tabelle anfänglich sortiert ist. Die Spalte ist mit einem kleinen Pfeil gekennzeichnet, der die Sortierreihenfolge angibt.

Die erste Tabellenseite, die angezeigt werden soll. Wird nur verwendet, wenn sich page im Modus „Aktivierung“/„Ereignis“ befindet.

Legt die Breite des Containerelements der Visualisierung fest. Sie können Standard-HTML-Einheiten verwenden (z. B. „100 px“, „80 em“, „60“). Wenn keine Einheiten angegeben sind, wird angenommen, dass Pixel eine Zahl sind. Wenn keine Angabe erfolgt, passt der Browser die Breite automatisch an die Tabelle an. Dabei wird die Breite so weit wie möglich verkleinert. Wird sie unter der erforderlichen Breite festgelegt, wird eine horizontale Bildlaufleiste hinzugefügt. Bei der Einstellung „100 %“ wird die Tabelle so weit wie möglich in das Containerelement maximiert.

Zeichnet die Tabelle.

Standardmäßige Implementierung von getSelection. Auswahlelemente sind Zeilenelemente. Kann mehr als eine ausgewählte Zeile zurückgeben. Die Zeilenindexe im Auswahlobjekt beziehen sich unabhängig von Nutzerinteraktionen (Sortieren, Paging usw.) auf die ursprüngliche Datentabelle.

Beachten Sie, dass die Auswahl bzw. die Auswahlen ein-/ausschalten: Wenn Sie beim ersten Mal auf eine Zelle klicken, wird sie ausgewählt. Wenn Sie noch einmal auf die Zelle klicken, wird die Auswahl aufgehoben. Dies führt zu einem Auswahlereignis, aber nicht zu den ausgewählten Elementen im abgerufenen Auswahlobjekt.

Rufen Sie diese Methode auf, um Informationen zum aktuellen Sortierstatus einer Tabelle abzurufen, die sortiert wurde (in der Regel vom Nutzer, der auf eine Spaltenüberschrift geklickt hat, um die Zeilen nach einer bestimmten Spalte zu sortieren). Wenn Sie die Sortierung deaktiviert haben, funktioniert diese Methode nicht.

Wenn Sie Daten nicht im Code sortiert haben oder der Nutzer die Daten nicht durch Auswahl von Code sortiert hat, werden die Standardsortierwerte zurückgegeben.

• column: (Zahl) Index der Spalte, nach der die Tabelle sortiert wird.
• ascending – (boolesch) „true“, wenn aufsteigend sortiert wird, „false“, wenn absteigend sortiert wird.
• sortedIndexes – (numerisches Array) Array aus Zahlen, wobei der Index im Array die sortierte Zeilennummer (in der sichtbaren Tabelle) und der Wert der Index dieser Zeile in der zugrunde liegenden (unsortierten) Datentabelle ist.

Standardmäßige Implementierung von setSelection(), kann aber nur ganze Zeilen oder mehrere Zeilen auswählen. Die Zeilenindexe im Auswahlobjekt beziehen sich unabhängig von Nutzerinteraktionen (Sortieren, Paging usw.) auf die ursprüngliche Datentabelle.

Löscht das Diagramm und gibt alle zugewiesenen Ressourcen frei.

Standardauswahlereignis, aber nur ganze Zeilen können ausgewählt werden.

Wird ausgelöst, wenn Nutzer auf eine Schaltfläche für die Seitennavigation klicken.

Wird ausgelöst, wenn Nutzer auf eine Spaltenüberschrift klicken und die Sortieroption nicht „deaktivieren“ ist.

• column: (Zahl) Index der Spalte, nach der die Tabelle sortiert wird.
• ascending – (boolesch) „true“, wenn aufsteigend sortiert wird, „false“, wenn absteigend sortiert wird.
• sortedIndexes: (numerisches Array) Array aus Zahlen, wobei der Index im Array die sortierte Zeilennummer (in der sichtbaren Tabelle) und der Wert der Index dieser Zeile in der zugrunde liegenden (unsortierten) Datentabelle ist.

Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden aufrufen möchten, nachdem Sie es gezeichnet haben, sollten Sie vor dem Aufrufen der Zeichenmethode einen Listener für dieses Ereignis einrichten. Dieser Listener sollte erst nach dem Auslösen des Ereignisses aufgerufen werden.