テーブルの編集可能

Bootstrap Tableの行内編集拡張機能。セル編集機能をサポートします。

このページ

行内編集拡張機能は x-editable プラグインに基づいており、テーブルに行内編集機能を追加します。ユーザーはセルを直接クリックして編集できます。

使用方法

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

オプション

editable

属性: data-editable
型: Boolean
詳細:

編集機能を有効にするかどうかをグローバルに制御します。false に設定すると、すべての列の編集機能が無効になります。true に設定すると、編集機能が有効になります（列ごとに個別に設定が必要です）。
デフォルト値: true

列オプション

alwaysUseFormatter

属性: data-always-use-formatter
型: Boolean
詳細:

true に設定すると、その列が既に編集されている場合でも、常にformatterを使用します。
デフォルト値: false

editable

属性: data-editable
型: Object | Function

詳細:

x-editableの設定項目。完全な設定については、http://vitalets.github.io/x-editable/docs.html#editable を参照してください。

関数型の場合、テーブルの各行で呼び出されます。パラメータはindex、row、elementで、x-editableの設定オブジェクトを返す必要があります。

すべてのオプションは data-editable-* HTML属性で定義できます。テーブルレベルのオプションはすべての列に適用され、列レベルで上書きできます：

<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>

noEditFormatter を使用して、一部の値を編集不可にすることができます。例：

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

デフォルト値: undefined

イベント

onEditableInit (editable-init.bs.table)

すべての列が $().editable() メソッドで初期化されたときにトリガーされます。

onEditableSave (editable-save.bs.table)

編集可能なセルが保存されたときにトリガーされます。

パラメータ：field、row、rowIndex、oldValue、$el

onEditableShown (editable-shown.bs.table)

編集可能なセルが編集のために開かれたときにトリガーされます。

パラメータ：field、row、$el

onEditableHidden (editable-hidden.bs.table)

編集可能なセルが非表示/閉じられたときにトリガーされます。

パラメータ：field、row、$el、reason

既知の問題

Table Editable拡張機能は、select タイプでは検索をサポートしていません。