layui导入excel文件的方法是什么

PHP中文网 • 2025年3月13日 00:56:08 • 编程技术 • 阅读 2

我们先来看看完成的效果图：

（相关推荐：layui）

具体步骤如下：

首先：导入layui第三方插件js，地址：

https://fly.layui.com/extend/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 方法4是读取数据，并对数据进行梳理。把Excel数据解析出来，然后把数据传到后端。后端对数据进行解析，然后插入数据库。成功之后，给前端返回"Excel导入成功"。Excel导入成功之后，重载表格，数据就可以在表格里显示了。

登录后复制

以上就是layui导入excel文件的方法是什么的详细内容，更多请关注【创想鸟】其它相关文章！

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3005395.html