Zum Hauptinhalt springen

Optionen

MultiTable Optionen​

rows Object[]​

Ein Array mit Zeilen, die angezeigt werden sollen.

rows?: Object[]

  • Default: null
rows: [{
        id: "1"
    },
    {
        id: "2"
    }
]

columns MultiTableColumns​

columns?: { column: MultiTableColumn }

Enthält die Spaltendefinition für die MultiTable.

  • Default: null
  • Optional

Weitere Konfigurationsmöglichkeit siehe MultiTableColumn.

columns: {
    article: "de:Artikel;en:Article",
    amount: {
        label: "de:Netto;en:net",
        type: "currency",
    },
    tax: {
        label: "de:Mwst.;en:tax",
        type: "currency"
    }
}
tipp

Wird keine Spaltendefinition angegeben, werden diese aus den Zeilen generiert.

select boolean​

(Optional) Aktiviert die Auswahlmöglichkeit.

select?: boolean

  • Default: true
  • Optional
select: false

multiSelect boolean​

(Optional) Aktiviert die Multiauswahl.

multiSelect?: boolean

  • Default: false
  • Optional
multiSelect: false

multiSelectBehavior string​

(Optional) Wie soll die Checkbox Alle markieren verhalten?

multiSelectBehavior?: "" | "filter" | "paged"

  • Default: ``
  • Mögliche Werte:

`` : Leer - Alle Zeilen werden markiert
filter : Es werden alle gefilterten Zeilen markiert
paged : Es wird nur die aktuelle Seite markiert

  • Optional
multiSelectBehavior: "filter"

selectAll boolean​

(Optional) Vorselektiert alle Zeilen.

selectAll?: boolean

  • Default: false
  • Optional
  • Ab Version: 20.6.1
selectAll: true
hinweis

Achtung, diese Option funktioniert nur, wenn select: true ist.

allowEdit boolean​

(Optional) Aktiviert den Editiermodus im Bearbeitungsmodus.

allowEdit?: boolean | (options: { rows: MultiTableRows, columns: MultiTableColumns }) => boolean

  • Default: false
  • Optional
allowEdit: false

Beispiel mit Callback:

allowEdit: function(options) {
    // options.rows
    // options.columns
    return options.rows.length > 0
}

allowDelete boolean​

(Optional) Löschen von Zeilen im Bearbeitungsmodus erlauben.

allowDelete?: boolean | (options: { rows: MultiTableRows, columns: MultiTableColumns }) => boolean

  • Default: true
  • Optional
allowDelete: false

Beispiel mit Callback:

allowDelete: function(options) {
    // options.rows
    // options.columns
    return options.rows.length > 0
}

allowInsert boolean​

(Optional) Einfügen von Zeilen im Bearbeitungsmodus erlauben.

allowInsert?: boolean | (options: { rows: MultiTableRows, columns: MultiTableColumns }) => boolean

  • Default: true
  • Optional
allowInsert: false

Beispiel mit Callback:

allowInsert: function(options) {
    // options.rows
    // options.columns
    return options.rows.length > 0
}

striped boolean​

(Optional) Tabelle im Zebra-Look.

striped?: boolean

  • Default: true
  • Optional
striped: true

border boolean​

(Optional) Tabelle umrahmen.

border?: boolean

  • Default: true
  • Optional
border: true

bordered boolean​

(Optional) Tabellenzellen umrahmen.

bordered?: boolean

  • Default: true
  • Optional
bordered: true

hover boolean​

(Optional) Zeile hervorheben wenn Maus darüber bewegt wird.

hover?: boolean

  • Default: true
  • Optional
hover: true

sticky boolean​

(Optional) Spaltenüberschrift und Option fixieren.

sticky?: boolean

  • Default: false
  • Optional
sticky: true

emptyMessage string​

(Optional) Meldung wenn keine Daten vorhanden.

emptyMessage?: string

  • Default: "Es wurden keine Treffer gefunden."

  • Optional

emptyMessage: "Es wurden keine Adressen hinterlegt"

pageSize number​

(Optional) Anzahl Einträge pro Seite.

pageSize?: number

  • Default: 10

  • Optional

pageSize: 30

pageSizes number[]​

(Optional) Auswahlmöglichkeiten der Anzahl Seiten.

