layui如何导入excel文件
layui导入excel文件的方法:首先在页面中引入【excel.js】文件;然后监听头工具栏的点击事件,代码为【title : '导入excel',content : $("#importexcel")】。
本教程操作环境:windows7系统、layui v2.5.7版,DELL G3电脑,该方法适用于所有品牌电脑。
layui导入excel文件的方法:
1、在页面中引入excel.js文件:
//引入excel layui.config({ base: 'layui_ext/', }).extend({ excel: 'excel', });
2、监听头工具栏的点击事件
// 监听头工具栏事件table.on('toolbar(terminalConfig)', function(obj) {var layer = layui.layer;// 添加终端if(obj.event == 'import'){layer.open({type : 1,shade : false,area : [ '350px', '260px' ],title : '导入Excel',content : $("#ImportExcel"),cancel : function() {layer.close();},success : function(layero, index) {ImportExcel();},});}//导入Excel结束});//监听头工具栏事件结束
3、ImportExcel()方法:
//导入方法function ImportExcel(){var $ = layui.jquery ,upload = layui.upload; var uploadInst = upload.render({ elem: '#importExcel', /*method: 'POST',*/ url: basePath + 'PowerUser/importPowerUserData.action', accept: 'file', //普通文件 exts: 'xls|excel|xlsx', //导入表格 auto: false, //选择文件后不自动上传 before: function (obj) { layer.load(); //上传loading }, choose: function (obj) {// 选择文件回调 var files = obj.pushFile(); var fileArr = Object.values(files);// 注意这里的数据需要是数组,所以需要转换一下 //console.debug(fileArr) // 用完就清理掉,避免多次选中相同文件时出现问题 for (var index in files) { if (files.hasOwnProperty(index)) { delete files[index]; } } uploadExcel(fileArr); // 如果只需要最新选择的文件,可以这样写: uploadExcel([files.pop()]) }, error : function(){ setTimeout(function () { layer.msg("上传失败!", {icon : 1});//关闭所有弹出层layer.closeAll(); //疯狂模式,关闭所有层 },1000); } });}
4、uploadExcel()方法:
function uploadExcel(files) { try { var excel = layui.excel; excel.importExcel(files, { // 读取数据的同时梳理数据 fields: { 'tId' : 'A','inport' : 'B','state' : 'C','householdNumber' : 'D','accountName' : 'E','phone' : 'F' } }, function (data) { var arr = new Array(); for(i = 1; i <blockquote><p><strong>推荐(免费):<a href="https://www.php.cn/layui/" target="_blank">layui教程</a></strong></p></blockquote>