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 < data[0].Sheet1.length; i++){             var tt = {                     cId : selectConcentrator,                     tId : data[0].Sheet1[i].tId,                     inport: data[0].Sheet1[i].inport,                     state: data[0].Sheet1[i].state,                     householdNumber: data[0].Sheet1[i].householdNumber,                     accountName: data[0].Sheet1[i].accountName,                     phone: data[0].Sheet1[i].phone,                     };             arr.push(tt);             }                          $.ajax({                 async: false,                 url: basePath + 'PowerUser/importPowerUserData.action',                 type: 'post',                 dataType: "json",                 contentType: "application/x-www-form-urlencoded",                 data: {                 data : JSON.stringify(arr)                 },                 success: function (data) {                 if(data.success){                 layer.msg(data.message);                 setTimeout(function () {                 layer.closeAll(); //疯狂模式，关闭所有层                 },1000);                 //表格导入成功后，重载表格                 tableIns.reload('testTerminalConfigReload',{                              url : basePath + 'PowerUser/PowerUserDataTable.action',                              page : {      limit : 10, // 初始 每页几条数据      limits : [ 10, 20, 30 ]      // 可以选择的 每页几条数据      },      where : {      cId : selectConcentrator,      tId : selectTerminal      },      parseData: function(res){ //res 即为原始返回的数据          return {            "code": 0, //解析接口状态            "msg": res.message, //解析提示文本            "count": res.total, //解析数据长度            "data": res.data //解析数据列表          };      }                          }, 'data');                 }else{                 //表格导入失败后，重载文件上传                 layer.alert(data.error+"请重新上传",{icon : 2});                 }                 },                 error: function (msg) {                     layer.msg('请联系管理员!!!');                 }             });         });     } catch (e) {         layer.alert(e.message);     } }

推荐（免费）：layui教程