表格可编辑

Bootstrap Table 的可编辑扩展。

使用插件：x-editable

使用方法

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

选项

editable

• 属性： data-editable

• 类型： Boolean

• 详情：

  设置为 false 以禁用所有列的可编辑性。

• 默认值： true

列选项

alwaysUseFormatter

• 属性： data-always-use-formatter

• 类型： Boolean

• 详情：

  设置为 true 以始终使用格式化器，即使列已经被编辑。

• 默认值： false

editable

• 属性： 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

现有问题

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