【layui】table.exportFile 表格导出功能

在这里插入图片描述

1、表格-导出点击事件

    ,toolbar: '#tool_renyuan_table'
    ,defaultToolbar: ['exports']
	// 导出
	table.on('toolbar(renyuan_table)', function(obj){
		switch(obj.event){
		     case 'LAYTABLE_EXPORT':
		     myExportFile('renyuan_table');
		     break;
		 };
	});

2、自定义exportFile

	//表格导出
	function myExportFile(id, data, type){
	    var that = this;
	    data = data || table.clearCacheKey(table.cache[id]);
	    type = type || 'xls';
	    var config = {}
	        ,textType = ({
	            csv: 'text/csv'
	            ,xls: 'application/vnd.ms-excel'
	        })[type]
	        ,alink = document.createElement("a");
	    // if(device.ie) return hint.error('IE_NOT_SUPPORT_EXPORTS');
	    alink.href = 'data:'+ textType +';charset=utf-8,\ufeff'+ encodeURIComponent(function(){
	        var dataTitle = [], dataMain = [], dataTotal = [];
	
	        //表头和表体
	        layui.each(data, function(i1, item1){
	            var vals = [];
	            table.eachCols(id, function(i3, item3){
	            	// 防止最后一竖列的的“操作”也导出来
	                if(item3.title!='操作'){
	                    if(item3.field && item3.type == 'normal' && !item3.hide){
	                        var content = item1[item3.field];
	                        if(content === undefined || content === null) content = '';
	                        
	                        i1 == 0 && dataTitle.push(item3.title || '');
	                        // 防止“手机号”和“时间”导出后变成“#############”
	                        if(item3.title.indexOf('电话')!=-1||item3.title.indexOf('时间')!=-1||item3.title.indexOf('手机')!=-1){
	                            content = content+'\t';
	                        }
	                        vals.push('"'+ parseTempData(item3, content, item1, 'text') + '"');
	                    }
	                }
	            });
	            dataMain.push(vals.join(','));
	        });
	        //表合计
	        layui.each(that.dataTotal, function(key, value){
	            dataTotal.push(value);
	        });
	        // console.log('dataTitle',dataTitle);
	        // console.log('dataMain',dataMain);
	        // console.log('dataTotal',dataTotal);
	        return dataTitle.join(',') + '\r\n' + dataMain.join('\r\n') + '\r\n' + dataTotal.join(',');
	    }());
	
	    alink.download = (config.title || 'table_'+ (config.index || '1')) + '.' + type; 
	    document.body.appendChild(alink);
	    alink.click();
	    document.body.removeChild(alink); 
	};
	//解析自定义模板数据
	function parseTempData (item3, content, tplData, text){
	    var str = item3.templet ? function(){
	        return typeof item3.templet === 'function'
	            ? item3.templet(tplData)
	            : laytpl($(item3.templet).html() || String(content)).render(tplData)
	    }() : content;
	    return text ? $('<div>'+ str +'</div>').text() : str;
	}
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值