這篇文章主要介紹了layui中怎樣導入excel文件，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

洮北ssl適用于網站、小程序/APP、API接口等需要進行數據傳輸應用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

我們先來看看完成的效果圖：

具體步驟如下：

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

https://fly.layui.com/extend/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 : '導入Excel',
			content : $("#ImportExcel"),
			cancel : function() {
					layer.close();
			},
			success : function(layero, index) {
					ImportExcel();
			},
		});
						
	}
//導入Excel結束
});
//監(jiān)聽頭工具欄事件結束

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, //解析接口狀態(tài)
     						      "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);
    }
}

方法4是讀取數據，并對數據進行梳理。把Excel數據解析出來，然后把數據傳到后端。后端對數據進行解析，然后插入數據庫。成功之后，給前端返回"Excel導入成功"。Excel導入成功之后，重載表格，數據就可以在表格里顯示了。

感謝你能夠認真閱讀完這篇文章，希望小編分享layui中怎樣導入excel文件內容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯，關注創(chuàng)新互聯行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯，詳細的解決方法等著你來學習!

當前題目：layui中怎樣導入excel文件
分享鏈接：http://www.chinadenli.net/article4/googie.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站改版、網站設計、移動網站建設、電子商務、網站排名、品牌網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