Bootstrap Table Éditable

Extension Table Éditable de Bootstrap Table.

Sur cette page

Utilisation du plugin: x-editable

Utilisation

<script src="extensions/editable/bootstrap-table-editable.js"></script>

Options

editable

Attribut : data-editable
type : Boolean
Détail :

Définissez false pour désactiver l’édition de toutes les colonnes.
Par défaut : true

Options de colonne

alwaysUseFormatter

Attribut : data-always-use-formatter
type : Boolean
Détail :

Définissez true pour utiliser toujours le formateur, même si la colonne a déjà été éditée.
Par défaut : false

editable

Attribut : data-editable
type : Object | Function

Détail :

Configuration de x-editable. Liste complète des options: http://vitalets.github.io/x-editable/docs.html#editable.

S’il s’agit du type Function, il est appelé avec les paramètres: index, row, element pour chaque ligne de la table. Il doit retourner l’objet de configuration x-editable.

Toutes les options peuvent être définies via les attributs HTML data-editable-*. Les options globales de la table sont utilisées pour chaque colonne mais peuvent être surchargées:

<table id="my_table_id"
  data-url="data/url.json"
  data-id-field="id"
  data-editable-emptytext="Texte vide par défaut."
  data-editable-url="/my/editable/update/path">
  <thead>
    <tr>
      <th class="col-md-1" data-field="id" data-sortable="true" data-align="center">#</th>
      <th class="col-md-4" data-field="name" data-editable="true">Nom</th>
      <th class="col-md-7" data-field="description" data-editable="true" data-editable-emptytext="Texte vide personnalisé.">Description</th>
    </tr>
  </thead>
</table>

Vous pouvez utiliser noEditFormatter pour désactiver la colonne éditable, par exemple:

{
  editable: {
    noEditFormatter (value, row, index) {
      if (value === 'noEdit') {
        return 'Pas d\'édition'
      }
      return false
    }
  }
}

Par défaut : undefined

Événements

onEditableInit(editable-init.bs.table)

Déclenché lorsque toutes les colonnes ont été initialisées par la méthode $().editable().

onEditableSave(editable-save.bs.table)

Déclenché lorsqu’une cellule éditable est sauvegardée.

paramètres: field, row, rowIndex, oldValue, $el

onEditableShown(editable-shown.bs.table)

Déclenché lorsqu’une cellule éditable est ouverte pour modification.

paramètres: field, row, $el

onEditableHidden(editable-hidden.bs.table)

Déclenché lorsqu’une cellule éditable est masquée/fermée.

paramètres: field, row, $el, reason

Problèmes existants

L’extension editable ne prend pas en charge la recherche dans le type select.