bootstrap-table实现表格编辑

bootstrap-table实现表格编辑

应用场景
点击单元格可编辑、点击行对行数据修改、列表可伸缩、支持数据下载。
一、 表格行内编辑

1. 效果展示
   编辑前
   

点击某个单元格数据

编辑完成后

2．实现过程
2.1 引入资源文件(其他基本需要文件略)

2.2 js里面初始化表格

2.3在js里面初始化表格的时候注册编辑保存的事件

参数field,row,oldValue,$el分别为当前列的名称、当前行数据对象、更新前的值、编辑的当前单元格的jQuery对象。

二、 行数据的修改

1. 效果展示
   修改前
   

单击行弹出修改页面

修改后Submit

结果

2. 实现过程
   2.1 同表格行内编辑，引入文件
   2.2 在js里面初始化表格的时候注册点击行事件、编辑保存事件
   
   

可能会存在的问题：

1. 提交到后台的数据乱码，需要编码。
2. 数据格式不对。我的后台接口接受的是json格式数据，但是直接将from序列化后传递到后台发现错误，所以此处将from转换为数组，再将数组数据写成json格式传递到后台。

三、 列表可伸缩。

1. 效果展示(当表的列果多，又想在当前窗口全部显示，需要列可以伸缩。)
   
2. 实现过程
   2.1 引入资源文件

2.2 Js表格初始化的时候添加属性

四、 支持数据下载。

1. 效果展示
   关于表格数据导出，bootstrap table支持三种模式的导出：basic、all、selected。也就是当前页数据导出、所有数据导出、选中数据导出。并且支持导出多种类型的文件，比如常见的excel、xml、json等格式。
   选择2行数据导出为MS-Excel
   
   导出结果
   
   
2. 实现过程
   2.1引入资源文件

2.2 Js表格初始化的时候设置属性
对选中行数据导出