欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

layui + 三层架构 + ajax 导出Excel功能

程序员文章站 2024-02-05 21:57:40
直接上效果图和源码: 1.先全选数据,然后点击导出 2.前端ui使用取值 不懂使用Layui的可以去官网有详细文档连接:https://www.layui.com 3.这是后台控制器必须要引入的文件,可以在vs工具->NuGet包管理->程序包管理设置 (里面搜索) 4.这是后台代码,事件,从dal ......

直接上效果图和源码:

layui + 三层架构 + ajax 导出Excel功能

1.先全选数据,然后点击导出

 

layui + 三层架构 + ajax 导出Excel功能

2.前端ui使用取值

  不懂使用layui的可以去官网有详细文档连接:

 

layui + 三层架构 + ajax 导出Excel功能

3.这是后台控制器必须要引入的文件,可以在vs工具->nuget包管理->程序包管理设置 (里面搜索)

 

layui + 三层架构 + ajax 导出Excel功能

4.这是后台代码,事件,从dal层查询到数据放到list集合中,上面是定义表头

 

layui + 三层架构 + ajax 导出Excel功能

5.上面是循环数据,把数据循环,放到表格里面去

 

layui + 三层架构 + ajax 导出Excel功能

6,这里是定义文件夹路径,先获取项目的基目录,如何项目文件里没有这个文件夹就默认创建一个文件夹名为:uploadss,后面是添加excel文件的表名,(注意获取到基目录后 面 的“\\” 斜杠必须加)。

 

layui + 三层架构 + ajax 导出Excel功能

7.这里是,6返回给前台后的路径,在返回值哪里调用通过

  success: function () {
    window.location.href = "/left_d/dataexcel"; //跳到导出方法
  }

  大功告成!

8.最后效果图

layui + 三层架构 + ajax 导出Excel功能

 

9.打开效果

  layui + 三层架构 + ajax 导出Excel功能

 

  总结:

    虽然网上找的各种各样的例子,都大同小异但是写法不同调用的方式也不同,最后自己适合自己的才是有用的!