表格可编辑

Bootstrap 表格的可编辑扩展。

使用插件：x-editable

使用方法

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

选项

可编辑

• 属性： data-editable

• 类型： Boolean

• 详情

  设置为 false 可禁用所有列的可编辑功能。

• 默认值： true

列选项

始终使用格式化程序

• 属性： data-always-use-formatter

• 类型： Boolean

• 详情

  设置为 true 可始终使用格式化程序，即使该列已被编辑过。

• 默认值： false

可编辑

• 属性： data-editable

• 类型： Object | Function

• 详情

  x-editable 的配置。选项列表：http://vitalets.github.io/x-editable/docs.html#editable。

  如果是 Function 类型，它会使用参数 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

现有问题

• 可编辑扩展不支持 select 类型的可搜索。