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