完美解决bootstrap4 table 支持x-edittable 解决方案,分享一下思路(拦截formatter,进一步深加工)

--------------------------2019/1/11日跟新---------

修复bootstrap-select,更改值后不生效问题  ,如果之前有下载的,麻烦告诉我邮箱,我私发更新的js

 -------------------------2018-/12/20日更新-----------------------

喜欢的话请多多支持。可以交流,花1天时间弄 ,弄得不好。请多海涵

bootstrap-table.min.js 我改过。 扩展的是 utilexctension.js

完美解决bootstrap4 table 支持x-edittable 解决方案,分享一下思路(拦截formatter,进一步深加工)_第1张图片

扩展包下载地址:https://download.csdn.net/download/qq_18730505/10864665

仿照X-edittable 的写法。去使用,完美适配bootstrap4

先看一下效果图,喜欢就下。不喜欢不下。不能满足所有人。有bug 麻烦评论谢谢

完美解决bootstrap4 table 支持x-edittable 解决方案,分享一下思路(拦截formatter,进一步深加工)_第2张图片

完美解决bootstrap4 table 支持x-edittable 解决方案,分享一下思路(拦截formatter,进一步深加工)_第3张图片

 只支持js 实现, 在column 中 添加上图中的信息

content '' 和 id  用不到。因为本人有其他需求。所以加了这个

editColumn:{

type:默认true,

placement:默认top

title:自己定 有默认值

 

}

下面的代码必须加。不加不行 。在执行之前 调用我的方法,重写formatter方法,原理(在formatter 原有方法执行后 添加回调函数 包装一层。)

完美解决bootstrap4 table 支持x-edittable 解决方案,分享一下思路(拦截formatter,进一步深加工)_第4张图片

引入 utilexctension.js 文件。封装的不咋地。凑活用。解决实际问题 才是重点。

 

 

---------------------------2018 /12/19 日发表   (实现思路)--------------------------------

近几天将会提交封装好的工具放到csdn供大家参考学习。

解决思路:在formatter层深加工

常规写 比较麻烦
注意上图中 的 editColumn。此处模拟了 xedit中的写法

​​​​​$("#table").bootstrapTable(onPreBody:function(){
//处理方法 
   处理方法为:判断columns列中每一列是否包含 editColumn字段。如果有。默认启动编辑功能
   抽取默认formatter 方法。没有则为undefined。给formatter方法添加回掉函数 让其走自己的formatter方法后在尽心数据包装
包装成 popover 那种类型。下面展示一下部分代码
单纯这样写肯定不行。还需要修改 bootstrap-table.min.js文件内容
})
修改默认 onPreBody方法。将自己的formatter方法提交给 options,单纯的提交还不行。还需要告知 j方法去调用,
下图中 this.header.formatters 看出 。类似于先注册。

完美解决bootstrap4 table 支持x-edittable 解决方案,分享一下思路(拦截formatter,进一步深加工)_第5张图片

完美解决bootstrap4 table 支持x-edittable 解决方案,分享一下思路(拦截formatter,进一步深加工)_第6张图片完美解决bootstrap4 table 支持x-edittable 解决方案,分享一下思路(拦截formatter,进一步深加工)_第7张图片

完美解决bootstrap4 table 支持x-edittable 解决方案,分享一下思路(拦截formatter,进一步深加工)_第8张图片

最终看一下效果

完美解决bootstrap4 table 支持x-edittable 解决方案,分享一下思路(拦截formatter,进一步深加工)_第9张图片

你可能感兴趣的:(jquery,bootstrap4,x-edittable)