本教程由 www.webfunny.cn 前端监控系统 提供。 只需要简单几步就可以搭建一套属于自己的前端监控系统，快来试试吧。
引用excel.js插件，这个是插件必须用到的文件，注意引入文件的路径。
js写法如下：
这是一个导出的操作按钮：
<button type="button" lay-submit="" class="layui-btn layui-btn-warm" lay-filter="uploadImg">
<i class="layui-icon"></i>导出Excel</button>
form.on('submit(uploadImg)', function(data){
loading = layer.load(1, {shade: [0.3, '#fff']});
var $ = layui.jquery;
var excel = layui.excel;
$.ajax({
url: '${ct}/person/export',
dataType: 'json',
data: {
datas:JSON.stringify(data.field)
},
success: function(res) {
layer.close(loading);
layer.msg(res.msg);
// 假如返回的 res.data 是需要导出的列表数据
console.log(res.data);//
// 1. 数组头部新增表头
res.data.unshift({sdId: 'ID',communityName: '社区名称',realName:'姓名',sex:'性别',idCard:'身份证号',mobilePhone
:'订单号'});
// 3. 执行导出函数，系统会弹出弹框
excel.exportExcel({
sheet1: res.data
}, '平台流水.xlsx', 'xlsx');
},
error:function(res){
layer.close(loading);
layer.msg(res.msg);
}
});
});
});layui 分页
table.render({
elem: '#person-table',
url: '${ctx}/person/page',//后台分页请求接口
page: {
curr: 1,
groups: 1,first: false,
last: false,
layout: ['limit', 'prev', 'page', 'next', 'count']
}
,toolbar: '#personToolbar' ,limit: 20 ,limits: [20,50,100]
,cols: [[
{type: 'numbers', fixed: 'left', width:'40'}
,{type: 'checkbox', field:'residentId'}
,{field:'communityName', title:'社区名称', width:'100'}
,{field:'villageName', title:'小区名称', width:'150'}
,{field:'buildingName', title:'幢号', width:'80', sort: true}
,{field:'roomNo', title:'户号', width:'80', sort: true}
,{field:'realName', title:'姓名', width:'100'}
,{field:'sex', title:'性别', width:'60'}
,{field:'idCard', title:'身份证', width:'160'}
,{field:'mobilePhone', title:'联系电话', width:'120'}
,{field:'registerAddress', title:'户籍地址', width:'200'}
,{field:'workUnit', title:'工作单位', width:'160'}
,{field:'resideType', title:'人员类别', width:'100'}
,{field:'leaseEndTime', title:'租赁到期日', width:'170', sort: true}
,{field:'resideStatus', title:'租住状态', width:'100'}
,{field:'action', title:'操作', width:'120', toolbar: '#personAction', fixed: 'right'}
]]
});layui 监控操作按钮
<!-- 操作按钮 -->
<script type="text/html" id="personAction">
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete_person">删除</a>
</script>
// 监听操作按钮
var operation = function(obj) {
var data = obj.data;
if (obj.event === 'delete_person') {
//后台请求删除接口
$.ajax({
url: '${ctx}/person/delete?json',
data: {'residentId': data.residentId},
type: "POST",
dataType: "json",
success: function (data) {
if (data.code == 0) {
layer.close(index);
// 刷新页面
table.reload('person-table');
} else {
alert(data.msg);
}
},
error: function (error) {
alert(error)
}
});
}
