【layUI】点击导出按钮，导出excel文件
要实现的功能如下：根据实行状态判定是否可以导出。假如可以导出，点击导出，在欣赏器里下载对应的文件。https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZjU2MzUyNjg0OWNjNGViY2JlZDAwZWFhOGIwMzM2ZjkucG5nI3BpY19jZW50ZXI=
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvYTBmODBkY2ZmYjZkNDU0MmJmNzYyMzk1OGU5NTdjNTQucG5nI3BpY19jZW50ZXI=
代码实现html里：
<table class="layui-hide" id="studentTable" lay-filter="studentTable"></table>
js里：
studentTable.loadTable = function() {
var form = layui.form;
table = layui.table;
table.render({
elem: '#studentTable',
url: ctx + '/studentTable/getList.shtml',
method: "post",
toolbar: "#toolbarWarp",
defaultToolbar: [],
parseData: function(jsonData) {
if (jsonData.code == '200') {
var data = jsonData.data;
return {
"code": jsonData.code,
"msg": jsonData.message,
"total": data.total,
"rows": data.list
}
}
return {
data: []
};
},
text: {
none: '暂无相关数据'
},
request: { //分页
pageName: 'pageNo',
limitName: 'pageSize'
},
response: {
statusName: 'code',
statusCode: "200",
msgName: 'msg',
countName: 'total',
dataName: 'rows'
},
page: true,
limits: ,
cellMinWidth: 100,
cols: [[{
type: 'radio',
fixed: 'left'
},
{
field: 'status',
title: '执行状态',
sort: false,
align: 'center',
templet: function(row) {
if (row.status == '1') {
return "待执行";
}
if (row.status == '2') {
return "执行完毕";
}
if (row.status == '3') {
return "暂停";
}
return "未知";
}
},
{
field: 'opeate',
title: '操作',
sort: false,
align: 'center',
fixed: "right",
templet: function(row) {
var result;
if (row.status == '2') {
result = '<a class="layui-btnlayui-btn-xs" href="javascript:studentTable.export(\'' + row.code + '\')">导出</a>';
} else {
result = '<a class="layui-btn layui-btn-disabled layui-btn-xs">导出</a>';
}
return result;
}
}]]
});
studentTable.export = function(code) {
$.ajax({
type: "post",
data: {
code: code
},
url: ctx + "/studentTable/export.shtml",
success: function(data) {
// msg("导出成功");
var localObj = window.location; //当前页面地址
var protocol = location.protocol; //http/https
var host = localObj.host; //地址栏IP和端口号
var contextPath = localObj.pathname.split("/"); //项目名
if (!data.includes("false")) {
window.location.href = protocol + "//" + host + "/" + contextPath + data;
} else {
errorAlert("导出失败");
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
errorAlert("系统异常");
}
});
}
代码块解读：
1、界说了导出按钮，而且去调用了同文件中的export()方法：
result = '<a class="layui-btnlayui-btn-xs" href="javascript:studentTable.export(\'' + row.code + '\')">导出</a>';
2、让欣赏器跳转到新的url，即开始下载excel文件:
window.location.href = protocol + "//" + host + "/" + contextPath + data;
3、实现思绪大概为：
（1）调用后端查询列表方法，在<操纵>列，界说导出按钮，并去调用export()方法
（2）在export()里，去调用后端导出方法。
（3）后端导出方法要做的工作有：根据传入的code查询出数据，添补到excel里；将excel上传到服务器上；末了将文件地点返回给前端。
（4）export()方法吸收到这个url地点后，哀求这个地点，在h5页面下载excel文件
小结这个导出按钮是在js里添加并实现逻辑的，和之前是在html里添加的不一样。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金
页:
[1]