bootstrap-table实现表格编辑
bootstrap-table实现表格编辑
应用场景
点击单元格可编辑、点击行对行数据修改、列表可伸缩、支持数据下载。
一、 表格行内编辑
- 效果展示
编辑前
点击某个单元格数据
编辑完成后
2.实现过程
2.1 引入资源文件(其他基本需要文件略)
2.2 js里面初始化表格
2.3在js里面初始化表格的时候注册编辑保存的事件
参数field,row,oldValue,$el分别为当前列的名称、当前行数据对象、更新前的值、编辑的当前单元格的jQuery对象。
二、 行数据的修改
- 效果展示
修改前
单击行弹出修改页面
修改后Submit
结果
- 实现过程
2.1 同表格行内编辑,引入文件
2.2 在js里面初始化表格的时候注册点击行事件、编辑保存事件
可能会存在的问题:
- 提交到后台的数据乱码,需要编码。
- 数据格式不对。我的后台接口接受的是json格式数据,但是直接将from序列化后传递到后台发现错误,所以此处将from转换为数组,再将数组数据写成json格式传递到后台。
三、 列表可伸缩。
- 效果展示(当表的列果多,又想在当前窗口全部显示,需要列可以伸缩。)
- 实现过程
2.1 引入资源文件
2.2 Js表格初始化的时候添加属性
四、 支持数据下载。
- 效果展示
关于表格数据导出,bootstrap table支持三种模式的导出:basic、all、selected。也就是当前页数据导出、所有数据导出、选中数据导出。并且支持导出多种类型的文件,比如常见的excel、xml、json等格式。
选择2行数据导出为MS-Excel
导出结果
- 实现过程
2.1引入资源文件
2.2 Js表格初始化的时候设置属性
对选中行数据导出