登录  /  注册

layui如何导入excel文件

coldplay.xixi
发布: 2021-03-01 16:12:58
原创
10522人浏览过

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

layui如何导入excel文件

本教程操作环境:windows7系统、layui v2.5.7版,DELL G3电脑,该方法适用于所有品牌电脑。

layui导入excel文件的方法:

1、在页面中引入excel.js文件:

a556cd911d637340b33a784af6d863b.png

//引入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 + &#39;PowerUser/importPowerUserData.action&#39;,
                type: &#39;post&#39;,
                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(&#39;testTerminalConfigReload&#39;,{
                             url : basePath + &#39;PowerUser/PowerUserDataTable.action&#39;,
                             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 //解析数据列表
         };
     }
                         }, &#39;data&#39;);
                }else{
                //表格导入失败后,重载文件上传
                layer.alert(data.error+"请重新上传",{icon : 2});
                }
                },
                error: function (msg) {
                    layer.msg(&#39;请联系管理员!!!&#39;);
                }
            });
        });
    } catch (e) {
        layer.alert(e.message);
    }
}
登录后复制

推荐(免费):layui教程

以上就是layui如何导入excel文件的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号