layui + mvc + ajax 导出Excel功能

直接上效果图和源码:

layui + mvc + ajax 导出Excel功能_第1张图片

1.先全选数据,然后点击导出,这里的表格是Layui的表格

 

layui + mvc + ajax 导出Excel功能_第2张图片

2.前端ui使用取值

  不懂使用Layui的可以去官网有详细文档连接:https://www.layui.com   test是表格的id

 

layui + mvc + ajax 导出Excel功能_第3张图片

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

 

layui + mvc + ajax 导出Excel功能_第4张图片

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

 

layui + mvc + ajax 导出Excel功能_第5张图片

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

 

layui + mvc + ajax 导出Excel功能_第6张图片

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

 

layui + mvc + ajax 导出Excel功能_第7张图片

7.这里是在浏览器执行下载任务的方法:5和6把数据导进Excel后,1图 前端ajax就进7这个方法让浏览器去执行下载任务

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

  大功告成!

8.最后效果图

layui + mvc + ajax 导出Excel功能_第8张图片

 

9.打开效果

  layui + mvc + ajax 导出Excel功能_第9张图片

 

  总结:

    虽然网上找的各种各样的例子,都大同小异但是写法不同调用的方式也不同,最后自己适合自己的才是有用的!还有不懂的小伙伴可以在下方留言

下面补充点前端html代码

layui + mvc + ajax 导出Excel功能_第10张图片

 

箭头部分就是表格

 

layui + mvc + ajax 导出Excel功能_第11张图片

 

 

  这就是Layui的表格引用方法,我就不粘贴代码了手打才知道这是什么意思为啥这样打,直接赋值粘贴代码是没用的。有个大神跟我们说过只要你打够10万行不一样的代码,你就是大神!双击不了图片就鼠标右键在新标签打开图片就能看到最清晰的图片了

 

你可能感兴趣的:(layui + mvc + ajax 导出Excel功能)