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
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
class	Klasse	container-float
extra-open-column		undefined
filter-button-id	ID des Filter-Buttons	filter
filter-button-label	Bezeichnung des Filterbuttons	i18n:filter
filter-flag	Filter sichtbar schalten	WAHR
filter-input-id	ID des Eingabefeldes des Filters	filter-text
items-per-page	Anzahl der Einträge pro Seite	20
pagestepper-flag	Pagestepper sichtbar schalten	WAHR
registry-key	Der Schlüssel in der Registry	datatable
reset-button-id	ID des Reset-Buttons	reset
reset-button-label	Bezeichnung des Resetbuttons	i18n:reset
table-header	Spaltenüberschriften	['#']
data-callback	Funktion für das Handling der Daten	function

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.

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
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