EASYUI 新版本中如何添加的每个tab都是一个iframe,并且可以刷新,默认不加载数据,只有选中的时候才判断是否加载

要求:tabs里面的每个tab都是一个iframe,每个iframe可以点击刷新小圈圈进行刷新,默认不加载tab内容,只有选中的时候,如果iframe没有初始化,没有初始化,则初始化;初始化了,则判断iframe的url是否和新的url一致,如果一致,则不刷新;如果不一致,则刷新iframe,主要是防止重复刷新。

html:

 

js:

$(function(){
	initTabs();
});
function initTabs(){
	var url = "";
 	$("#myTabs").tabs({
		onSelect:function(title,index){
			var tab = $(this).tabs('getTab',index);
			var tabName=$(tab).panel("options").title;
			switch(tabName){
				case '合同列表':
					url="./queryContract";
				break;
				case '决算批覆':
					url = finalReplyUrl;
				break;
			}
			if (!checkInitIframe(tab) || !isSameIframe(tab,url)){
				//如果tab没有url,或者和前一个url不是同一个,则刷新iframe
				refreshMyTab(tab,url);
			}

		},
		onUnselect:function(title,index){
		}
	});
 	addTabByNewVersion('合同列表','','icon-hamburg-attibutes',"#myTabs",'htlb',true,true,false);
 	addTabByNewVersion('决算批覆','','icon-hamburg-attibutes',"#myTabs",'jspf',true,false,false);
}

/**
 * 新版本easyui新建tab
 * @param title
 * @param href
 * @param icon
 * @param tabsId
 * @param name
 * @param isIframe
 * @param isSelected
 * @returns
 */
function addTabByNewVersion(title, href,icon,tabsId,name,isIframe,isSelected,closable,notIframeContent,scrollAuto,noRefresh){
	var closableVal = true;
	if(typeof closable != 'undefined'){
		closableVal = closable;
	}
	mainTab = $(tabsId);    
	var tab=mainTab.tabs("tabs");
	var ret=0;
	for (var i = 0; i < tab.length; i++) {
		var obj2=tab[i].panel("options");
		if(obj2.title == title){
			ret=2;
			break;
		}
	}
	var content = null;
	var scrolling = "no";
	var refresh = true;//默认刷新
    if(scrollAuto){
    	scrolling = "auto";
    }
    var tools = [{
		iconCls:'icon-mini-refresh',
		handler:function(){
//var iframe = $('.panel:visible > .panel-body > iframe').get(0);//有多个iframe会出现混乱
			var iframe = $(this).parents('.tabs-header').next().find('.panel:visible > .panel-body > iframe').get(0);
			var src2 = $(iframe).attr("src2");
			if(src2){ //点击刷新小圈圈,利用src2来进行刷新,这个主要是iframe不刷新url,只改变src2,把src2保存为iframe最新的url
				$(iframe).attr("src2","");
				$(iframe).attr("src",src2);
			}else{
				iframe.contentDocument.location.reload(true);
			}
		}
	}];
    if(noRefresh){
    	//不需要刷新
    	tools = [];
    }
	if(isIframe){
		content = '<iframe scrolling="'+scrolling+'" frameborder="0"  src="'+href+'" style="width:100%;height:100%;"></iframe>';
	}else{
		content = notIframeContent;
	}
	var opts={
			title: title, iniframe: true, closable: closableVal, refresh: refresh, iconCls: icon, repeatable: true,content:content,
			selected: isSelected?true:false,
					tools:tools
	};
	switch(ret)
	{
	case 0:
		var addDom = mainTab.tabs("add", opts);
		if(name){
			var tab = addDom.tabs('getTab',title);
			if(tab){
				tab.attr("name",name);
			}
		}
		break;
	case 1:
		var addDom = mainTab.tabs("add", opts);
		if(name){
			var tab = addDom.tabs('getTab',title);
			if(tab){
				tab.attr("name",name);
			}
		}
		break;
	case 2:
		mainTab.tabs("select", title);
		break;
	default:
		break;
	}
} 

//根据指定url刷新iframe
function refreshMyTab(tab,src){
	$(tab.find('iframe')[0]).attr('src',src);
//	tab.panel("options")["href"] = src;
}

//刷新iframe
function reloadMyTab(tab){
	var src = $(tab.find('iframe')[0]).attr('src');
	refreshMyTab(tab,src);
}

//改变iframe的src2为最新的url,这个主要是iframe不整个刷新,只是执行iframe里面的某个方法进行刷新数据,那么就要///把最新的url保存起来,在点击刷新小圈圈的时候使用
function chageTabUrl(tab,newUrl){
	$(tab.panel("body").find("iframe")[0]).attr("src2",newUrl);
}

//判断iframe是否有url,即iframe是否已经初始化
function checkInitIframe(tab){
	return $(tab.find('iframe')[0]).attr('src');
}

//判断iframe的url是否和最新的url是否相同
function isSameIframe(tab,src){
	if($(tab.find('iframe')[0]).attr('src') == src){
		return true;
	}
	return false;
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章