layui怎么導(dǎo)入excel文件

這篇文章主要為大家展示了layui怎么導(dǎo)入excel文件，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學(xué)習(xí)一下“l(fā)ayui怎么導(dǎo)入excel文件”這篇文章吧。

layui是什么

layui是一款采用自身模塊規(guī)范編寫的前端UI框架，它遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，適合新手，并且它還提供了豐富的內(nèi)置模塊，他們皆可通過模塊化的方式按需加載，從核心代碼到API的每一處細節(jié)都經(jīng)過精心雕琢，非常適合界面的快速開發(fā)，能夠作為PC網(wǎng)頁端后臺系統(tǒng)與前臺界面的速成開發(fā)方案。

layui導(dǎo)入excel文件的方法：首先在頁面中引入【excel.js】文件；然后監(jiān)聽頭工具欄的點擊事件，代碼為【title : '導(dǎo)入Excel',content : $("#ImportExcel")】。

layui導(dǎo)入excel文件的方法：

1、在頁面中引入excel.js文件：

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

2、監(jiān)聽頭工具欄的點擊事件

// 監(jiān)聽頭工具欄事件
table.on('toolbar(terminalConfig)', function(obj) {
var layer = layui.layer;
// 添加終端
if(obj.event == 'import'){
layer.open({
type : 1,
shade : false,
area : [ '350px', '260px' ],
title : '導(dǎo)入Excel',
content : $("#ImportExcel"),
cancel : function() {
layer.close();
},
success : function(layero, index) {
ImportExcel();
},
});
}
//導(dǎo)入Excel結(jié)束
});
//監(jiān)聽頭工具欄事件結(jié)束

3、ImportExcel()方法：

//導(dǎo)入方法
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', //導(dǎo)入表格
  auto: false,  //選擇文件后不自動上傳
  before: function (obj) {
  layer.load(); //上傳loading
  },
  choose: function (obj) {// 選擇文件回調(diào)
  var files = obj.pushFile();
  var fileArr = Object.values(files);// 注意這里的數(shù)據(jù)需要是數(shù)組，所以需要轉(zhuǎn)換一下
  //console.debug(fileArr)
  // 用完就清理掉，避免多次選中相同文件時出現(xiàn)問題
  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
});
//關(guān)閉所有彈出層
layer.closeAll(); //瘋狂模式，關(guān)閉所有層
  },1000);
  }
  });
}

4、uploadExcel()方法：

function uploadExcel(files) {
    try {
    var excel = layui.excel;
        excel.importExcel(files, {
            // 讀取數(shù)據(jù)的同時梳理數(shù)據(jù)
            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(); //瘋狂模式，關(guān)閉所有層
                },1000);
                //表格導(dǎo)入成功后，重載表格
                tableIns.reload('testTerminalConfigReload',{
                             url : basePath + 'PowerUser/PowerUserDataTable.action',
                             page : {
     limit : 10, // 初始 每頁幾條數(shù)據(jù)
     limits : [ 10, 20, 30 ]
     // 可以選擇的 每頁幾條數(shù)據(jù)
     },
     where : {
     cId : selectConcentrator,
     tId : selectTerminal
     },
     parseData: function(res){ //res 即為原始返回的數(shù)據(jù)
         return {
           "code": 0, //解析接口狀態(tài)
           "msg": res.message, //解析提示文本
           "count": res.total, //解析數(shù)據(jù)長度
           "data": res.data //解析數(shù)據(jù)列表
         };
     }
                         }, 'data');
                }else{
                //表格導(dǎo)入失敗后，重載文件上傳
                layer.alert(data.error+"請重新上傳",{icon : 2});
                }
                },
                error: function (msg) {
                    layer.msg('請聯(lián)系管理員!!!');
                }
            });
        });
    } catch (e) {
        layer.alert(e.message);
    }
}

以上就是關(guān)于“l(fā)ayui怎么導(dǎo)入excel文件”的內(nèi)容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學(xué)習(xí)新知識，若想了解更多相關(guān)知識內(nèi)容，請多多關(guān)注億速云行業(yè)資訊頻道。