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

王林
Freigeben: 2020-12-07 15:29:55
nach vorne
3119 Leute haben es durchsucht

Schauen wir uns zuerst die fertigen Renderings an: Adresse:

https://fly.layui.com/extend/excel/
Nach dem Login kopieren
Was ist die Methode zum Importieren von Excel-Dateien in Laui?1, Füge die Datei excel.js in die Seite ein:

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结束 }); //监听头工具栏事件结束
Nach dem Login kopieren

3. ImportExcel()-Methode:Was ist die Methode zum Importieren von Excel-Dateien in Laui?

//导入方法 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); } }); }
Nach dem Login kopieren

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 + '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, //解析接口状态 "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); } }
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!