目录
1.前言
2.单页导出
3.全部页导出
4.代码实例
5.页面展示
一、前言
开发工具:Visual Studio2017
前端框架:layui
使用了layui自带的导出功能后,真的是超级便捷,但是只能导出当前页的数据,又研究了下文档,发现还有【导出任意数据】的功能,也就意味着可以导出全部页的数据,几句代码就能搞定,简直不要太爽。代码和效果图会在最后贴出。
二、单页导出
注意1:自带的导出功能为 layui 2.4.0 开始新增,若是旧版本的layui文件需要重新去官网下载。
注意2:layui 2.4.0 同时还新增筛选列和打印的功能,也是蛮实用的功能。
toolbar: ‘#toolbarDemo’ //开启头部工具栏,并为其绑定左侧模板
title: ‘成绩导出’//导出数据excel的文件名称
- 开启【导出,筛选列和打印】功能代码如下,代码只需两行!~
- 开启导出功能后,点击导出,只能导出单页的数据
三、全部数据导出
Layui文档中写到,尽管 table 的工具栏内置了数据导出按钮(单页导出),但有时你可能需要通过方法去导出任意数据,那么可以借助以下方法:
语法:table.exportFile(id, data, type)
一句代码搞定全部页导出,真的是大大的提高了开发人员的开发效率!简直了,爽歪歪~
三步走:写个导出按钮,编写导出点击事件,调用table的exportFile方法。大功告成!导出时将会导出全部页的数据。
dataList:将要导出的数据
xls:导出的excel的格式
四、代码实例
以下是json静态数据,文件名export.json
[
{
"name": "张三",
"class": "高三",
"scoreMath": "100"
},
{
"name": "李四",
"class": "高三",
"scoreMath": "99"
},
{
"name": "王五",
"class": "高三",
"scoreMath": "98"
},
{
"name": "赵六",
"class": "高三",
"scoreMath": "97"
},
{
"name": "七七",
"class": "高三",
"scoreMath": "96"
}
]
以下是web窗体页面,文件名export.aspx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导出测试</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--引入CSS文件-->
<link rel="stylesheet" href="layui/css/layui.css" media="all" />
<style>
/*导出几个按钮放在左边 好看点*/
.layui-table-tool-self {
position: absolute;
top: 10px;
left: 17px;
}
/*筛选列的弹框调整*/
.layui-table-tool .layui-table-tool-self .layui-table-tool-panel {
left: auto;
right: -67px;
}
/*导出字体大小调整*/
.iconfont {
font-size: 13px;
}
</style>
</head>
<body>
<form class="layui-form" runat="server">
<div class="layui-fluid">
<div class="">
<div class="layui-form layui-card-body">
<div class="layui-form-item">
<button class="layui-btn layui-bg-black iconfont icon-daochu" id="btnExport">导出</button>
</div>
</div>
<div class="layui-card-body">
<table id="score" lay-filter="score"></table>
</div>
</div>
</form>
<!--引入JS文件-->
<script src="layui/layui.js"></script>
<script src="layui/layui.all.js"></script>
<script src="../js/jquery-1.12.1.min.js" charset="utf-8"></script>
<script>
//使用form模块,table模块
layui.use(['form', 'table', 'layer'], function () {
var form = layui.form
, table = layui.table
, layer = layui.layer
$(function () {
init();
});
var dataList;
//加载表格数据
function init() {
$.get({
url: "export.json"
, data: {
"Action": ""
},
cache: false, success: function (data) {
dataList = eval(data);
d = table.render({
elem: '#score'//获取标签
, toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
, title: '成绩导出'//导出数据excel的表名称
, height: 'full-140' //高度设置
, limit: 2
, cols: [[
{ type: 'checkbox', fixed: 'left' }
, { field: 'name', title: '姓名', align: 'left', width: 100 }
, { field: 'class', title: '班级', align: 'left', width: 100 }
, { field: 'scoreMath', title: '数学成绩', align: 'left', width: 100 }
]]
, data: dataList
//, page: true//开启分页
, page: {
limits: [2, 3]//设置分页的条数
}
, done: function (res) {
console.log(res.data)
}
});
},
error: function (errorMsg) {
layer.msg(errorMsg, { icon: 5 });
}
})
}
//全部导出
$("#btnExport").click(function () {
table.exportFile(d.config.id, dataList, 'xls');
})
//导出时阻止页面刷新
$(".layui-form").submit(function (e) {
e.preventDefault();
})
});
</script>
</body>
</html>
五、页面展示
最终的页面效果图如下,图中包含单页导出功能和全部页导出功能。
导出的效果如下