easyui刷新tabs页签实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yinkgh/article/details/84025597

页面展示相关代码

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