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

 

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