关于extjs大量数据导入方案研究

最新推荐文章于 2020-06-16 08:43:13 发布
最新推荐文章于 2020-06-16 08:43:13 发布
阅读量4.9k 收藏 2
点赞数 2
分类专栏： java javascript知识 文章标签： extjs excel 数据库 浏览器 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/looksun/article/details/7883642
版权

最近在开发excel数据导入模块，在网上找了一些案例和资料，网上的方法大多是上传excel文件至服务器，后台进行数据比对验证后插入数据库，最后返回导入失败的数据给用户导出，并重新修改整理后再次导入数据库中；本人觉得以上方法存在一些缺点：

1.个人觉得如果数据量过大，页面肯定会一直卡死在那里造成用户不知道程序是不是在工作,导致用户体验差

2.不能实时的显示导入的进度，最好是可以显示导入到多少条了

3.返回导入失败结果后，需要导出错误值，修改后再次重复导入操作,不能直接在系统中将错误值修改后重新导入

针对以上缺点自己基于extjs开发了一套excel数据导入功能模块, 下面先给大家看一下效果图:

经测试，5000条数据导入没有问题，主要难点在于如果记录数较多，采用循环读取数据提交的方法会导致浏览器假死，但是使用递归提交数据可以解决这个问题,以上思路仅供参考，希望高手路过可以提出更好的解决方案.

 

具体前台代码：


Ext.namespace("EIMS.Main.IMPSys");

