easyui重新整理tabs頁籤實現

• 頁面展示相關程式碼
• 實現程式碼如下
• 實現方式一：整個頁面的重新整理
• 實現方式二：區域性datagrid重新整理

頁面展示相關程式碼

首先easyui的tabs實現如下，後臺程式碼是用springmvc實現：
父頁面相關程式碼

// An highlighted block
<div id="tt_tabs" class="easyui-tabs" style="overflow :hidden;" data-options="fit:true,plain:true"
 
>
	<div title="頁籤1" >
    	<iframe id="first" scrolling="no" frameborder="0"  src="common/first/listView"style="width:100%;height:100%;"></iframe>
    </div>
    <div title="頁籤2"  >
    	<iframe id="second" scrolling="no" frameborder="0"  src="common/second/listView" style="width:100%;height:100%;"
 
></iframe>
    </div>
    <div title="頁籤3"  >
		<iframe id="third" scrolling="no" frameborder="0"  src="common/third/listView" style="width:100%;height:100%;"></iframe>				
    </div>
     <div title="頁籤4"  >
		<iframe id="forth" scrolling="no" frameborder="0"  src=
 
"common/forth/listView" style="width:100%;height:100%;"></iframe>
    </div>
    <div title="頁籤5"  >
		<iframe id="fifth" scrolling="no" frameborder="0"  src="common/srReport/listView" style="width:100%;height:100%;"></iframe>
    </div>
</div>

實現程式碼如下

實現方式一：整個頁面的重新整理

注意：本人的實現方式是將以下的程式碼和頁面程式碼放在一起

<script type="text/javascript">
		
$('#tt_tabs').tabs({ 
	border:false, 
	onSelect:function(title){ 	
		var iframe = null;// 得到iframe
		if("頁籤1"==title){
			iframe = $('#first')[0];// 得到iframe
		}
		if("頁籤2"==title){
			iframe = $('#second')[0];// 得到iframe
		}
		if("頁籤3"==title){
			iframe = $('#third')[0];// 得到iframe
		}
		if("頁籤4"==title){
			iframe = $('#forth')[0];// 得到iframe
		}
		if("頁籤5"==title){
			iframe = $('#fifth')[0];// 得到iframe
		}
			
		if(iframe){
			iframe = (iframe.contentWindow || iframe.contentDocument);// 得到iframe視窗內容
			//console.log(iframe);
			iframe.location.reload(true); // 重新整理整個頁面列表
			
		}
		
	} 
}); 

實現方式二：區域性datagrid重新整理

這裡是區域性重新整理，如果列表有查詢條件，整個列表重新整理會把查詢條件也會清除掉，因此要進行區域性datagrid的重新整理

<script type="text/javascript">
		
$('#tt_tabs').tabs({ 
	border:false, 
	onSelect:function(title){ 	
		var iframe = null;// 得到iframe
		if("頁籤1"==title){
			iframe = $('#first')[0];// 得到iframe
		}
		if("頁籤2"==title){
			iframe = $('#second')[0];// 得到iframe
		}
		if("頁籤3"==title){
			iframe = $('#third')[0];// 得到iframe
		}
		if("頁籤4"==title){
			iframe = $('#forth')[0];// 得到iframe
		}
		if("頁籤5"==title){
			iframe = $('#fifth')[0];// 得到iframe
		}
			
		if(iframe){
			iframe = (iframe.contentWindow || iframe.contentDocument);// 得到iframe視窗內容
			// 注意：這裡是呼叫iframe頁面的reloadTable()方法
			if(iframe['reloadTable']){
				iframe['reloadTable'].call();// 重新整理列表
			}
		}
		
	} 
}); 

iframe頁面的reloadTabel()方法程式碼如下：

// 重新整理表格
function reloadTable(){
	$("#tt").datagrid('reload');
}