LayUI⑺：与PHP结合写一个通用的Excel导入程序

　　昨天和两个做开发的朋友聊天，对于我还在使用LayUI感到奇怪，我也没有多解释，毕竟LayUI对于做一些中小型的开发还是不错的，前端的框架中，熟悉了一个其他的也差之不多。但LayUI的资料不细致是个很大的缺憾。

　　用户提出有一个Excel表的记录要导入，这个是基本要求，肯定要满足。

　　2006年，我用PowerBuilder写过一个通用的导入程序，程序上也不难。

　　用前端框架来完成会有一点麻烦，主要在于

　　1、数据回显

　　如果是让用户选择一个Excel文件然后就直接入库，那程序就太简单了，问题是要先让用户看到结果，可能的话还可以修改，然后再保存到数据库中。

　　2、数据保存

　　因为以前C/S开发使用的是强连接，操作数据后直接提交即可；但现在前端和后端是弱连接，一次交互就需要配置相应参数才可能保存数据，动态的表格保存就有一点小麻烦。

　　作为一般性的要求，这个程序肯定是要应对数据库中的所有表。

　　那么只能先将数据表的字段设置传到PHP中，然后PHP提取Excel记录，按照LayUI对表记录的要求封装数据，传回到前端。

　　具体做法：

　　1、在数据库中创建表，记录要导入的表信息；

　　2、在前端列出表，让用户选择要导入的表；

　　3、根据选择的表，确定字段参数即对应的Excel列；

　　4、将前端选择传入到PHP中，提取Excel记录，传回前端；

　　5、用户确定要保存数据，点击保存，数据入库。

　　一天完成，功能全部正常，后面需要加入一些错误检测，还有文件名应该使用用户名加随机数来存储，这样可以防止多用户冲突，读取完删除。

　　这个程序主要涉及的就是动态对象、动态属性的创建与赋值。

　　完成的界面：

 　　程序前端代码：

    
    〖通用Excel数据表导入〗
    
    
    
    
    
		
    
        body { background-color: #ffffff; }
    



		
			

				  

						
导入设置
						
导入的数据表记录
				  
				  

						
							
								

										

												


														

															
															   

																		选择要导入的表
																		

																			
																				
																			
																		
																
																
		
																		Excel文件
																		

																			
																		
																		

																			选择Excel文件
																			
																		
																
																
		
																		

																			工作簿序号
																			
																		
				
																		

																			起始行号
																			
																		
				
																		

																			结束行号
																			
																		
																		提取数据
																
														
	
														
														
												
										
								
							
						
						

								保存数据
																
						
			  
			
	
			


	let tableNameList;
	let selectTableName;
	let tableTotalCount;
	let submitData=[];//准备一个空数组
	let fieldSet=[];//字段设置
	let dbRows={};//Excel记录的行对象
	let colSet=[];			
	let colSetChild=[];
	let dbDataRecordCount;
	
    layui.use(['layer','form','table'], function () {
        var form = layui.form;
		var layer = layui.layer;
        var $ = layui.$;
		var table = layui.table;

		document.getElementById('selectExcel').addEventListener('click',function(){
			$("#readFile").trigger("click");			
		});
		document.getElementById('readFile').addEventListener('change',function(){
			if(this.files.length===0){
				layer.msg('没有选择文件！',{time:3000,icon:5});
				return;
			}			
			if(this.files[0].name.split('.')[1]!='xls'){
				layer.msg('请选择Excel文件！',{time:3000,icon:5});
				return;
			}
			let reader=new FileReader();
			reader.onload=function (){  console.log(reader.result); }
			document.getElementById('Dc05').value=this.files[0].name;
		})
		
		//得到数据表的名称列表
		$.ajax({
			url:'ZTBexcelDataIn.php',
			data:{"OP":"getTableList"},
			type:'POST',
			async:false,
			success:function (data) {					
					tableNameList = data['data'];
					 //在数组中找到对应的编码
					for(var i=0;i

　　这个程序虽然简单，但是应用的地方还是挺多的，有必要后面再对这个程序进行完善。