Tabelle¶
Das Tabellen-Objekt Alvine.Package.UI.Dialog.Table(options) erlaubt es Tabellen in die Komponente einzubinden.
// Neue Tabelle erstellen
table = new Alvine.Package.UI.Dialog.Table({'id':'myID'});
Über den Parameter options können folgende Wert definiert werden:
| Schlüssel | Beschreibung | Default | Beispiel |
|---|---|---|---|
| id | ID der Tabelle | myId | |
| class | Tabellenklasse | table | table table-sm |
| class-responsive | Responsive-Feature | table-responsive |
Das Aussehen der Tabelle kann über verschiedene Kasse gesteuert werden. Die Details sind auf der Bootstrap-Webseite nachzulesen.
Einige Klassen verfügbare Klassen sind: table-inverse, table-striped, table-bordered, table-hover, table-sm. Das folgende Beispiel verwendet die Klassen: table table-bordered table-inverse
Die einzelnen Zeilen und Zellen werden über Methoden zur Tabelle hinzugefügt.
table = new Alvine.Package.UI.Dialog.Table(undefined, {'class':'table table-bordered table-inverse'});
row1 = new Alvine.Package.UI.Dialog.TableRow();
// Inhalte können direkt als Zeichenkette eingeben werden
row1.addCell('#1');
// Oder per TableCell-Objekt
row1.addCell(new Alvine.Package.UI.Dialog.TableCell('Mark'));
row1.addCell(new Alvine.Package.UI.Dialog.TableCell('Otto'));
// Oder als
// row zur Tabelle hinzufügen
table.addRow(row1);Tabellen lassen sich auch über Arrays oder Collections initialisieren. Beim Aufruf Table.initFrom(data, firstRowIsHeader, lastRowIsFooter) wird der bisherige Inhalt der Tabelle gelöscht
und die Daten aus dem Array oder der Collection genommen. Wird im Parameter firstRowIsHeader true übergeben, so wird die erste Zeile aus dem Dataset als Überschrift genommen. Das gleiche Verhalten
ist für den footer mit dem Flag lastRowIsFooter möglich.
table = new Alvine.Package.UI.Dialog.Table();
table.initFrom([
['#', 'First Name', 'Last Name', 'Username'],
['1', 'Mark', 'Otto', '@mdo'],
['2', 'Jacob', 'Thornton', '@fat'],
['3', 'Larry', 'the Bird', '@twitter']
], true, false); // Header + Daten
Will man manuell einzelne Zeilen hinzufügen kann man Table.addRow(row) verwenden. row kann dabei vom Typ TableRow, TableCell oder String sein. Der HEader und Footer wird über Table.setHeader(header) und
Table.setFooter(footer) bearbeitet.
Über die Methode Table.clearRows() können alle Zeilen gelöscht werden. Ein definierter Header und Footer bleiben davon uberührt. Diese können mit der Methode Table.clearHeader() und Table.clearFooter() gelöscht werden.
Einzelne Zeilen lassen sich per Table.updateRow(index, data) updaten.
Vorgefertigte Eventhandler¶
Über vorgefertigte EventHandler können bestimmte Funktionen impementiert werden.
Zeilenwähler¶
Dieser Eventhandler erlaubt es Zeilen auszuwählen
// Initalisierung eines Tabellen-Selectors
view.on('click', 'table.table tr', Alvine.Package.UI.Dialog.Table.eventHandlerSelectTable);
Die selektierten Tabellen-Zeilen können über jQuery('tr.table-active') ausgelesen werden. Ausserdem
können die Änderungen über folgende Events abonniert werden. Als Parameter wird die Tabelle und die
gewählten TR-Elemente übergeben.
- selectallrows.ALVINE.TABLE (es wurden alle Zeilen ausgwählt)
- deselectallrows.ALVINE.TABLE (die Auswahl wurde für alle Zeilen aufgehoben)
- deselectrow.ALVINE.TABLE (die Auswahl einer Zeile wurden aufgehoben)
- selectrow.ALVINE.TABLE (es wurden eine Zeile ausgewälht)
getInstanceFromDataset¶
{
"name": "Alvine.Package.UI.Dialog.Table",
"dataset": {
"options": {},
"header":
{
"name": "Alvine.Package.UI.Dialog.TableRow",
"dataset": {
"options": {},
"cells": [
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "H1",
"options": {}
}
},
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "H2",
"options": {}
}
},
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "H3",
"options": {}
}
}
]
}
},
"rows": [
{
"name": "Alvine.Package.UI.Dialog.TableRow",
"dataset": {
"options": {},
"cells": [
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "ABS",
"options": {}
}
},
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "123",
"options": {}
}
},
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "uuu",
"options": {}
}
}
]
}
},
{
"name": "Alvine.Package.UI.Dialog.TableRow",
"dataset": {
"options": {},
"cells": [
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "ABS",
"options": {}
}
},
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "123",
"options": {}
}
},
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "uuu",
"options": {}
}
}
]
}
}
],
"footer":
{
"name": "Alvine.Package.UI.Dialog.TableRow",
"dataset": {
"options": {},
"cells": [
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "F1",
"options": {}
}
},
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "F2",
"options": {}
}
},
{
"name": "Alvine.Package.UI.Dialog.TableCell",
"dataset": {
"content": "F3",
"options": {}
}
}
]
}
},
}
}Tabellen-Zeile (TableRow)¶
Eine Tabellen-Zeile dient als Container für die einzelnen Inhalte und kann über TableRow(options) erstellt werden.
row = new TableRow();
row.addCell(new TableCell('hallo Welt'));| Schlüssel | Beschreibung | Default | Beispiel |
|---|---|---|---|
| class | Tabellenklasse | undefined |
Mittels TableRow.clear() werden alle Spalten entfernt. Mit TableRow.getCells() erhält man eine Collection mit allen Spalten. TableRow.addCell(cell) fügt eine Spalte hinzu.
Tabellen-Spalte (TableCell)¶
Eine Tabellen-Zeile dient als Container für die einzelnen Inhalte und kann über TableCell(content, options) erstellt werden.
col = new TableCell('hallo Welt');| Schlüssel | Beschreibung | Default | Beispiel |
|---|---|---|---|
| class | Tabellenklasse | undefined |