Maison > interface Web > Tutoriel Layui > Quelle est la méthode pour importer des fichiers Excel dans layui ?

Quelle est la méthode pour importer des fichiers Excel dans layui ?

王林
Libérer: 2020-12-07 15:29:55
avant
3266 Les gens l'ont consulté

Quelle est la méthode pour importer des fichiers Excel dans layui ?

Jetons d'abord un coup d'œil aux rendus terminés :

(Recommandations associées : layui)

Quelle est la méthode pour importer des fichiers Excel dans layui ?

Les étapes spécifiques sont les suivantes :

Premièrement : importer le plug-in tiers layui js, adresse :

https://fly.layui.com/extend/excel/
Copier après la connexion

1 Introduire le fichier excel.js dans la page :

Quelle est la méthode pour importer des fichiers Excel dans layui ?

//引入excel
    layui.config({
        base: 'layui_ext/',
    }).extend({
        excel: 'excel',
    });
Copier après la connexion

2. Écoutez les événements de clic sur la barre d'outils d'en-tête

// 监听头工具栏事件
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结束
});
//监听头工具栏事件结束
Copier après la connexion

3. Méthode 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);
		  }
	  });
}
Copier après la connexion

4. Méthode 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);
    }
}
Copier après la connexion

La méthode 4 consiste à lire les données et à trier les données. Analysez les données Excel, puis transférez les données vers le backend. Le backend analyse les données puis les insère dans la base de données. Après un succès, « Importation Excel réussie » est renvoyé au frontal. Une fois l'importation Excel réussie, rechargez le tableau et les données peuvent être affichées dans le tableau.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal