HTML Tabellengitter

Ein Tabellengitter (engl.: Grid) stellt beliebige Daten in Form einer Tabelle dar. Dabei bietet die Tabelle eine Vielzahl von Funktionen zum seitenweise blättern, dem selektieren, Suchen und sortieren von Daten und vielem mehr.

Grundsätzlich besteht ein Tabellengitter aus mehreren konfigurierbaren Bereichen:

  • 1. Tabellengitterrahmen mit Titelbereich: Wurde eine Überschrift angegeben, wird diese im Titelbereich angezeigt. Ist die Tabelle versteckbar, kann diese mit dem Symbol oben rechts in der Titelleiste minimiert werden. Wurde das Tabellengitter als vergrößerbar definiert, kann die Tabellengröße mit Hilfe des Symbols unten rechts vergrößert und verkleinert werden.
  • 2. Tabellenspalten mit Überschriften: Die einzelnen Spalten können hier vergrößert und verkleinert, sortiert und verschoben werden. (Sofern konfiguriert). Zusätzlich können zur Suche über jeder Spalte Eingabefelder eingeblendet werden, die eine Suche nach bestimmten Werten erlauben.
  • 3. Tabellendaten: In diesem Bereich sind die Tabellendaten in Zeilen dargestellt. Einzelne Zeilen können markiert werden (Mehrfachauswahl möglich) und optional über das Plus-Symbol am Zeilenanfang aufgeklappt werden. Der Inhalt der Zeilen kann beliebiges HTML sein, dort können auch Eingabefelder, Bilder, Schaltflächen etc. untergebracht sein.
  • 4. Navigatorleiste mit Navigatorknöpfen: Die Navigatorleiste kann optional eingeblendet werden, entweder unterhalb der Tabellendaten, oberhalb der Tabellendaten, oder gleichzeitig ober- und unterhalb. Teil der Navigatorleiste sind die Navigatorknöpfe. Hinter diesen können Aktionen hinterlegt werden, die sich auf die gesamte Tabelle oder die selektierten Datensätze beziehen.
  • 5. Pager: Der Pager in der Navigatorleiste dient zur Seitenwahl. Er hat optionale Pagerknöpfe, mit denen Seitenweise vor und zurück geblättert und ans Ende bzw. Anfang gesprungen werden kann. Zusätzlich kann man über ein Eingabefeld direkt zu einer Seite springen und angeben, wie viele Datensätze pro Seite angezeigt werden sollen.
  • 6. Satzinfo: Optional kann auch die Satzinfo in der Navigatorleiste angezeigt werden. Hier ist ersichtlich welche Datensätze gerade angezeigt werden und wie viele insgesamt vorhanden sind.

Funktionsweise des Tabellengitters

Die Erstellung eines Tabellengitters ist sowohl zeitlich als auch logisch in zwei Funktionen aufgeteilt. Zuerst erfolgt die Definition des Layouts, also des Aussehens, der Funktionsweise des Tabellengitters und seiner einzelnen Spalten. Die zweite Funktion dient zum Abruf und Darstellung der eigentlichen Tabellendaten. Dazu fragt das Tabellengitter selbständig beim Server nach, idem eine konfigurierbare URL aufgerufen wird und die notwendigen Parameter (z.B. Welche Seite dargestellt werden soll, welche Sortierung und Suchbegriffe verwendet werden sollen etc.) übergeben werden. Erwartet wird dann vom Server eine definierte Datenstruktur, die die Tabellendaten für die aktuelle Seite enthalten. Für beides (Definition des Layouts) und Abruf der Daten stehen entsprechende Kommandos im Brick zur Verfügung. Beide Funktionen können dabei in einem gemeinsamen Brick definiert werden, jedoch ist zu beachten dass jeder Aufruf zeitlich separat erfolgt und daher je nach Aufrufart nur ein Ergebnis zurück geliefert werden darf; entweder das Tabellenlayout oder die Tabellendaten. Natürlich müssen die Daten nicht durch einen Brick geliefert werden, wichtig ist nur das diese in dem definierten Format (Ein JSON Format) geliefert werden.

Definition des Layouts

Auf Grund der Vielzahl an möglichen Parametern zur Definition des Layouts wurden diese in verschiedene Kommandos, die unter dem Hauptkommando definiert werden können, aufgeteilt.

HTML Tabellengitter

Das Hauptkommando definiert das allgemeine Layout und Funktionalitäten eines Tabellengitters.