EIMS.Main.IMPSys.ImpWindow=function(Par){
this.WorkSheetStore= new Ext.data.JsonStore({//获取excel中的工作表的Store
           url : 'AcExcel_getWorkSheet.ac',
           baseParams:{FilePath:Par.PhyName+'.'+Par.FileExt},
           fields: ['SheetName']
});
var FieldRecord = Ext.data.Record.create([//定义忽略下拉选项Record
		   {name: 'FieldName', type: 'string'},
		   {name: 'FieldTitle', type: 'string'},
		   {name: 'IsHide', type: 'string'}
]);
this.ignoreField=new FieldRecord({//添加忽略下拉选项
           FieldName:'Ignore',FieldTitle:'Ignore',IsHide:'1'
});
this.ObjectfieldsDef = new Ext.data.JsonStore({//目标字段store定义
		   autoDestroy: true,
		   url: 'AcSubSys_QueryFields.ac',
		   fields: [{name:'FieldName',mapping:'FieldName'},{name:'FieldTitle',mapping:'FieldTitle'},{name:'IsHide',defaultValue:'1'}],
		   listeners:{
		         scope: this,
		         'load': function(store,records,options){
		                  store.insert(0,this.ignoreField);
		                }
		    }
});

this.FieldGrid=new Ext.grid.EditorGridPanel({
           sm:new Ext.grid.CheckboxSelectionModel(),
           id:'ImportSystem.FieldGrid',
           clicksToEdit:2,
           scope:this,
           store:new Ext.data.JsonStore({
              fields:[{name:'SourceCoIndex',mapping:'SourceCoIndex'},
                      {name:'SourceField',mapping:'SourceField'},
                      {name:'ObjectFiled',mapping:'ObjectFiled'}]
           }),
           columns:[new Ext.grid.RowNumberer(),
                 {id:'SourceCoIndex',hidden:true,dataIndex:'SourceCoIndex'},
                 {id: 'SourceFiled',hideable:false, header: '源字段', width: 150, sortable: true, dataIndex: 'SourceField'},
                 {id: 'ObjectFiled', 
                 editor:{
				    xtype: 'combo',
				    scope:this,
					id:'ImportSystem.ObjField',
					valueField : 'FieldName',
					displayField :'FieldTitle',
					selectOnFocus : true,
					forceSelection: true,
					mode: 'local',
					store :this.ObjectfieldsDef,
					resizable:true,
					minChars:1,
					triggerAction : 'all',
					listeners:{
					        scope:this,
					        change:function(combo,newValue,oldValue ){
					             this.ClearFilter(combo.store);
					             var oldindex = combo.store.find('FieldName',oldValue);
					             var newindex=   combo.store.find('FieldName',newValue);
                                   if(newindex!=-1){
                                            var newRecord=combo.store.getAt(newindex);
                                            if(newRecord.get("FieldName")!="Ignorevalue"){ 
		                                            combo.store.getAt(newindex).set("IsHide",'0');
		                                            if(oldindex!=-1){
		                                                 combo.store.getAt(oldindex).set("IsHide",'1');
		                                            }
													this.ComboFilter(combo.store);
											}
								   }
					        }
					},
					typeAhead: true,
					loadingText : 'Loading...'
					},
					scope:this,
				    renderer: function(value, metaData, record, rowIndex, colIndex, store){  
				                   var Ret='';
                                   this.ClearFilter(this.ObjectfieldsDef);
                                   var index = this.ObjectfieldsDef.find('FieldName',value);  
                                   if(index!=-1){  
                                            Ret=this.ObjectfieldsDef.getAt(index).data.FieldTitle;  
                                            this.ComboFilter(this.ObjectfieldsDef);
                                            record.set("ObjectFiled",value);
                                     }  
                                   return Ret;  
                         },  
					hideable:false,header: '目标字段', width: 150, sortable: true, dataIndex: 'ObjectField'}],
         bbar:[{
					text:"<s:text name='Button.Submit'/>",
					scope:this,
					handler: function(){
						   var v=this.FieldGrid.store.getRange();
					       var jsonQueryArray=[];
					       Ext.each(v,function(item){
					                   
					                    jsonQueryArray.push("{SourceField:\""+item.get("SourceField")+"\",SourceCoIndex:\""+item.get("SourceCoIndex")+"\",ObjectFiled:\""+item.get("ObjectFiled")+"\"}");
						   });
						   jsonQueryArray="["+jsonQueryArray+"]";
						   
						   Ext.Ajax.request({
							   url: 'AcExcel_LoadExcelData.ac',
							   success: function(response, opts) {
			      							var obj = Ext.util.JSON.decode(response.responseText);
			      							Ext.getCmp("IMPSys.Excel.Previewgrid").store.loadData(Ext.util.JSON.decode(response.responseText));
										   },
							   failure: function(){},
							   params: { FieldsStr: jsonQueryArray ,SheetName:Par.SheetName,FilePath:Par.PhyName+'.'+Par.FileExt}
						  });
																				
									
					}
				},{
					text: "<s:text name='Button.Reset'/>",
					scope:this,
					handler: function(){
						this.form.form.reset();
					}
				},{
		            text: "<s:text name='Button.Cancel'/>",
		            scope:this,
		            handler: function(){
						this.close();
					}
		        }]
});
this.form=new Ext.FormPanel({
		id: 'window_form_import',
		name: 'window_form_import',
		labelAlign: 'right', 
		bodyStyle:'padding:5px 5px 0', 
		border:false,
        items:[new Ext.form.ComboBox({
				                            id:'ImportSystem.WorkSheet',
											name : 'ImportSystem.WorkSheet',
											displayField : 'SheetName',
											hiddenName:'value',
											selectOnFocus : true,
											forceSelection: true,
											store :this.WorkSheetStore,
											resizable:true,
											minChars:3,
											triggerAction : 'all',
											typeAhead: true,
											fieldLabel : "Select Sheet",
											anchor:'100%', 
											listeners : {
											      scope:this,
											      'select' : function(thisCombo) {
														       Par.SheetName=thisCombo.getValue();
														       Ext.Ajax.request({
																	   url: 'AcExcel_getField.ac',
																	   scope:this,
																	   success: function(response,options){
			                                                                               this.FieldGrid.store.loadData(Ext.util.JSON.decode(response.responseText));
			                                                                               this.ObjectfieldsDef.reload();
			                                                                              },
																	   failure: function(){
																	   						Ext.MessageBox.show({
																								title:"<s:text name='Public.Infor'/>",
																								msg:action.result.message,
																							    buttons: Ext.MessageBox.OK,
																							    icon:Ext.MessageBox.WARNING 
																							});
																							},
																	   params: { SheetName: thisCombo.getValue(),FilePath:Par.PhyName+'.'+Par.FileExt }
																	})
											      }
											  }
              							 })]
});
EIMS.Main.IMPSys.ImpWindow.superclass.constructor.call(this,{
				title:'导入数据',
				id:'IMPSys.Import.window',
				modal: true,
				shadow:false,
				resizable : true,
				maximizable: true,
				width : 500,
				height : 300,
				layout : 'border',
				items: [
		        {
		   			region : 'north',
					height : 30,
					border:false,
				    items:this.form
				 },{
									region : 'center',
									layout : 'fit',
									border:false,
									bodyStyle:'padding:5px 5px', 
									items : [this.FieldGrid]
				}],
				bodyStyle:'padding:5px 5px 0'
      	   
	});

};
Ext.extend(EIMS.Main.IMPSys.ImpWindow,Ext.Window,{
       
         ClearFilter:function(ComStore){//清除过滤条件
                ComStore.snapshot = ComStore.realSnapshot;   
			    delete ComStore.realSnapshot;   
			    ComStore.clearFilter();  
         },
         ComboFilter:function(ComStore){//执行过滤
	            ComStore.filter('IsHide', '1');   
	            ComStore.realSnapshot = ComStore.snapshot;   
			    ComStore.snapshot = ComStore.data;   
         }
        }
);




















