Datatable¶
Eine Datentabelle (datatable) ist eine komplexe Darstellung von tabellarischen Werten mit optionalem Pagestepper und Filter.
In eine Zeile lassen sich Formulare einblenden. Eine Datentabelle wird über Datatable(options, formCallback) erstellt.
Der formCallback ist für die Bereitstellung des Formulars verantwortlich.
In der Anleitung Arbeiten mit Listen wird ein komplettes Beispiel Schritt für Schritt erklärt.
datatable = new Alvine.Package.UI.Dialog.Datatable({'registry-key': 'datatable-data', 'filter-button-label': 'Go'},
function (index) {
var form, submit;
form = new Alvine.Package.UI.Dialog.Form();
form.addControl(new Alvine.Package.UI.Dialog.Input(
'id-' + index, 'ID', {
'placeholder': 'Geben Sie Ihren Vornamen ein',
'handler': 'value',
// ...
form.addControl(submit);
form.bindDataset(Alvine.Registry.get('datatable-data').get('collection').getIndex(index));
return form;});| Schlüssel | Beschreibung | Default | Beispiel |
|---|---|---|---|
| id | ID der Datentabelle | new Alvine.Util.UUID() | |
| argument-page | Name des Arguments für duie aktuelle Seite | page | |
| argument-query | Name des Arguments für die Filterung | query | |
| argument-items-per-page | Anzahl der Items pro Seite | count | |
| argument-orderby | Sortierung | orderby | |
| class | Klasse | container-fluid | |
| filter-flag | Filter sichtbar schalten | WAHR | |
| filter-registry-key | Registry-Schlüssel des Filters | undefined | |
| filters | Filter | undefined | |
| items-per-page | Anzahl der Einträge pro Seite | 20 | |
| items-per-page-flag | Anzahl der Einträge pro Seite anzeigen | WAHR | |
| items-per-page-options | Einträge | [10, 25, 50, 100] | |
| reload-flag | Neuladen Button | WAHR | |
| pagestepper-flag | Pagestepper sichtbar schalten | WAHR | |
| data-callback | Funktion für das Handling der Daten | fetchDataFromAPI() | |
| columns | Definition der Spalten | undefined | |
| data-preparer | Daten aufbereiten | undefined | |
| data-processor | Daten aufbereiten | undefined | |
| data-registry-key | Registry Schlüssel | undefined | |
| data-url | URL | undefined | |
| default-query | Standardabfrage | undefined | |
| form-callback | Aufbereitung des Formular | undefined | |
| settings-flag | Feldauswahl | WAHR | |
| settings-columns-label | Label der Feldauswahl | i18n:datatable.settings.columns | |
| subpanel-option | Optionen für das Subpanel | ||
| update-filter | Optionen für das Subpanel | defaultUpdateFilterCallback |
Mit der Methode Datatable.addPageStepper() wird der Pagestepper hinzugefügt. Mit Datatable.addTable() wird die Tabelle eingefügt und mit Datatable.addFilter() der Filter.
Mit Datatable.getTable() kommt man an das Tabellen-Objekt mit Datatable.getPageStepper() an den Pagestepper und mit Datatable.getFilterInput() an das Input-Control.
Mit Datatable.getIndexOf(element) kann der index des Elements abgefragt werden.
Hinweis
Werden mehrere unabhängige Datentabellen auf einer Seite verbaut, so müssen die URL-Parameter
argument-page und argument-query für jede Liste einzeln gesetzt werden.
Die URL wird über die Einstellung data-url gesetzt. In der URL können die folgenden
Platzhalter verwendet werden. Die Platzhalter müssen mit ${....} angegeben werden.
Beiepiel:
?query=${query}&orderby={orderby}&count=${count}&page=${page}
| Platzhalter | Beschreibung |
|---|---|
| query | Suchanfrage |
| orderby | Sortierung |
| count | Anzahl |
| offset | Offset |
| page | Seite |
Eventbearbeitung¶
Die vorgefertigte Eventbearbeitung erlaubt es bestimmte Benutzereingaben standardisiert zu verarbeiten.
view.on('click touch', 'button#filter', Alvine.Package.UI.Dialog.Datatable.eventHandlerFilterData);
view.on('click touch', 'button#reset', Alvine.Package.UI.Dialog.Datatable.eventHandlerResetFilter);
view.on('click touch', 'table.table tr', Alvine.Package.UI.Dialog.Datatable.eventHandlerOpenForm);Die Verarbeitung von Änderungen im Formular können folgendermaßen abgefangen werden:
view.on('click touch', 'button.change-button', function (event) {});Hinweis
Werden mehrere Listen auf einer Seite verbaut, so müssen die Selektoren der Eventhandler die ID der Datentabelle enthalten. Siehe auch Arbeiten mit Listen.
Datatable.eventHandlerOpenForm¶
Mit dem Eventhandler Datatable.eventHandlerOpenForm wird das Öffnen eines Formulars gesteuert.
Datatable.eventHandlerResetFilter¶
Mit Datatable.eventHandlerResetFilter kann das Verhalten des Reset-Buttons abgebildet werden.
Datatable.eventHandlerFilterData¶
Mit Datatable.eventHandlerFilterData wird die Filterung gesteuert.
Filter¶
| Schlüssel | Beschreibung | Default | Beispiel |
|---|---|---|---|
| id | ID des Filters | Zufälliger Wert | |
| class | CSS-Klasse | ||
| builder | Builder-Objekt | undefined | |
| builder-options | Optionen für den Builder | undefined | |
| init-and-reset | Dieser Callback setzt den Wert in der Registry | undefined | |
| init-callback | Dieser Callback wird beim Erstellen des Filters aufgerufen | undefined | |
| activate-callback | Dieser Callback wird beim aktivieren des Filters aufgerufen | undefined | |
| deactivate-callback | Dieser Callback wird aufgerufen, falls der Filter über die Gruppe deaktiviert wird | undefined | |
| label | Label des Filters | Dropdown | |
| is-default | Ist der Filter ein Standardfilter | false |