Opzioni delle colonne di Bootstrap Table

L'API delle opzioni delle colonne di Bootstrap Table.

In questa pagina

Le opzioni delle colonne sono definite in jQuery.fn.bootstrapTable.columnDefaults.

Nota: I nomi delle opzioni qui sotto (ad esempio, align, checkbox, class) sono nomi di proprietà esatti da utilizzare quando si definiscono le colonne nell’array columns.

Ad esempio:

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

align

Attributo: data-align
Tipo: String
Dettagli:

Indica come allineare i dati della colonna. È possibile utilizzare 'left' (sinistra), 'right' (destra), 'center' (centro).
Default: undefined
Esempio: Allineamento colonne

cardVisible

Attributo: data-card-visible
Tipo: Boolean
Dettagli:

Imposta false per nascondere l’elemento della colonna nello stato di visualizzazione a card.
Default: true
Esempio: Card Visible

cellStyle

Attributo: data-cell-style
Tipo: Function
Dettagli:

La funzione formattatrice per lo stile della cella, accetta quattro parametri:
- value: il valore del campo.
- row: i dati del record della riga.
- index: l’indice della riga.
- field: il campo della riga.
Supporta classi o CSS.
Default: undefined
Esempio: Stile cella

checkbox

Attributo: data-checkbox
Tipo: Boolean
Dettagli:

Imposta true per mostrare una casella di controllo. La colonna delle caselle di controllo ha una larghezza fissa.

Se viene fornito un valore, la casella di controllo viene automaticamente selezionata. È anche possibile selezionare/deselezionare la casella di controllo utilizzando un formattatore (ritorna true per selezionare, false per deselezionare).
Default: false
Esempio: Casella di controllo colonna

checkboxEnabled

Attributo: data-checkbox-enabled
Tipo: Boolean
Dettagli:

Imposta false per disabilitare le caselle di controllo/radio button.
Default: true
Esempio: Casella di controllo abilitata e Casella di controllo disabilitata

class

Attributo: class | data-class
Tipo: String
Dettagli:

Il nome della classe della colonna.
Default: undefined
Esempio: Classe colonna

clickToSelect

Attributo: data-click-to-select
Tipo: Boolean
Dettagli:

Imposta true per selezionare la casella di controllo o il radio button quando si fa clic sulle righe.
Default: true
Esempio: Clic per selezionare

colspan

Attributo: colspan | data-colspan
Tipo: Number
Dettagli:

Indica quante colonne dovrebbe occupare una cella.
Default: undefined
Esempio: Rowspan Colspan

detailFormatter

Attributo: data-detail-formatter
Tipo: Function
Dettagli:

Formatta la vista dettagliata quando detailView e detailViewByClick sono impostati su true. Restituisce una String che verrà aggiunta alla cella della vista dettagliata, opzionalmente renderizza l’elemento direttamente utilizzando il terzo parametro, che è un elemento jQuery della cella di destinazione.

Il fallback è il detail-formatter della tabella.
Default: function(index, row, $element) { return '' }
Esempio: Formattatore dettagli

escape

Attributo: data-escape
Tipo: Boolean
Dettagli:

Escapa una stringa per l’inserimento in HTML, sostituendo i caratteri &, <, >, ", ` e '.
Default: undefined
Esempio: Escape colonna

events

Attributo: data-events
Tipo: Object
Dettagli:

Il listener degli eventi della cella, quando si utilizza la funzione formattatrice, accetta quattro parametri:
- event: l’evento.
- value: il valore del campo.
- row: i dati del record della riga.
- index: l’indice della riga.
Codice di esempio:
```
<th .. data-events="operateEvent">
var operateEvents = {
  'click .like': function (e, value, row, index) {}
}
```
Default: undefined
Esempio: Eventi colonna

falign

Attributo: data-falign
Tipo: String
Dettagli:

Indica come allineare il piè di tabella. È possibile utilizzare 'left' (sinistra), 'right' (destra), 'center' (centro).
Default: undefined
Esempio: Allineamento piè di tabella

field

Attributo: data-field
Tipo: String
Dettagli:

Il nome del campo della colonna. Questo campo deve essere unico, altrimenti potrebbero verificarsi problemi sconosciuti.
Default: undefined
Esempio: Campo colonna

footerFormatter

Attributo: data-footer-formatter
Tipo: Function
Dettagli:

Il contesto (this) è l’oggetto colonna.

La funzione, accetta due parametri:
- data: Array di tutte le righe di dati.
- value: Se i dati del piè di tabella sono impostati, il valore della colonna del piè di tabella.
Il tipo di dati restituito atteso è jQuery, String o HTMLElement. Altri tipi saranno forzati al tipo String.

Se recuperi dati da un server e imposti il valore del piè di tabella dalla risposta del server, utilizza l’opzione footerField.
Default: undefined
Esempio: Formattatore piè di tabella

footerStyle

Attributo: data-footer-style
Tipo: Function
Dettagli:

La funzione formattatrice per lo stile del piè di tabella, accetta un parametro:
- column: l’oggetto colonna.
Supporta classes (classi) o css. Esempio di utilizzo:
```
function footerStyle(column) {
  return {
    css: { 'font-weight': 'normal' },
    classes: 'my-class'
  }
}
```
Default: {}
Esempio: Stile piè di tabella

formatter

Attributo: data-formatter
Tipo: Function
Dettagli:

Il contesto (this) è l’oggetto colonna.

