Auf GitHub anzeigen

Bootstrap Table Editable

Die Editable-Erweiterung der Bootstrap Table.

Auf dieser Seite

Verwendetes Plugin: x-editable

Verwendung

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

Optionen

editable

  • Attribut: data-editable

  • Typ: Boolean

  • Detail:

    Setzen Sie false, um die Bearbeitbarkeit aller Spalten zu deaktivieren.

  • Standard: true

Spaltenoptionen

alwaysUseFormatter

  • Attribut: data-always-use-formatter

  • Typ: Boolean

  • Detail:

    Setzen Sie true, um immer den Formatter zu verwenden, auch wenn die Spalte bereits bearbeitet wurde.

  • Standard: false

editable

  • Attribut: data-editable

  • Typ: Object | Function

  • Detail:

    Konfiguration von x-editable. Vollständige Liste der Optionen: http://vitalets.github.io/x-editable/docs.html#editable.

    Wenn es sich um den Typ Function handelt, wird es mit den Parametern: index, row, element für jede Zeile der Tabelle aufgerufen. Es sollte das Objekt der x-editable-Konfiguration zurückgeben.

    Alle Optionen können über data-editable-* HTML-Attribute definiert werden. Tabellenweite Optionen werden für jede Spalte verwendet, können aber überschrieben werden:

    <table id="my_table_id"
      data-url="data/url.json"
      data-id-field="id"
      data-editable-emptytext="Default empty text."
      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">Name</th>
          <th class="col-md-7" data-field="description" data-editable="true" data-editable-emptytext="Custom empty text.">Description</th>
        </tr>
      </thead>
    </table>

    Sie können noEditFormatter verwenden, um die bearbeitbare Spalte zu deaktivieren, beispielsweise:

    {
      editable: {
        noEditFormatter (value, row, index) {
          if (value === 'noEdit') {
            return 'No Edit'
          }
          return false
        }
      }
    }
  • Standard: undefined

Events

onEditableInit(editable-init.bs.table)

Wird ausgelöst, wenn alle Spalten durch die $().editable()-Methode initialisiert wurden.

onEditableSave(editable-save.bs.table)

Wird ausgelöst, wenn eine bearbeitbare Zelle gespeichert wird.

Parameter: field, row, rowIndex, oldValue, $el

onEditableShown(editable-shown.bs.table)

Wird ausgelöst, wenn eine bearbeitbare Zelle zum Bearbeiten geöffnet wird.

Parameter: field, row, $el

onEditableHidden(editable-hidden.bs.table)

Wird ausgelöst, wenn eine bearbeitbare Zelle ausgeblendet/geschlossen wird.

Parameter: field, row, $el, reason

Die vorhandenen Probleme

  • Die editable-Erweiterung unterstützt searchable nicht im select-Typ.