//所有控件的父panel容器
EIMS.Main.IMPSys.Panel=function(Content,Config){
	EIMS.Main.IMPSys.Panel.superclass.constructor.call(this,{
		tbar:[
                    {
                    text:"Upload Excel",
                    iconCls:'search',
                    scope:this,
                    handler:function(){
                        this.Search();
                    }
                },{
                text:"Import to system",
                scope:this,
                handler:function(){
                     Ext.MessageBox.show({
					     title:'请等待',
					     msg:'读取数据中',
					     width:300,
					     progress:true,
					     closable:false  //隐藏对话框右上角的关闭按钮，从而禁止用户关闭进度条
					 });
					 var Vstore=this.items.item(0).store;
					 Vstore.filterBy(function(record){
											  var Result=record.get('Result');
					                          if(Result){
					                              Result=Result.trim();
					                          }
					                          if(Result!="Update success" && Result!="Insert success"){
					                     
					                          return true;}else{return false;}
					 },this);
		             if(Vstore.getCount()==0){
		                    Ext.MessageBox.hide();
		                    alert("没有可操作记录！");
		             }else{
                           this.PostData(0,Vstore);
                     }
                }
                }],
	    closable:true,
        layout: 'border',
	    bodyStyle:'padding:5px', 
		id:Config.id,
		title:Config.title,
		items:Content.items,
		border:false});
	
};
Ext.extend(EIMS.Main.IMPSys.Panel,Ext.Panel,{
        PostData:function(i,v){//开始提交导入数据
           var Rec=v.getRange();
           var totalCount=v.getCount();
           Ext.Ajax.request({
								   url: 'AcExcel_importdata.ac',
								   scope:this,
								   method:'post',
								   params:{
								      TableName:'TblSubSys',
								      funExt: Ext.util.JSON.encode(Rec[i].data)
								   },
								   success: function(response, opts) {
								               Rec[i].data['Result'] = response.responseText; 
											   Rec[i].commit(); 
											   if(++i<totalCount){
											         Ext.MessageBox.updateProgress(eval(i+1)/totalCount,'正在读取第' + eval(i+1) + '个，一共'+totalCount+'个');
											         this.PostData(i,v);
											   }else{
											         Ext.MessageBox.hide();
											   }
											   },
								   failure: function(){
								               Ext.MessageBox.hide();
								   }
						   });
        },
		Search:function(){
			var win = new Ext.Window({
				title : '多文件上传',
				width : 500,
				height : 300,
				resizable : true,
				modal: true,
				shadow:false,
				layout : 'fit',
				items : [{ 
					xtype : 'uploadpanel',
					uploadUrl : "AcFile_uploadFiles.ac?ClientId=<%=session.getId() %>",
					filePostName : 'myUpload', // 这里很重要，默认值为'fileData',这里匹配action中的setMyUpload属性
					flashUrl : 'swfupload.swf',
					fileSize : '200 MB',
					height : 200,
					border : false,
					fileTypes : '*.xls;*.xlsx', // 在这里限制文件类型:'*.jpg,*.png,*.gif'
					fileTypesDescription : '所有文件',
					postParams : {
					}
				}],
				listeners:{
				close:function(){
				     var filegrid = Ext.getCmp("IMPSys.File.Previewgrid");
					 filegrid.store.reload();
				}
				}
			});
			win.show();

      }
});
//preview grid
EIMS.Main.IMPSys.Grid = function(){	
		 this.sm = new Ext.grid.CheckboxSelectionModel();
		 this.store=new Ext.data.JsonStore({
              fields:[<EIMSTags:ExtStroeMap AFilter="AutoGen='false'" TName="TblSubSys"/>,{name:'Result',mapping:'Result'}]
         });
         this.columns =[
             new Ext.grid.RowNumberer({width:40}),
             this.sm,<EIMSTags:ExtColumns TName="TblSubSys" AFilter="AutoGen='false'"/>
			,{id:'Result',hideable:false,sortable:true,hidden:false,dataIndex:'Result','header':'Result'}
         ];
           
EIMS.Main.IMPSys.Grid.superclass.constructor.call(this,{
                margins:'0 0 0 0',
                sm: this.sm,
				autoScroll:true,
				region: 'west',
                split: true,
                width: 730,
			    StripeRows:true,
			    split: true,
			    id:'IMPSys.Excel.Previewgrid',
				loadMask: {msg:'loading，please wait……'}, 
				frame : false,
			 	border:false,
			    view: new Ext.ux.grid.BufferView({
		              scrollDelay: false
	            }),
			    clicksToEdit : 2,// 设置点击几次才可编辑
				trackMouseOver:true})
};
Ext.extend(EIMS.Main.IMPSys.Grid,Ext.grid.EditorGridPanel);


