LauiuiにExcelファイルをインポートする方法は何ですか?

まず、完成したレンダリングを見てみましょう:

(関連する推奨事項: layui)

具体的な手順は次のとおりです:

最初:layui サードパーティ プラグイン js をインポートします (アドレス:

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

1)。excel.js ファイルをページ:

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

2. ヘッダー ツールバーのクリック イベントを監視します

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

//导入方法
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 + &#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);
    }
}

方法 4 は、データを読み取り、データを並べ替えることです。 Excel データを解析し、データをバックエンドに転送します。バックエンドはデータを解析し、データベースに挿入します。成功すると、「Excel インポート成功」がフロントエンドに返されます。 Excel のインポートが成功した後、テーブルを再ロードすると、データがテーブルに表示されます。

以上がLauiuiにExcelファイルをインポートする方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。