layui怎么导入excel文件

这篇文章主要为大家展示了layui怎么导入excel文件，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带大家一起来研究并学习一下“layui怎么导入excel文件”这篇文章吧。

layui是什么

layui是一款采用自身模块规范编写的前端UI框架，它遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，适合新手，并且它还提供了丰富的内置模块，他们皆可通过模块化的方式按需加载，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发，能够作为PC网页端后台系统与前台界面的速成开发方案。

layui导入excel文件的方法：首先在页面中引入【excel.js】文件；然后监听头工具栏的点击事件，代码为【title : '导入Excel',content : $("#ImportExcel")】。

layui导入excel文件的方法：

在页面中引入excel.js文件：

//引入excel    layui.config({        base: 'layui_ext/',    }).extend({        excel: 'excel',    });

监听头工具栏的点击事件

// 监听头工具栏事件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结束});//监听头工具栏事件结束

ImportExcel()方法：

//导入方法function ImportExcel(){var $ = layui.jquery  ,upload = layui.upload;  var uploadInst = upload.render({  elem: '#importExcel',    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);  }  });}

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怎么导入excel文件”的内容，如果改文章对你有所帮助并觉得写得不错，劳请分享给你的好友一起学习新知识，若想了解更多相关知识内容，请多多关注编程网行业资讯频道。