La funzione formattatrice della cella, accetta quattro parametri:
- value: il valore del campo.
- row: i dati del record della riga.
- index: l’indice della riga.
- field: il campo della riga.
Il tipo di dati restituito atteso è jQuery, String o HTMLElement. Altri tipi saranno forzati al tipo String.
Default: undefined
Esempio: Formattatore colonna

halign

Attributo: data-halign
Tipo: String
Dettagli:

Indica come allineare l’intestazione della tabella. È possibile utilizzare 'left' (sinistra), 'right' (destra), 'center' (centro).
Default: undefined
Esempio: Allineamento colonne

order

Attributo: data-order
Tipo: String
Dettagli:

L’ordine di ordinamento predefinito, può essere solo 'asc' (crescente) o 'desc' (decrescente).
Default: 'asc'
Esempio: Nome e ordine di ordinamento

radio

Attributo: data-radio
Tipo: Boolean
Dettagli:

Imposta true per mostrare un radio button. La colonna dei radio button ha una larghezza fissa.

Se viene fornito un valore, il radio button viene automaticamente selezionato. È anche possibile selezionare/deselezionare il radio button utilizzando un formattatore (ritorna true per selezionare, false per deselezionare).
Default: false
Esempio: Radio button colonna

rowspan

Attributo: rowspan | data-rowspan
Tipo: Number
Dettagli:

Indica quante righe dovrebbe occupare una cella.
Default: undefined
Esempio: Rowspan Colspan

searchable

Attributo: data-searchable
Tipo: Boolean
Dettagli:

Imposta true per cercare dati per questa colonna.
Default: true
Esempio: Colonna cercabile

searchFormatter

Attributo: data-search-formatter
Tipo: Boolean
Dettagli:

Imposta true per cercare utilizzando dati formattati.
Default: true
Esempio: Formattatore di ricerca

searchHighlightFormatter

Attributo: data-search-highlight-formatter
Tipo: Boolean|Function
Dettagli:

Definisci una function per utilizzare un formattatore di evidenziazione personalizzato per l’opzione search highlight.
Default: true
Esempio: Formattatore di evidenziazione cercabile

showSelectTitle

Attributo: data-show-select-title
Tipo: Boolean
Dettagli:

Imposta true per mostrare il titolo della colonna con l’opzione ‘radio’ o ‘singleSelect’ ‘checkbox’.
Default: false
Esempio: Mostra titolo selezione

sortable

Attributo: data-sortable
Tipo: Boolean
Dettagli:

Imposta true per consentire al colonna di essere ordinata.
Default: false
Esempio: Colonna ordinabile

sorter

Attributo: data-sorter
Tipo: Function
Dettagli:

La funzione di ordinamento personalizzata del campo che viene utilizzata per fare l’ordinamento locale, accetta quattro parametri:
- fieldA: il primo valore del campo.
- fieldB: il secondo valore del campo.
- rowA: la prima riga.
- rowB: la seconda riga.
Valori di ritorno attesi: -1, 0, 1.
Default: undefined
Esempio: Ordinatore colonna

sortName

Attributo: data-sort-name
Tipo: String
Dettagli:

Fornisce un nome di ordinamento personalizzabile, non il nome di ordinamento predefinito nell’intestazione, o il nome del campo della colonna. Ad esempio, una colonna potrebbe visualizzare il valore del fieldName ‘html’ come <b><span style="color:red">abc</span></b>, ma un fieldName per ordinare è ‘content’ con il valore 'abc'.
Default: undefined
Esempio: Nome e ordine di ordinamento

switchable

Attributo: data-switchable
Tipo: Boolean
Dettagli:

Imposta false per disabilitare la possibilità di commutare l’elemento della colonna.
Default: true
Esempio: Colonna commutabile

switchableLabel

Attributo: data-switchable-label
Tipo: String
Dettagli:

L’etichetta della colonna commutabile nel menu a discesa. Se non specificato, utilizza il titolo della colonna.
Default: undefined
Esempio: Colonna commutabile

title

Attributo: data-title
Tipo: String
Dettagli:

Il testo del titolo della colonna.
Default: undefined
Esempio: Titolo colonna

titleTooltip

Attributo: data-title-tooltip
Tipo: String
Dettagli:

Il testo del tooltip del titolo della colonna. Il valore di questa opzione verrà anche applicato all’attributo HTML title.
Default: undefined
Esempio: Tooltip titolo

valign

Attributo: data-valign
Tipo: String
Dettagli:

Indica come allineare i dati della cella. È possibile utilizzare 'top' (alto), 'middle' (centro), 'bottom' (basso).
Default: undefined
Esempio: Allineamento colonne

visible

Attributo: data-visible
Tipo: Boolean
Dettagli:

Imposta false per nascondere l’elemento della colonna.
Default: true
Esempio: Colonna visibile

width

Attributo: data-width
Tipo: Number
Dettagli:

La larghezza della colonna. Se non definita, la larghezza si espanderà automaticamente per adattarsi al contenuto. Tuttavia, se la tabella è lasciata responsive e dimensionata troppo piccola, questa 'width' potrebbe essere ignorata (in tal caso utilizza min/max-width tramite classe o simili). L’unità utilizzata per impostazione predefinita è ‘px’. Utilizza widthUnit per cambiarla!
Default: undefined
Esempio: Larghezza colonna

widthUnit

Attributo: data-width-unit
Tipo: String
Dettagli:

Definisce l’unità utilizzata per l’opzione width.
Default: px
Esempio: Unità di larghezza