Bootstrap-table-editable 有谁用过

本文记录一下项目中实现BootstrapTable单个单え格编辑后立马提交保存、批量编辑已经选中的单元格后提交保存的实现

正确引用js、css文件后,就可以去实现单元格编辑了

1、单个单元格编辑马上ajax提交保存

上面的代码可以实现单个表格的编辑,效果如图输入内容后点击√确定后会触发onEditableSave方法执行ajax请求提交数据保存。


2、批量编辑已经选中行的单元格统一保存实现

上面的代码可实现对已经勾选的行单元格批量编辑好之后统一提交保存。效果如图对于勾选Φ的两行进行单元格编辑后,点击保存按钮触发我们定义的addgardenMenus()方法执行数据提交保存的操作

  • 吴学文说创业三条件 :特别的项目、资金、管悝私营企业的经验和能力。 不是单打独斗的年代我们该有个团队一起去完成我...

  • 唐嫣今年的事业发展的顺风顺水,参演的多部电影都拿到叻不错的票房10月当上了金鹰女神,最近正在热播的《锦绣未央》也...

3.获取表格内所有编辑过的数据传輸到后端
4.不同类型文本框的引用

在引用x-editable时项目使用的bootstrap版本为4,目前x-editable组件官方最新组件只更新到bootstrap3所以出现了行内编辑弹出框不出现,js报錯问题于是引入了popper.js(一个轻量级的tooltips提示类js插件)来解决行内编辑弹出框位置自动适应问题。同时参照了stackoverflow( 解决x-edittable与bootstrap4的问题,修改了部分源码最终解决了问题。其中效果展示如下:
对与样式不同的修改,比较简单这里就不在叙述了。

二、行内编辑使用 1.基本的js书写

2.获取表格内所有编辑过的数据传输到后端
增加按钮绑定事件当点击保存时使用bootstrap-table自带的getData方法获取表格内所有数据并传输到后端

我要回帖

 

随机推荐