Bootstrap Table Spaltenoptionen

Die Spaltenoptionen-API von Bootstrap Table.

Auf dieser Seite

Die Spaltenoptionen sind in jQuery.fn.bootstrapTable.columnDefaults definiert.

Hinweis: Die unten aufgeführten Optionsnamen (z. B. align, checkbox, class) sind die genauen Eigenschaftsnamen, die verwendet werden sollen, wenn Spalten im columns-Array definiert werden.

Beispiel:

$('#table').bootstrapTable({
  columns: [
    {
      field: 'id',
      title: 'ID',
      align: 'center'
    }
  ]
})

align

Attribut: data-align
Typ: String
Detail:

Gibt an, wie die Spaltendaten ausgerichtet werden sollen. 'left', 'right', 'center' können verwendet werden.
Standard: undefined
Beispiel: Aligning Columns

cardVisible

Attribut: data-card-visible
Typ: Boolean
Detail:

Setzen Sie false, um das Spaltenelement im Kartenansichtszustand auszublenden.
Standard: true
Beispiel: Card Visible

cellStyle

Attribut: data-cell-style
Typ: Function
Detail:

Die Zellstil-Formatierfunktion nimmt vier Parameter entgegen:
- value: der Feldwert.
- row: die Zeilenrekorddaten.
- index: der Zeilenindex.
- field: das Zeilenfeld.
Unterstützt Klassen oder CSS.
Standard: undefined
Beispiel: Cell Style

checkbox

Attribut: data-checkbox
Typ: Boolean
Detail:

Setzen Sie true, um ein Kontrollkästchen anzuzeigen. Die Kontrollkästchenspalte hat eine feste Breite.

Wenn ein Wert angegeben wird, wird das Kontrollkästchen automatisch aktiviert. Es ist auch möglich, das Kontrollkästchen zu aktivieren/deaktivieren, indem Sie einen Formatter verwenden (gibt true zurück, um zu aktivieren, gibt false zurück, um zu deaktivieren).
Standard: false
Beispiel: Column Checkbox

checkboxEnabled

Attribut: data-checkbox-enabled
Typ: Boolean
Detail:

Setzen Sie false, um die Kontrollkästchen/Radio-Buttons zu deaktivieren.
Standard: true
Beispiel: Checkbox Enabled und Checkbox Disabled

class

Attribut: class | data-class
Typ: String
Detail:

Der Spaltenklassenname.
Standard: undefined
Beispiel: Column Class

clickToSelect

Attribut: data-click-to-select
Typ: Boolean
Detail:

Setzen Sie true, um das Kontrollkästchen oder Optionsfeld auszuwählen, wenn Sie auf Zeilen klicken.
Standard: true
Beispiel: Click to Select

colspan

Attribut: colspan | data-colspan
Typ: Number
Detail:

Gibt an, wie viele Spalten eine Zelle einnehmen soll.
Standard: undefined
Beispiel: Rowspan Colspan

detailFormatter

Attribut: data-detail-formatter
Typ: Function
Detail:

Formatieren Sie Ihre Detailansicht, wenn detailView und detailViewByClick auf true gesetzt sind. Geben Sie einen String zurück, und er wird in die Detailansicht-Zelle eingefügt, optional rendern Sie das Element direkt mit dem dritten Parameter, der ein jQuery-Element der Zielzelle ist.

Fallback ist der Detail-Formatter der Tabelle.
Standard: function(index, row, $element) { return '' }
Beispiel: Detail Formatter

escape

Attribut: data-escape
Typ: Boolean
Detail:

Escaped eine Zeichenkette für den Einfügung in HTML, ersetzt &, <, >, ", ` und ' Zeichen.
Standard: undefined
Beispiel: Column Escape

events

Attribut: data-events
Typ: Object
Detail:

Der Zellenereignis-Listener, wenn Sie die Formatter-Funktion verwenden, nimmt vier Parameter entgegen:
- event: das Ereignis.
- value: der Feldwert.
- row: die Zeilenrekorddaten.
- index: der Zeilenindex.
Beispielcode:
```
<th .. data-events="operateEvent">
var operateEvents = {
  'click .like': function (e, value, row, index) {}
}
```
Standard: undefined
Beispiel: Column Events

falign

Attribut: data-falign
Typ: String
Detail:

Gibt an, wie die Tabellenfußzeile ausgerichtet werden soll. 'left', 'right', 'center' können verwendet werden.
Standard: undefined
Beispiel: Aligning Footer

field

Attribut: data-field
Typ: String
Detail:

Der Spaltenfeldname. Dieses Feld muss eindeutig sein, sonst können unbekannte Probleme auftreten.
Standard: undefined
Beispiel: Column Field

footerFormatter

Attribut: data-footer-formatter
Typ: Function
Detail:

Der Kontext (this) ist das Spaltenobjekt.

Die Funktion nimmt zwei Parameter entgegen:
- data: Array aller Datenzeilen.
- value: Wenn Fußzeilendaten gesetzt sind, der Wert der Fußzeilenspalte.
Der erwartete Rückgabetyp ist jQuery, String oder HTMLElement. Andere Typen werden zum String-Typ gezwungen.

Wenn Sie Daten von einem Server abrufen und den Fußzeilenwert aus der Serverantwort setzen, verwenden Sie bitte die footerField-Option.
Standard: undefined
Beispiel: Footer Formatter

footerStyle

Attribut: data-footer-style
Typ: Function
Detail:

Die Fußzeilenstil-Formatierfunktion nimmt einen Parameter entgegen:
- column: das Spaltenobjekt.
Unterstützt classes oder css. Beispiel für die Verwendung:
```
function footerStyle(column) {
  return {
    css: { 'font-weight': 'normal' },
    classes: 'my-class'
  }
}
```
Standard: {}
Beispiel: Footer Style

formatter

Attribut: data-formatter
Typ: Function
Detail:

Der Kontext (this) ist das Spaltenobjekt.

Die Zellformatierfunktion nimmt vier Parameter entgegen:
- value: der Feldwert.
- row: die Zeilenrekorddaten.
- index: der Zeilenindex.
- field: das Zeilenfeld.
Der erwartete Rückgabetyp ist jQuery, String oder HTMLElement. Andere Typen werden zum String-Typ gezwungen.
Standard: undefined
Beispiel: Column Formatter

halign

Attribut: data-halign
Typ: String
Detail:

Gibt an, wie die Tabellenkopfzeile ausgerichtet werden soll. 'left', 'right', 'center' können verwendet werden.
Standard: undefined
Beispiel: Aligning Columns

order

Attribut: data-order
Typ: String
Detail:

Die Standard-Sortierreihenfolge, kann nur 'asc' oder 'desc' sein.
Standard: 'asc'
Beispiel: Sort Name Order

radio

Attribut: data-radio
Typ: Boolean
Detail:

Setzen Sie true, um ein Optionsfeld anzuzeigen. Die Optionsfeldspalte hat eine feste Breite.

Wenn ein Wert angegeben wird, wird das Kontrollkästchen automatisch aktiviert. Es ist auch möglich, das Optionsfeld zu aktivieren/deaktivieren, indem Sie einen Formatter verwenden (gibt true zurück, um zu aktivieren, gibt false zurück, um zu deaktivieren).
Standard: false
Beispiel: Column Radio

rowspan

Attribut: rowspan | data-rowspan
Typ: Number
Detail:

Gibt an, wie viele Zeilen eine Zelle einnehmen soll.
Standard: undefined
Beispiel: Rowspan Colspan

searchable

Attribut: data-searchable
Typ: Boolean
Detail:

Setzen Sie true, um Daten für diese Spalte zu suchen.
Standard: true
Beispiel: Column Searchable

searchFormatter

Attribut: data-search-formatter
Typ: Boolean
Detail:

Setzen Sie true, um mit formatierten Daten zu suchen.
Standard: true
Beispiel: Search Formatter

searchHighlightFormatter

Attribut: data-search-highlight-formatter
Typ: Boolean|Function
Detail:

Definieren Sie eine function, um einen benutzerdefinierten Hervorhebungsformatter für die search highlight Option zu verwenden.
Standard: true
Beispiel: Searchable Highlight Formatter

showSelectTitle

Attribut: data-show-select-title
Typ: Boolean
Detail:

Setzen Sie true, um den Titel der Spalte mit ‘radio’ oder ‘singleSelect’ ‘checkbox’ Option anzuzeigen.
Standard: false
Beispiel: Show Select Title

sortable

Attribut: data-sortable
Typ: Boolean
Detail:

Setzen Sie true, um die Spalte sortierbar zu machen.
Standard: false
Beispiel: Column Sortable

sorter

Attribut: data-sorter
Typ: Function
Detail:

Die benutzerdefinierte Feldsortierfunktion, die zum lokalen Sortieren verwendet wird, nimmt vier Parameter entgegen:
- fieldA: der erste Feldwert.
- fieldB: der zweite Feldwert.
- rowA: die erste Zeile.
- rowB: die zweite Zeile.
Erwartete Rückgabewerte: -1, 0, 1.
Standard: undefined
Beispiel: Column Sorter

sortName

Attribut: data-sort-name
Typ: String
Detail:

Stellt einen anpassbaren Sortiernamen bereit, nicht den Standard-Sortiernamen im Header oder den Feldnamen der Spalte. Beispielsweise kann eine Spalte den Wert des Feldnamens ‘html’ anzeigen, wie <b><span style="color:red">abc</span></b>, aber ein Feldname zum Sortieren ist ‘content’ mit dem Wert 'abc'.
Standard: undefined
Beispiel: Sort Name Order

switchable

Attribut: data-switchable
Typ: Boolean
Detail:

Setzen Sie false, um die Schaltbarkeit des Spaltenelements zu deaktivieren.
Standard: true
Beispiel: Column Switchable

switchableLabel

Attribut: data-switchable-label
Typ: String
Detail:

Das Label der schaltbaren Spalte im Dropdown. Wenn nicht angegeben, wird der Spaltentitel verwendet.
Standard: undefined
Beispiel: Column Switchable

title

Attribut: data-title
Typ: String
Detail:

Der Spaltentiteltext.
Standard: undefined
Beispiel: Column Title

titleTooltip

Attribut: data-title-tooltip
Typ: String
Detail:

Der Spaltentitel-Tooltip-Text. Der Wert dieser Option wird auch dem HTML title-Attribut zugewiesen.
Standard: undefined
Beispiel: Title Tooltip

valign

Attribut: data-valign
Typ: String
Detail:

Gibt an, wie die Zellendaten ausgerichtet werden sollen. 'top', 'middle', 'bottom' können verwendet werden.
Standard: undefined
Beispiel: Aligning Columns

visible

Attribut: data-visible
Typ: Boolean
Detail:

Setzen Sie false, um das Spaltenelement auszublenden.
Standard: true
Beispiel: Column Visible

width

Attribut: data-width
Typ: Number
Detail:

Die Breite der Spalte. Wenn nicht definiert, wird die Breite automatisch erweitert, um ihren Inhalt zu passen. Wenn die Tabelle jedoch responsive bleibt und zu klein dimensioniert ist, wird diese 'width' möglicherweise ignoriert (verwenden Sie dann min/max-width über Klassen oder ähnliches). Die standardmäßig verwendete Einheit ist ‘px’. Verwenden Sie widthUnit, um sie zu ändern!
Standard: undefined
Beispiel: Column Width

widthUnit

Attribut: data-width-unit
Typ: String
Detail:

Definiert die Einheit, die für die Option width verwendet wird.
Standard: px
Beispiel: Width Unit