bootstarp-table与editable整合记录

bootstarp-table与editable整合记录

在bootstrap-table的扩展示例中有关于editable的记录，关于使用的例子似乎失效了，因此记录下整合的过程。

要使用此功能需要引入的文件

css/bootstrap.min.css
bootstrap-table/bootstrap-table.css
bootstrap3-editable/css/bootstrap-editable.css
js/jquery-2.1.0.min.js
js/bootstrap.min.js
bootstrap-table/bootstrap-table.js
bootstrap3-editable/js/bootstrap-editable.min.js
bootstrap-table/bootstrap-table-editable.js
bootstrap-table/locale/bootstrap-table-zh-CN.js
除此外还有一些字体文件，就不列举了。

关于代码结构一点说明

bootstrap-table-editable作为桥接文件处理了将bootstrapTable中的editable属性映射为editable控件，实际开发时应该修改。
部分代码如下：

$('#my_table_id').bootstrapTable();
<table id="my_table_id"
  data-url="data.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="ParentName" data-editable="true" data-editable-emptytext="Custom empty text.">Description</th>
    </tr>
  </thead>
</table>

页面效果如下图：

虽然控件提供了编辑功能，但是对于习惯于excel的用户这样的编辑方式可能仍然不满意吧。