Table Editable

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 類型下不支持搜索。