Bootstrap Table Column Options

L'API des options de colonne de Bootstrap Table.

Sur cette page

Les options de colonne sont définies dans jQuery.fn.bootstrapTable.columnDefaults.

Remarque : Les noms d’options ci-dessous (par exemple, align, checkbox, class) sont des noms de propriétés exacts à utiliser lors de la définition des colonnes dans le tableau columns.

Par exemple :

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

align

attribut : data-align
type : String
Détail :

Indique comment aligner les données de la colonne. 'left' (gauche), 'right' (droite), 'center' (centre) peuvent être utilisés.
Par défaut : undefined
Exemple : Alignement des colonnes

cardVisible

attribut : data-card-visible
type : Boolean
Détail :

Définissez false pour masquer l’élément de colonne dans l’état de vue carte.
Par défaut : true
Exemple : Visibilité en mode carte

cellStyle

attribut : data-cell-style
type : Function
Détail :

La fonction de formatage du style de cellule, prend quatre paramètres :
- value : la valeur du champ.
- row : les données d’enregistrement de la ligne.
- index : l’indice de la ligne.
- field : le champ de la ligne.
Prend en charge les classes ou le CSS.
Par défaut : undefined
Exemple : Style de cellule

checkbox

attribut : data-checkbox
type : Boolean
Détail :

Définissez true pour afficher une case à cocher. La colonne de case à cocher a une largeur fixe.

Si une valeur est donnée, la case à cocher est automatiquement cochée. Il est également possible de cocher/décocher la case à cocher en utilisant un formateur (retourner true pour cocher, retourner false pour décocher).
Par défaut : false
Exemple : Case à cocher de colonne

checkboxEnabled

attribut : data-checkbox-enabled
type : Boolean
Détail :

Définissez false pour désactiver les cases à cocher/boutons radio.
Par défaut : true
Exemple : Case à cocher activée et Case à cocher désactivée

class

attribut : class | data-class
type : String
Détail :

Le nom de classe de la colonne.
Par défaut : undefined
Exemple : Classe de colonne

clickToSelect

attribut : data-click-to-select
type : Boolean
Détail :

Définissez true pour sélectionner la case à cocher ou le bouton radio en cliquant sur les lignes.
Par défaut : true
Exemple : Cliquez pour sélectionner

colspan

attribut : colspan | data-colspan
type : Number
Détail :

Indique combien de colonnes une cellule doit occuper.
Par défaut : undefined
Exemple : Rowspan Colspan

detailFormatter

attribut : data-detail-formatter
type : Function
Détail :

Formatez votre vue détaillée lorsque detailView et detailViewByClick sont définis sur true. Retourne une String et elle sera ajoutée à la cellule de vue détaillée, ou restitue l’élément directement en utilisant le troisième paramètre, qui est un élément jQuery de la cellule cible.

Le fallback est le detail-formatter du tableau.
Par défaut : function(index, row, $element) { return '' }
Exemple : Formateur de détail

escape

attribut : data-escape
type : Boolean
Détail :

Échappe une chaîne pour insertion dans HTML, en remplaçant les caractères &, <, >, ", ` et '.
Par défaut : undefined
Exemple : Échappement de colonne

events

attribut : data-events
type : Object
Détail :

L’écouteur d’événements de cellule, lorsque vous utilisez une fonction de formatage, prend quatre paramètres :
- event : l’événement.
- value : la valeur du champ.
- row : les données d’enregistrement de la ligne.
- index : l’indice de la ligne.
Exemple de code :
```
<th .. data-events="operateEvent">
var operateEvents = {
  'click .like': function (e, value, row, index) {}
}
```
Par défaut : undefined
Exemple : Événements de colonne

falign

attribut : data-falign
type : String
Détail :

Indique comment aligner le pied de tableau. 'left' (gauche), 'right' (droite), 'center' (centre) peuvent être utilisés.
Par défaut : undefined
Exemple : Alignement du pied

field

attribut : data-field
type : String
Détail :

Le nom du champ de la colonne. Ce champ doit être unique, sinon des problèmes inconnus peuvent survenir.
Par défaut : undefined
Exemple : Champ de colonne

footerFormatter

attribut : data-footer-formatter
type : Function
Détail :

Le contexte (this) est l’objet colonne.

La fonction, prend deux paramètres :
- data : Tableau de toutes les lignes de données.
- value : Si des données de pied sont définies, la valeur de la colonne de pied.
Le type de données de retour attendu est jQuery, String ou HTMLElement. Les autres types seront forcés au type String.

Si vous récupérez des données à partir d’un serveur et définissez la valeur du pied à partir de la réponse du serveur, utilisez l’option footerField.
Par défaut : undefined
Exemple : Formateur de pied

footerStyle

attribut : data-footer-style
type : Function
Détail :

La fonction de formatage du style de pied, prend un paramètre :
- column : l’objet colonne.
Prend en charge classes ou css. Exemple d’utilisation :
```
function footerStyle(column) {
  return {
    css: { 'font-weight': 'normal' },
    classes: 'my-class'
  }
}
```
Par défaut : {}
Exemple : Style de pied

formatter

attribut : data-formatter
type : Function
Détail :

Le contexte (this) est l’objet colonne.

