easyui关于解决tab添加的页面通过href加载数据内容的页面刷新后form表单重复提交的问题;

1.分析

Easyui中的tabs组件以href方式加载目标页面,如果目标页面中有dialog或者window这类的easyui组件中放了form.那么在关闭这个tab再次打开或者点击刷新.如果进行form提交操作,后台就会收到两次提交请求,再次重复以上操作会收到3次提交请求,如果将表单serialize()后以jQuery的post提交服务器将收到值全是数组方式组织的.

经分析发现,Easyui的tab加载页面后会把目标页面的dialog组件的DOM代码从目标页面中拿出放到本页面的DOM结构中.先看以下在目标页面中dialog初始化前后的差异

1.目标页面原始DOM结构如下(页面中的dialog未经实例化)

红色圈中的为dialog弹框页面

2.如果目标页面在加载时实例化了dialog,代码如下

dialog页面本应出现下方框中圈中的位置,结果没有而是被移动到body中

当关闭当前的tab时dialog并没有被清除,所以在再次打开或者刷新页面的时候提交form表单就会重复提交代码,刷新的次数越多提交的越多;

2:解决办法:

在关闭或者刷新时选中目标tab中的所有div中的id,然后清楚

1. 添加的时候抽取出id

	tabPanel.tabs('add',{
						title:title,
						href:href,
						iconCls:iconCls,
						fit:true,
						cls:'pd3',
						closable:true,
						extractor: function(data){  
				            //抽取body中的内容  
				                var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;  
				                var matches = pattern.exec(data);  
				                if (matches){  
		  		                    data = matches[1];  
				                }  
				                var tmp = $('<div/>').html(data);  
				                  
				             var divs = $(tmp).find('[id]');  
				             var ids = [];  
				             for(var i=0;i<divs.length;i++){  
				                 ids.push(divs[i].getAttribute("id"));  
				             }  
				            //记录本tab中的所有带ID的DIV  
				                $('#wu-tabs').tabs('getTab',title).divs = ids;  
				                return data;  
				            }
					});

2.刷新页面

		function refreshTabData(title)
			{
			    if ($('#wu-tabs' ).tabs('exists', title)) {
			        $('#wu-tabs').tabs('select' , title);
			         var tab = $('#wu-tabs').tabs('getSelected');
			         var divs = tab.divs;  
			         debugger;
			            for(var i=0;i<divs.length;i++){  
			                var divTarget = $('#'+divs[i]);  
			                if(divTarget){  
			                    divTarget.remove();  
			                }  
			            } 
			         var index = $('#wu-tabs').tabs('getTabIndex',tab);
			         tab.panel('refresh');
			    }
			}

3. 在页面初始化的时候直接初始化关闭tab的情况;

		/**
		* Name 选项卡初始化
		*/
 		$('#wu-tabs').tabs({
			tools:[{
				iconCls:'icon-reload',
				border:false,
				handler:function(){
					$('#wu-datagrid').datagrid('reload');
				}
			}],
			   autoWidth:true,  
		        onBeforeClose:function(title,index){//关闭面板前把此功能的资源释放  
		                var tab =  $(this).tabs('getTab',index);  
		            //准备删除的DIV内容  
		            $('#my-tabs').attr("rmdiv",tab.divs);  
		        },onClose : function(){//删除被关闭tab中用到的DOM对象  
		            var divs = $('#my-tabs').attr("rmdiv").split(",");  
		            for(var i=0;i<divs.length;i++){  
		                var divTarget = $('#'+divs[i]);  
		                if(divTarget){  
		                    divTarget.remove();  
		                }  
		            }  
		        } 
		}); 

稍微麻烦了点,但问题解决了.各位大神如果有更好的办法请告知,谢谢!