前端实现bootstarpTable 导出Excel(所有数据)、自定义导出(用户可自行筛选拖拽,实现动态表格)

需求如标题(前端实现用户可自定义表格数据,并完成导出)

有查看过bootStarp关于导出文件源码的朋友可能知道 bootStarp虽然提供了导出文件的ui,但是功能却并不是他自己的,而是调用的其他插件的(js),而且坏会有一些其他问题 于是自己搞....

上图

前端实现bootstarpTable 导出Excel(所有数据)、自定义导出(用户可自行筛选拖拽,实现动态表格)_第1张图片

前端实现bootstarpTable 导出Excel(所有数据)、自定义导出(用户可自行筛选拖拽,实现动态表格)_第2张图片

前端实现bootstarpTable 导出Excel(所有数据)、自定义导出(用户可自行筛选拖拽,实现动态表格)_第3张图片

用到的框架  jq啥的就不说了

bootStarp(表格)、layui(Ui)、jqueryUi(实现拖拽)

思路

1)打开这个页面后传递过来所需要的参数,请求后台(也可以写配置文件在前台)取出表的字段名(主要是为了要显示的中文,及表头)在此功能内称之为 bean

2)根据 bean 格式化bootStarp table需要的 cloum[]及设置表头  在此功能内称之为 cloum

3)设置colum 刷新表格数据

生产bean,设置bean、生产colum,设置colum 完活

左半部分的字段中文是可以拖拽改变位置的,此处可以设置成位置改变后刷新表格数据展示(但是感觉没什么必要,而且会增加服务器压力,主要是还得 看jqui代码 -_-!!)点击底部预览按钮可完成刷新操作,或者直接导出 也会先走一次 预览刷新。

代码不贴了 已经打包上传csdn了  有问题留言  大家一起讨论

代码及包下载地址 https://download.csdn.net/download/yanpengfeil/11295970

你可能感兴趣的:(前端Util,前端技术)