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