1.分析

Easyui中的tabs元件以href方式載入目標頁面,如果目標頁面中有dialog或者window這類的easyui元件中放了form.那麼在關閉這個tab再次開啟或者點選重新整理.如果進行form提交操作,後臺就會收到兩次提交請求,再次重複以上操作會收到3次提交請求,如果將表單serialize()後以jQuery的post提交伺服器將收到值全是陣列方式組織的.

經分析發現,Easyui的tab載入頁面後會把目標頁面的dialog元件的DOM程式碼從目標頁面中拿出放到本頁面的DOM結構中.先看以下在目標頁面中dialog初始化前後的差異

1.目標頁面原始DOM結構如下(頁面中的dialog未經例項化)

紅色圈中的為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;  
				            }
					});
 

		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');
			    }
			}
 

		/**
		* 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();  
		                }  
		            }  
		        } 
		});