Bootstrap-Table的Web表格进阶---实时编辑

      Bootstrap-table是我目前使用过比好的Web前端表格框架，在实际工作也带了很多的实现便利，关于Bootstap-table基本的介绍可参考我之前的文章《基于Bootstrap-Table的Web表格教程》，本文将介绍Bootstrap-Table扩展功能---实时编辑。

---

一、使用Bootstrap-Table实现实时编辑步骤

      在详细介绍实现实时编辑前，先说说基本实现过程，wenzhixin(文翼)大牛开发的Bootstrap-Table本身是不支持实时编辑的，由于工作中项目的需要，需要对大量的字段内容进行增删改查，本来想使用Form表单来解决，但表单不太灵活特别是在出现大量输入字段时，操作保存任何字段值都要刷新整个页面，其用户体验差，先上图看看我们的一个实现的效果：

使用Bootstrap-table实现表单编辑功能

使用Bootstrap-table实现动态添加行与合并单元格

二、实现步骤如下：

1.加载表格扩展功能bootstrap-table-editable与插件x-editable

2.初始化动态创建Table表单

3.监听表格保存事件实现实时保存

下面将介绍实现过程：

1、加载表格扩展功能bootstrap-table-editable与插件x-editable

        Bootstrap-table是通过扩展bootstrap-table-editable来实现单元格的编辑功能的，bootstrap-table-editable会引用第三方强大的Bootstrap的插件x-editable功能，所以也需要在html中一并引入如下图：

在html中引用bootstrap-table-editable与插件x-editable

注意：bootstrap-table-editable只引用x-editable的部分功能，x-editable的功能很强大如果大家有兴趣也可以研究一下：X-editable Home

2、初始化动态创建Table表单

         1). 先定义一个类似表单的表格，先定义表格的属性与表头的结构、表结构的定义可参考我之前的基础教程，详细定义如下，此样例是定义在模态框中，当然大家也可以直接定义在当前的某个页面中：

表格在html中的定义

定义表头的结构

注意：showHeader:false表示影藏表头，这样看起来更像表单，editable:{}属性定义了单元格编辑属性，"inline"表示在表格内显示编辑框还有另一种模式是"popup"即弹出模态，"textarea"：表示是一个文本域框。详细请参考x-editable插件的说明：x-editable编辑插件的属性定义

2).通过Bootstrap-table的append方法来动态初始化表格的行

append方法来动态初始化表格的行

从上到下一行行初始化表格每一行、并通过appen的方法来添加到表格中。

3)当添加完成后你可能还需要对一些单元格进行合并，即Merge操作，如下函数代码：

对一些单元格进行合并，其实现效果参考前面的图《使用Bootstrap-table实现的动态添加行与合并单元格》

合并单元格使用'mergeCells'方法。append与mergeCells的定义与样例可参考bootstrap-table的官方文档。append方法官方例子、mergeCells方法官方例子

3.监听表格保存事件实现实时保存

1).添加一个【editable-save.bs.table】事件监听器，监听用户的保存操作，当用户输入内容并点击确认按钮即那个带打勾的按钮后就会促发监听器。

监听用户的保存操作

在使用on方法调用off方法是为了防止多次添加同事件监听，所以先删除监听再添加监听。回调函数的详细介绍请此链接：bootstrap-table-editable扩展功能

2).在监听器中通过Ajax调用将数据实时保存到后台服务：

通过Ajax调用将数据实时保存到后台

三、总结：

       本文只是bootstrap-table的一个应用实践经验但不一定是很好的表格实时编辑解决方案，如果大家有兴趣的话除了也可以尝试着使用强大的X-editable来实现同样的功能。PS:本人不是专业的Web端开发人员，只是抛砖引玉，如有相关Web开发的概念错误敬请见谅。