HTML-Tabellen auf- und zuklappen
Download

Dieses Programm steht unter der GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007. D.h. unter anderem, Sie können den WS-Reporter beliebig einsetzen und unter Beachtung der Lizenz-Bedingungen verändern. Gewährleistung und Haftung sind nach §15 und §16 der Lizenz-Bedingungen ausgeschlossen.

Eine inoffizielle Übersetzung der Lizenz steht auf https://www.gnu.de/documents/gpl-3.0.de.html

Der TableFolder ist eine JavaScript-Klasse, mit der Sie Standard-HTML-Tabellen auf- und zuklappen können. Ein Beispiel finden Sie auf der Demo-Seite. Im einfachsten Fall müssen Sie lediglich die Dateien tableFolder.js und tableFolder.css einbinden und die Klasse TableFolder mit dem Namen der HTML-Tabelle und dem gewünschten Modus instanziieren:

<link rel="stylesheet" href="./tableFolder.css">
<script src="./tableFolder.js">
	</script>
<script>
window.addEventListener('load', function() {

   // die erste Zeile einer Gruppe bleibt stehen
   var tf = new TableFolder('MeineTabelle',TableFolder.Header);
   // oder die letzte Zeile einer Gruppe bleibt als Summenzeile stehen
   var tf = new TableFolder('MeineDaten',TableFolder.Summen);
}
</script>

Dann erhalten alle TH-Elemente im TBODY-Abschnitt der Tabelle mit einem ROWSPAN größer 1 einen Pfeil, auf den man zum Auf- und Zuklappen klicken kann.

Alle Aufruf-Optionen

Die Klasse TableFolder wird mit folgenden Parametern instanziiert:

1. Tabellen-ID (String): ID des <table>-Tags
2. Mode (int): Zu-/Aufklapp-Variante, folgende Konstanten sind definiert:
   • TableFolder.Header: Die erste Zeile bleibt sichtbar.
   • TableFolder.Summen: Die letzte Zeile bleibt als Summenzeile sichtbar.
   • TableFolder.NachKlassen: Die TH-Elemente mit der Zu-/Aufklapp-Funktion werden einzeln mit den CSS-Klassen WSFHeader bzw. WSFSummen markiert (Voreinstellung).
3. Status (int): Status beim Start, folgende Konstanten sind definiert:
   • TableFolder.Eingeklappt (Voreinstellung)
   • TableFolder.Ausgeklappt
   • TableFolder.Stufe1: Nur die erste Stufe ist ausgeklappt.
   • TableFolder.Stufe2: Nur die ersten beiden Stufen sind ausgeklappt.
4. Globale Schalter (bool): Wenn true, erhalten die TH-Elemente im THEAD-Abschnitt der Tabelle Pfeile um ganze Spalten auf- und zuzuklappen. Diese Elemente müssen mit den Klassen WSFHeader oder WSFSummen markiert sein.
5. Zustand speichern (bool): Wenn true, werden die Benutzer-Aktionen, Auf- und Zuklappen, lokal gespeichert und bei einem erneuten Laden der Seite und auch in anderen Seiten mit denselben Elementen beim Aufruf wieder hergestellt.
6. Icons aus CSS (bool): Hinweis, ob die CSS-Regeln WSFIconOpen::after und WSFIconClose::after gesetzt sind. Damit können die Pfeile durch andere Symbole ersetzt werden.

Quellen

Die Dateien können Sie hier herunterladen:

• die JavaScript-Klasse: tableFolder.js
• ein Muster für .css-Styles: tableFolder.css

Bei Problemen und für Anregungen wenden Sie sich bitte an support @ ws-unternehmensberatung.com