Parameter:

  • ID: Eine Eindeutige ID des Tabellengitters auf der Seite. Diese ID wird bei späteren Aktionen immer mit übermittelt.
  • Daten URL: Die URL zum Abruf der Daten. Das Tabellengitter ruft diese URL selbständig auf, wenn neue Daten benötigt werden und gibt als Parameter ein Datenobjekt vom Typ WEB:TabelRequest (siehe Tabelle 9: TableRequest) mit.
  • ID eines Formulars: Optional kann die ID eines HTML Formulars angegeben werden. Ist eines angegeben, werden dessen Werte bei jedem Datenabruf und anderen Tabellenaktion an die DLE übermittelt.
  • Überschrift: Eine optionale Überschrift für die Tabelle. Wird keine Überschrift angegeben, wird die gesamte Titelleiste nicht dargestellt. Um eine leere Titelleiste anzuzeigen, ist ein Leerzeichen als Titel einzugeben.
  • Breite: Wenn keine Größe angegeben ist, ist die Tabelle so breit wie die Summe ihrer Spaltenbreiten. Falls eine Größe angegeben wurde, hängt die Größenberechnung von dem Parameter Spaltengrößen anpassen ab.
  • Höhe: Die Höhe der Tabelle in Pixel oder der Wert auto. Der Wert auto vergrößert und verkleinert die Tabelle so, dass alle Zeilen einer Seite dargestellt werden können.
  • Breite automatisch: Wird dieser Wert auf Ja gesetzt, wird die Initiale Breite der Tabelle an die Breite des umliegenden Elements angepasst.
  • Breite fixieren: Bei Ja wird beim anpassen der Breite einer Spalte die rechts daneben liegende Spaltenbreite so angepasst, das sich die Gesamtbreite der Tabelle nicht ändert. Ansonsten wird beim anpassen der Breite die gesamte Tabellengröße angepasst.
  • Spaltengröße anpassen: Bei Ja und einer vorgegebenen Tabellenbreite werden die einzelnen Spalten prozentual so angepasst, das die Gesamtbreite der Tabelle eingehalten wird. Bei Nein werden die Spaltenbreiten nicht angepasst.
  • Vergrößerbar: Bei Ja kann die Größe der Tabelle mit der Maus verändert werden, dazu wird unten rechts ein entsprechendes Symbol eingeblendet und die Tabelle kann entlang des unteren oder rechten Randes angepasst werden.
  • Navigatorleiste: Gibt an, wo die Navigatorleiste in der Tabelle eingeblendet werden soll. Mögliche Werte sind Oben, Unten, Oben/Unten und Aus.
  • Tabelle geschlossen: Bei Ja wird die Tabelle Initial geschlossen (minimiert) dargestellt.
  • Tabelle versteckbar: Bei Ja kann die Tabelle durch ein Symbol oben rechts minimiert und maximiert werden.
  • Maussensitiv: Bei Ja werden die Tabellenzeilen hervorgehoben, wenn der Mauszeiger über sie fährt.
  • Ladevorgang anzeigen: Gibt an, wie der Ladevorgang angezeigt werden soll. Bei Ein wird ein kleines Fenster mit dem Text „Lade Daten …“ eingeblendet. Bei Aus wird kein Ladevorgang angezeigt und bei Blockieren wird das Fenster eingeblendet und die Tabelle wird solange für Eingaben blockiert, bis der Ladevorgang abgeschlossen ist.
  • Spalten verschiebbar: Bei Ja können die Spalten einer Tabelle durch Drag&Drop in ihrer Reihenfolge verschoben werden, sofern dies in den einzelnen Spalten erlaubt ist.
  • Mehrfachauswahl: Bei Ja kann mehr als eine Zeile selektiert werden. Dazu wird am Anfang jeder Zeile eine Checkbox eingeblendet. Die Selektion kann darüber, oder einfach über das Klicken in eine Zeile selektiert werden.
  • Zebrastreifen: Bei Ja werden die einzelnen Zeilen alternierend gezeichnet. Dazu kann mittels des Parameters Zebraklasse eine eigene CSS Klasse definiert werden, die die visuellen Attribute enthält.
  • Zebraklasse: Falls der Parameter Zebrastreifen auf Ja gesetzt ist, wird diese CSS Klasse für die alternierenden Zeilen verwendet.
  • Fußzeile: Bei Ja wird eine Fußzeile in der Tabelle eingeblendet. Die Fußzeile ist am unteren Ende der Tabelle fixiert und immer sichtbar.
  • Benutzerdaten in Fußzeile: Bei Ja werden in der Fußzeile die Daten für jede Spalte angezeigt, die mittels Kommando Tabellengitter Fußzeile Spaltenwert als Ergebnis der Datenanfrage zurückgeliefert wurden.
  • Größe an Container ID anpassen: Hier kann die ID eines umliegenden Containers angegeben werden. Die Tabelle wird dann automatisch an die Breite des Containers angepasst, auch wenn sich dieser in der Größe ändert, z.B. durch Anpassen der Fensterbreite.
  • Zusätzliche HTML Attribute: Die Für alle HTML Kommandos geltenden Standardattribute können auch hier angegeben werden.
  • Zusätzliche jqGrid Parameter: Hier kann ein JSON-String definiert werden der weitere Parameter für die jqGrid Tabelle enthält. Bsp: {altclass:‘colorRed‘}. Weitere Parameter für die jqGrid Tabelle sind unter http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options zu finden.