pageSizes?: number[]

  • Default: [10, 25, 50, 100]

  • Optional

pageSizes: [10, 15, 20]

sortBy string​

(Optional) Vordefinierte Sortierspalte.

sortBy?: string

  • Default: ""
  • Optional
sortBy: "dateFrom"

sortAscending boolean​

(Optional) Sortierung aufsteigend?

sortAscending?: boolean

  • Default: true
  • Optional
sortAscending: false

filter​

(Optional) Vordefinierter Filter.

  • Default: ""
  • Optional

Filter als Suchbegriff​

Wird ein string übergeben, so wird dieser in der Sucheingabe angezeigt und danach gefiltert. Der User hat nun die Möglichkeit den Filter anzupassen.

filter?: string;
filter: "12345" // z.B. Rechnungsnummer

Vordefinierter Filter (Callback)​

Wird ein Callback als function oder string (globale Funktion) übergeben, so werden die Zeilen automatisch vor der Anzeige gefiltert. Der User hat weiterhin die Möglichkeit über die gefilterten Zeilen zu suchen.

filter?: (options:
    {
        row: MultiTableRow, 
        index: number,
        rows: MultiTableRows, 
        columns: MultiTableColumns,
        filter: (input: string): boolean
    }) => boolean;
Wichtig

Der Callback muss ein boolean zurückgeben!

Der options Parameter beinhaltet folgende Properties:

{
    // Die aktuelle Zeile
    row: MultiTableRow, 
    // Der aktuelle Zeilenindex
    index: number,
    // Alle Zeilen
    rows: MultiTableRows, 
    // Spalteninformationen
    columns: MultiTableColumns,
    // Hilfsfunktion zum Durchsuchen der aktuellen Zeile
    filter: (input: string): boolean
}

Einfaches Beispiel:

filter: function(options) {
    // Wenn someFlag in der aktuellen Zeile den Wert sichtbar hat, dann anzeigen.
    return options.row.someFlag == "sichtbar";
}
Verwenden der filter Funktion​

Der options Parameter bietet eine Hilfsfunktion, mit der die aktuelle Zeile durchsucht werden kann (Enthält Suche). Die Funktion benötigt hier als Parameter den Suchbegriff. Als Rückgabewert erhält man true , wenn der Suchbegriff gefunden wurde, false , wenn nicht.

Wichtig

Spalten vom Typ currency oder number werden formatiert geprüft (über documents.sdk.utils.formatNumber ). Möchte man beispielsweise nach 10000.95 suchen, muss nach "10.000,95" gesucht werden, bzw. der Wert vorher über documents.sdk.utils.formatNumber konvertiert werden.

filter: function(options) {
    return options.filter("some filter");
}

oder als string und Implementierung myGlobalFancyFilterFunction

filter: "myGlobalFancyFilterFunction";
function myGlobalFancyFilterFunction(options) {
    return options.filter("some filter");
}

showOptions boolean​

(Optional) Kopfzeile mit Filter und Seitenauswahl anzeigen?

showOptions?: boolean

  • Default: true
  • Optional
showOptions: false

showHeader boolean​

(Optional) Spaltenüberschrift anzeigen?

showHeader?: boolean

  • Default: true
  • Optional
showHeader: false

showFooter boolean​

(Optional) Fusszeileninformationen anzeigen (Seitenanzahl, Auswahl)?

showFooter?: boolean

  • Default: true
  • Optional
showFooter: false

showPagination boolean​

(Optional) Seitennavigation aktivieren?

showPagination?: boolean

  • Default: true
  • Optional
showPagination: false

removeButtonFocusable boolean​

(Optional) Soll der Löschen-Button über die Tab-Navigation erreichbar sein? Nützlich für Anwender die überwiegend mit der Tastatur arbeiten. Die Zeile kann somit über die Leertaste gelöscht werden.

removeButtonFocusable?: boolean

  • Default: false
  • Optional
removeButtonFocusable: false
tipp

Über das Tastenkürzel Shift+Entf kann auch eine Zeile gelöscht werden!

insertMode string​

(Optional) Wie soll sich die Eingabemaske bei Eingaben verhalten?

insertMode?: "auto" | "manual"

  • Default: "auto"
  • Mögliche Werte:

auto : Eine neue Zeile wird sofort hinzugefügt, sobald eine Eingabe getätigt worden ist (Standard).
manual : Eingabezeile muss mittels dem Einfügebutton hinzugefügt werden

  • Optional
insertMode: "manual"

showEmptyTable boolean​

(Optional) Soll die Tabelle angezeigt werden, auch wenn keine Daten vorhanden sind?

Standardmäßig wird eine Meldung angezeigt (siehe Option emptyMessage)

showEmptyTable?: boolean

  • Default: false
  • Optional
showEmptyTable: false

rowStyle string​

(Optional) Formatierungsoption für Zeilen

rowStyle?: string | (options: { row: MultiTableRow, rows: MultiTableRows, columns: MultiTableColumns }) => string

  • Default: ""
  • Optional
rowStyle: "color: #f00"

Erweitertes Styling

rowStyle: function(options) {
    var backgroundColor = options.row.amount > 1000 ? "#f00" : "#000"
    return "background-color: " + backgroundColor
}

html Object​

(Optional) Benutzerdefiniertes HTML.

html?: {
    header?: string | (options: { rows: MultiTableRows, columns: MultiTableColumns }) => string;
    footer?: string | (options: { rows: MultiTableRows, columns: MultiTableColumns }) => string;
}
  • Default: ""
  • Optional
html: {
    header: (options) => "<div>Anzahl Zeilen: " + options.rows.length + "</div>"
}

html.header string​

(Optional) Benutzerdefiniertes HTML oberhalb der MultiTable.

header: string

  • Default: ""
  • Optional
html: {
    header: (options) => "<div>Anzahl Zeilen: " + options.rows.length + "</div>"
}

html.footer string​

(Optional) Benutzerdefiniertes HTML unterhalb der MultiTable.

footer: string

  • Default: ""
  • Optional
html: {
    footer: (options) => options.rows.length > 0 ? "<div>Nur sichtbar wenn Zeilen vorhanden</div>" : ""
}

beforeDelete Function | null​

(Optional) Callback bevor die Zeilen gelöscht werden.

beforeDelete?: (options: {
    selectedRows: MultiTableRows;
    rows: MultiTableRows;
    columns: MultiTableColumns;
    removeSelectedRows: () => void;
}) => boolean | void
  • Default: null
  • Optional
  • Ab Version: 20.6.1

beforeDelete Synchrone Rückmeldung (ohne Rückmeldung)​

beforeDelete: function (options) {
    // Maximal eine Zeile darf gelöscht werden    
    return options.selectedRows.length == 1;
},

beforeDelete Synchrone Rückmeldung über window.confirm​

beforeDelete: function (options) {
    var message =
        options.selectedRows.length === options.rows.length
            ? "Möchten Sie alle Zeilen löschen?"
            : "Möchten Sie die " + options.selectedRows.length + " Zeile(n) löschen?";
    return window.confirm(message);
},

beforeDelete Asynchrone Lösung (z.B. über documents Bestätigungsdialog)​

In documents werden vom Benutzer bestätigte Dialoge mittels Callbacks (onOk) getriggert. Hierzu kann die Funktion options.deleteSelectedRows einfach als Parameter 'durchgeschleift' werden.

beforeDelete: function (options) {
    var message =
        options.selectedRows.length === options.rows.length
            ? "Möchten Sie alle Zeilen löschen?"
            : "Möchten Sie die " + options.selectedRows.length + " Zeile(n) löschen?";

    documentsContext.openConfirmationDialog("Löschen bestätigen", message, options.deleteSelectedRows);
},
vorsicht

Der Callback options.deleteSelectedRows kann nicht mehr aufgerufen werden, wenn bereits ein Rückgabewert übergeben wurde.

height string | number​

Definiert die maximale Höhe des Gadgets. Überschreitet das Gadget die Höhe, so wird ein Scrollbalken dargestellt.

height?: string | number
  • Default: null
  • Optional

Beispiel:

height: "200px"
height: 200 // -> "200px"

virtualization boolean​

Ermöglicht das performante Anzeigen eines Tables mit vielen Zeilen (>200)

virtualization?: boolean
  • Default: false
  • Optional
vorsicht

Das Virtualisierungs-Feature befindet sich noch in der Alpha und ist nicht bereit für den produktiven Einsatz.