La fonction de formatage de cellule, prend quatre paramètres :
- value : la valeur du champ.
- row : les données d’enregistrement de la ligne.
- index : l’indice de la ligne.
- field : le champ de la ligne.
Le type de données de retour attendu est jQuery, String ou HTMLElement. Les autres types seront forcés au type String.
Par défaut : undefined
Exemple : Formateur de colonne

halign

attribut : data-halign
type : String
Détail :

Indique comment aligner l’en-tête du tableau. 'left' (gauche), 'right' (droite), 'center' (centre) peuvent être utilisés.
Par défaut : undefined
Exemple : Alignement des colonnes

order

attribut : data-order
type : String
Détail :

L’ordre de tri par défaut, ne peut être que 'asc' (croissant) ou 'desc' (décroissant).
Par défaut : 'asc'
Exemple : Nom et ordre de tri

radio

attribut : data-radio
type : Boolean
Détail :

Définissez true pour afficher un bouton radio. La colonne de bouton radio a une largeur fixe.

Si une valeur est donnée, la case à cocher est automatiquement cochée. Il est également possible de cocher/décocher le radio en utilisant un formateur (retourner true pour cocher, retourner false pour décocher).
Par défaut : false
Exemple : Bouton radio de colonne

rowspan

attribut : rowspan | data-rowspan
type : Number
Détail :

Indique combien de lignes une cellule doit occuper.
Par défaut : undefined
Exemple : Rowspan Colspan

searchable

attribut : data-searchable
type : Boolean
Détail :

Définissez true pour rechercher des données pour cette colonne.
Par défaut : true
Exemple : Colonne Recherchable

searchFormatter

attribut : data-search-formatter
type : Boolean
Détail :

Définissez true pour rechercher en utilisant les données formatées.
Par défaut : true
Exemple : Formateur de recherche

searchHighlightFormatter

attribut : data-search-highlight-formatter
type : Boolean|Function
Détail :

Définissez une function pour utiliser un formateur de surbrillance personnalisé pour l’option search highlight.
Par défaut : true
Exemple : Formateur de surbrillance de recherche

showSelectTitle

attribut : data-show-select-title
type : Boolean
Détail :

Définissez true pour afficher le titre de la colonne avec l’option ‘radio’ ou ‘singleSelect’ ‘checkbox’.
Par défaut : false
Exemple : Afficher le titre de sélection

sortable

attribut : data-sortable
type : Boolean
Détail :

Définissez true pour permettre au tri de la colonne.
Par défaut : false
Exemple : Colonne Triable

sorter

attribut : data-sorter
type : Function
Détail :

La fonction de tri de champ personnalisée utilisée pour effectuer un tri local, prend quatre paramètres :
- fieldA : la première valeur de champ.
- fieldB : la seconde valeur de champ.
- rowA : la première ligne.
- rowB : la seconde ligne.
Valeurs de retour attendues : -1, 0, 1.
Par défaut : undefined
Exemple : Tri de colonne

sortName

attribut : data-sort-name
type : String
Détail :

Fournit un sort-name personnalisable, pas le sort-name par défaut dans l’en-tête, ni le nom de champ de la colonne. Par exemple, une colonne peut afficher la valeur du fieldName ‘html’ tel que <b><span style="color:red">abc</span></b>, mais un fieldName à trier est ‘content’ avec la valeur 'abc'.
Par défaut : undefined
Exemple : Nom et ordre de tri

switchable

attribut : data-switchable
type : Boolean
Détail :

Définissez false pour désactiver la commutabilité de l’élément de colonne.
Par défaut : true
Exemple : Colonne commutables

switchableLabel

attribut : data-switchable-label
type : String
Détail :

L’étiquette de la colonne commutables dans le menu déroulant. Si elle n’est pas spécifiée, utilise le titre de la colonne.
Par défaut : undefined
Exemple : Colonne commutables

title

attribut : data-title
type : String
Détail :

Le texte du titre de la colonne.
Par défaut : undefined
Exemple : Titre de colonne

titleTooltip

attribut : data-title-tooltip
type : String
Détail :

Le texte de l’infobulle du titre de la colonne. La valeur de cette option sera également appliquée à l’attribut HTML title.
Par défaut : undefined
Exemple : Infobulle de titre

valign

attribut : data-valign
type : String
Détail :

Indique comment aligner les données de la cellule. 'top' (haut), 'middle' (milieu), 'bottom' (bas) peuvent être utilisés.
Par défaut : undefined
Exemple : Alignement des colonnes

visible

attribut : data-visible
type : Boolean
Détail :

Définissez false pour masquer l’élément de colonne.
Par défaut : true
Exemple : Visibilité de colonne

width

attribut : data-width
type : Number
Détail :

La largeur de la colonne. Si elle n’est pas définie, la largeur s’étendra automatiquement pour s’adapter à son contenu. Toutefois, si le tableau est responsive et trop petit, cette 'width' risque d’être ignorée (utilisez min/max-width via classe ou autre dans ce cas). L’unité par défaut utilisée est ‘px’. Utilisez widthUnit pour la changer !
Par défaut : undefined
Exemple : Largeur de colonne

widthUnit

attribut : data-width-unit
type : String
Détail :

Définit l’unité utilisée pour l’option width.
Par défaut : px
Exemple : Unité de largeur