easyui刷新tabs页签实现

最新推荐文章于 2020-08-05 11:01:47 发布

紫木冰焰

最新推荐文章于 2020-08-05 11:01:47 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： easyui 文章标签： easyui

本文链接：https://blog.youkuaiyun.com/yinkgh/article/details/84025597

easyui 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了使用EasyUI框架中Tabs组件的两种刷新方法：一是整个页面的刷新，适用于需要完全更新页面内容的情况；二是局部datagrid刷新，适用于列表有查询条件，只需更新列表而不清除查询条件的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面展示相关代码

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