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

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

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

上图

用到的框架  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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yanpengfeil

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值