EIMS.Main.IMPSys.FileGrid = function(){	
        this.store=new Ext.data.Store({
						 	autoLoad : true,
						 	remoteSort:true,
							proxy : new Ext.data.HttpProxy({
										url : 'AcFile_FileList.ac'
									}),
							baseParams:{start:0,limit : 100,sort:'UploadTime',dir:'Desc'},
							reader : new Ext.data.JsonReader({ //使用JSON传输入数据
					                        root : 'Rows',
					                        totalProperty : 'total'
                              },
							               [{
											name : "id",
											mapping : "id"
											},{
											name : "FileExt",
											mapping : "FileExt"
											},{
											name:"PhyName",
											mapping:"PhyName"
											},{
											name:"FileName",
											mapping:"FileName"
											},{
											name:"UploadTime",
											mapping:"UploadTime",
											type:"date",
											dateFormat:"Y-m-d H:i:s"
											},{
											name:"Operator",
											mapping:"Operator"
											}
													]
													)});
		var fm = Ext.form;
		this.sm = new Ext.grid.CheckboxSelectionModel();
	
	// 列模型定义了表格所有列的信息,
	// dataIndex 将特定的列映射到数据源(Data Store)中的数据列(在后面创建)
	
	 this.columns =[
	             new Ext.grid.RowNumberer(),
	             this.sm,
	             {
			id:'id',
			header:'id',
			dataIndex:'id',
			hidden:true
            },{
			id:'FileExt',
			header:'FileExt',
			dataIndex:'FileExt',
			hidden:true
            },{
			id:'PhyName',
			header:'PhyName',
			dataIndex:'PhyName',
			hideable:false,
			hidden:true
	          },{
	          id:'FileName',
			header:'文件名',
			dataIndex:'FileName',
			hideable:true,
			hidden:false,
			sortable:true
	          },{
	        id:'UploadTime',
			header:'上传时间',
			dataIndex:'UploadTime',
			hideable:true,
			hidden:false,
			sortable:true,
			renderer:Ext.util.Format.dateRenderer("Y-m-d H:i:m")
	          },{
	          id:'Operator',
	          header:'Upload user',
	          dataIndex:'Operator',
	          hideable:true,
	          hidden:false,
	          sortable:true
	          }];
           
EIMS.Main.IMPSys.FileGrid.superclass.constructor.call(this,{
                margins:'0 0 0 0',
                sm: this.sm,
				autoScroll:true,
				region:'center',
			    StripeRows:true,
			    id:'IMPSys.File.Previewgrid',
				loadMask: {msg:'loading，please wait……'}, 
				frame : false,
			 	border:false,
			 	listeners:{
			 	rowcontextmenu:function( grid, rowIndex,  e ){
     			    e.preventDefault();//关闭右键默认菜单
			        if (rowIndex < 0) { return; }
			                var treeMenu = new Ext.menu.Menu({
					        items: [
					               {
					                text: '导入',
					                handler : function(){
					                    var record = grid.getStore().getAt(rowIndex);
					                    var win = Ext.getCmp('IMPSys.Import.window');
					                    if(win){
					                       win.show();
					                    }else{
					                       new EIMS.Main.IMPSys.ImpWindow({PhyName:record.data.PhyName,FileExt:record.data.FileExt}).show();
					                    }
					                } 
					               }
					            ]});
                 
			        treeMenu.showAt(e.getXY());
			 	}},
				trackMouseOver:true,
				bbar: new Ext.PagingToolbar({
			      	  pageSize: 100, 
			          store: this.store, 
			          displayInfo: true, 
			          displayMsg: 'Display {0} - {1}Records /Total:{2}', 
			          emptyMsg: "No Data to display" 
		       })
		})
};
Ext.extend(EIMS.Main.IMPSys.FileGrid,Ext.grid.EditorGridPanel,{});

