Zum Hauptinhalt springen

Schaltflächen (TableMonitorButton)

Um im TableMonitor Buttons anzuzeigen, wird die Option buttons verwendet.

Beispiel​

{
    buttons: {
        add: {
            label: "Neue Zeile",
            click: function(button, options) {
                options.rows.push({})
            }
        },
        copy: {
            label: "Kopieren",
            tooltip: "Zeile(n) duplizieren",
            click: function(button, options) {
                options.rows.push.apply(options.rows, options.selectedRows.slice())
            },
            enabled: function(selectedRows, options) {
                return selectedRows.length > 0
            }
        },
        remove: {
            label: "Löschen",
            tooltip: "Zeile(n) löschen",
            click: function(button, options) {
                options.removeSelectedRows()
            },
            enabled: function(selectedRows, options) {
                return selectedRows.length > 0
            }
        }
    }
}

Optionen​

label string​

Beschriftung des Buttons.

label: string

  • Default: null
label: "Neue Zeile"

icon string​

(Optional) Icon, welches im Button angezeigt wird.

icon: string

  • Default: null
  • Optional
icon: "ionicon ion-md-arrow-round-up"

onlyShowIcon boolean​

(Optional) Zeigt im Button nur das Icon an. ACHTUNG: unbedingt trotzdem ein Label oder Tooltip setzen, für bessere Accessibility.

onlyShowIcon: boolean

  • Default: false
  • Optional
onlyShowIcon: false

tooltip string​

Tooltip des Buttons.

tooltip?: string

  • Default: null
  • Optional
tooltip: "Eine genaue Beschreibung was die Schaltfläche macht"

toggleGroup string​

Buttons mit gleichem toggleGroup werden gruppiert angezeigt.

toggleGroup?: string

  • Default: null
  • Optional
toggleGroup: "navgroup"

visible boolean​

Soll der Button angezeigt werden?

visible?: boolean

  • Default: true
  • Optional
visible: false

enabled boolean​

Steuert ob der Button aktiviert ist.

enabled?: "single" | "multi" | boolean | 
    ((selectedRows: Object[], options: TableMonitorOptions) => boolean)
  • Default: true
  • Optional
enabled: false

Beispiel Callback mit Logik

enabled: function(selectedRows, options) {
    return selectedRows.length > 0
}

click Function​

Callback wenn der Button geklickt wurde, siehe TableMonitorButtonClickEventOptions.

click?: string | ((options: TableMonitorButtonClickEventOptions) => void)
  • Default: null
  • Optional

Beispiel Callback mit Logik

enabled: function(options) {
    alert(options.rows.length)
}

TableMonitorButtonClickEventOptions​

Callback Optionen wenn der Button geklickt wurde.

options = {
    moveSelectedRow: (nextIndex: Number) => boolean
    removeSelectedRows: () => void
    selectedRows: Object[]
    rows: Object[]
    columns: MultiTableColumns
    id: string
}

moveSelectedRow Function​

Verschiebt die selektierte Zeile an den angegeben Index.

moveSelectedRow: (nextIndex: Number) => boolean

removeSelectedRows Function​

Löscht die selektierten Zeilen.

removeSelectedRows: () => void

selectedRows Object[]​

Array mit den selektierten Zeilen

selectedRows: Object[]

rows Object[]​

Array mit alle Zeilen

rows: Object[]

id string​

Angegebene oder Genierte ID zur Instanz

id: string

columns MultiTableColumns​

columns: { column: MultiTableColumn }

Enthält die Spaltendefinition für die MultiTable.