码迷,mamicode.com
首页 > 其他好文 > 详细

layui excel插件

时间:2019-12-26 16:18:56      阅读:1741      评论:0      收藏:0      [点我收藏+]

标签:end   https   条码   exp   alert   layer   jquer   class   ISE   

插件下载:https://gitee.com/zypy333/layui-excel

 

1.添加js

添加js	
<script type="text/javascript"
	src="${pageContext.request.contextPath}/XXX/XXX/layui_exts/excel.js"></script>

 

2.书写按钮

		<a href="javascript:;" class="add" id="exportexcel" title="导出excel表单">
				<i class="layui-icon layui-icon-add-circle x-icon-add"></i>导出excel表单</a> 

 

3.导出excel方法

	$("#exportexcel").click(function(){
	
		loading = layer.load(1, {shade: [0.3, ‘#fff‘]});
        var $ = layui.jquery;
        var excel = layui.excel;
        $.ajax({
            url:     ‘${pageContext.request.contextPath}/XXX/XXX.action‘,
            dataType: ‘json‘,
           
            success: function(res) {
                layer.close(loading);
                layer.msg(res.msg);
                // 假如返回的 res.data 是需要导出的列表数据
                console.log(res.data);//
                var data = res.data;
                // 重点!!!如果后端给的数据顺序和映射关系不对,请执行梳理函数后导出
                //限定能出现的字段
                  data = excel.filterExportData(data, [
					‘tmnum‘
					,‘tmname‘
					,‘tmenterprise‘
					,‘tmstate‘
				]);
				// 重点2!!!一般都需要加一个表头,表头的键名顺序需要与最终导出的数据一致
                // 1. 数组头部新增表头
                data.unshift({tmnum: ‘条码号‘,tmname: ‘产品名称‘,tmenterprise:‘生产厂商‘,tmstate:‘状态‘});
                // 3. 执行导出函数,系统会弹出弹框
                // 重点!!!如果后端给的数据顺序和映射关系不对,请执行梳理函数后导出
              
               
                var timestart = Date.now();
				 excel.exportExcel({
                    sheet1: data
                }, ‘条码表.xlsx‘, ‘xlsx‘);
				var timeend = Date.now();
				var spent = (timeend - timestart) / 1000;
				layer.alert(‘单纯导出耗时 ‘+spent+‘ s‘);
            },
            error:function(res){
                layer.close(loading);
                layer.msg(res.msg);
            }
        });
		
	})

  

layui excel插件

标签:end   https   条码   exp   alert   layer   jquer   class   ISE   

原文地址:https://www.cnblogs.com/shifu8005/p/12102527.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!