EIMS.Main.IMPSys.CallBackFn=function(Config){
	var previewGridobj=new EIMS.Main.IMPSys.Grid();
	var FileGridobj=new EIMS.Main.IMPSys.FileGrid();
	var obj=new EIMS.Main.IMPSys.Panel({
	                items:[previewGridobj,FileGridobj]
	                },Config);
	return obj;
};


 

looksun
关注
专栏目录
ExtJS拖拽导入Excel数据
08-23
用户可以从excel中选中要导入的数据，直接拖拽到grid中
extjs批量导入
德盖尔芒特公爵的博客
06-09 276
@RequestMapping(method = RequestMethod.POST, value = "importBascpop") @ResponseBody public Msg importBascpop(@RequestParam(value = "file", required = true) MultipartFile file){ logger.info("upload
Extjs上传导入数据（三）
奋斗的蜗牛
02-18 325
/** * 上传文件 * * @return * @throws Exception */ public String uploadSensitiveWords() throws Exception { String suffix = fileName.substring(fileName.lastIndexOf('.'), fileName.length());...
extjs 导入excel
m0_37822534的博客
01-17 1411
1.前端页面代码 excelImport : function() { var me = this; Ext.create('app.system.common.CommonExcelImportWindow',{ tempUrl:'blacklistController/exportTemplate.do', ...
Extjs上传导入数据前端（二）
奋斗的蜗牛
02-18 295
 创建Extjs表格省略...... var fileImport; var uploadForm = new Ext.FormPanel({ id: 'uploadForm', width: 320, frame: true, fileUpload: true, autoHeight: true, ...
extjs 导入导出 Exel
12-06
在EXTJS 中，导入和导出Excel 文件是常见的需求，特别是在处理大量数据时，Excel 的格式化和编辑能力非常有用。 ### 导出到Excel EXTJS 提供了多种方式来实现数据到Excel 的导出。一种常见的方式是通过服务器端...
sql数据插入，extjs代码生成器
07-03
在IT领域，数据库管理和前端开发是两个至关重要的部分。`SQL`是用于管理和操作数据库的强大语言，而`ExtJS`则是一...对于那些经常处理大量数据导入和需要构建复杂前端应用的开发团队来说，这将是一个非常有价值的资源。
基于ExtJS的通用后台管理系统
12-08
2. **高效性能**：ExtJS使用了优化的JavaScript代码，确保在处理大量数据和复杂操作时仍能保持流畅的响应速度。同时，它支持延迟加载和分页技术，减少了前端内存占用。 3. **跨平台兼容性**：由于是基于Web的，该...
Ajax请求在数据量大的时候出现超时的解决方法
12-09
在开发Web应用时，尤其是使用EXTJS这样的JavaScript框架时，我们常常会遇到处理大量数据的情况。当通过Ajax请求获取的数据量过大，响应时间过长，就可能出现请求超时的问题。这是因为浏览器对Ajax请求设定了一个默认...
extjs3.2+struts2实现多文件上传excel并插入到数据库
06-11
extjs3.2+struts2实现多文件上传excel并插入到数据库
extjs 的简单导入文件 第一步
07-29
NULL 博文链接：https://thinktothings.iteye.com/blog/807851
ExtJS poi 导入excel
08-23
java导入excel需要的jar包，包括poi的jar包
Ext中的Excel导入界面
11-21
提供在java中使用前端Ext导入Excel文件的使用，包括前端导入Excel文件的窗口js设置，以及后台接收Excel文件的处理等内容，本代码可直接修改使用，非常方便
extjs4导入数据到表格控件
下雨天__的专栏
01-25 628
用extjs4件数据导入表格控件，数据量比较少的话，可以使用store的set方法赋值，但是当数据量达到一定级别（600条数据以上）时，导入就会非常慢，在ie下凸显的更明显。下面提供一种方法来进行大量数据的导入。思想：先remove掉之前的元素，再从root元素下一次性添加所导入的元素.看下面的js脚本，其实很简单，很粗暴，但是速度很快。有这方面问题的童鞋可以借鉴下。 /** * 填充jso
[ExtJS] 导入导出json文件
拒绝成猿的程序员
06-16 353
在处理一些业务数据时，可能需要将其进行导出、导入操作。这里以导出自定义文件类型的 json类型数据为例。 导出 借助ExtJS的 File类的 saveBlobs 方法进行前端文件输出。 saveBlobAs( content, filename, [charset], [mimeType] ) 参数 content:String File content filename:String Name of the file including the extension ch...
extjs动态导入
贤和知识点收藏
08-17 604
Ext.Loader.setConfig({enabled: true}); Ext.Loader.setPath("util", "../wx/jsUtil");//（重命名，文件目录） Ext.require(["util.config","util.jweixin-1.0.0.js"]);//（[重命名.文件，重命名.文件，....]）
ExtJS4.0中Excel文件导入grid
jwl_yifeng的专栏
08-23 5255
在给出代码之前，先说一下思想，要达到excel的上传，有两种方式可以选择，一种是打开grid，然后打开excel，选中要导入的excel记录，然后进行拖拽，在grid中要使用Ext.ux.grid.DataDrop插件，这种方式是在ext3.1中实现的，我没有在4.0中做过测试，这种方式的优点是比较直观，用户可以直接看到自己导入的数据，缺点是对于大批量的数据进行导入时比较困难；具体可参见http:
Extjs上传导入数据（一）
奋斗的蜗牛
02-18 566
功能：将Excel文件上传到服务器，把里面的数据导入到数据库中 上传时，删除临时文件，删除上传时所创建的文件 一、用Extjs创建表格 二、上传后的数据，导入数据库返回并在前端页面显示 三、点击按钮，弹框，显示上传 四、导入数据成功后，弹框消失  ...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值