Was ist die Methode zum Importieren von Excel-Dateien in Laui?

Schauen wir uns zuerst die fertigen Renderings an: Adresse:

https://fly.layui.com/extend/excel/

1, Füge die Datei excel.js in die Seite ein:

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

2. Höre dir das Klickereignis der Header-Symbolleiste an

// 监听头工具栏事件
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()-Methode:

//导入方法
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. Methode 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);
    }
}

Methode 4 besteht darin, die Daten zu lesen und zu sortieren. Analysieren Sie die Excel-Daten und übertragen Sie die Daten dann an das Backend. Das Backend analysiert die Daten und fügt sie dann in die Datenbank ein. Nach Erfolg wird „Excel-Import erfolgreich“ an das Frontend zurückgegeben. Nachdem der Excel-Import erfolgreich war, laden Sie die Tabelle neu und die Daten können in der Tabelle angezeigt werden.

Das obige ist der detaillierte Inhalt vonWas ist die Methode zum Importieren von Excel-Dateien in Laui?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!