欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery EasyUI Tab 選項(xiàng)卡問題小結(jié)

 更新時(shí)間:2016年08月16日 09:50:04   作者:hellokitty燕  
這篇文章主要介紹了jQuery EasyUI Tab 選項(xiàng)卡問題小結(jié),在項(xiàng)目開發(fā)階段很多朋友都遇到過此問題,其實(shí)解決辦法很簡(jiǎn)單的,下面小編給大家分享下問題原因及解決辦法,需要的朋友可以參考下

需要解決的問題:

比如說 我先把行政區(qū)域的頁面打開之后,我又把產(chǎn)品類型管理的頁面打開,之后我再產(chǎn)品類型管理里添加了一條數(shù)據(jù),當(dāng)我點(diǎn)擊橫著的行政區(qū)域選項(xiàng)卡時(shí),我需要使用到產(chǎn)品類型管理崗添加的數(shù)據(jù),但是在行政區(qū)域里不存在那條數(shù)據(jù)。我就想讓這條數(shù)據(jù)顯示出來,所以我就想當(dāng)我點(diǎn)擊橫著的選項(xiàng)卡的時(shí)候,我就想讓刷新一下頁面。這時(shí)那條數(shù)據(jù)就會(huì)顯示出來。

主要是我完全不知道我點(diǎn)擊橫著的選項(xiàng)卡觸發(fā)的事件。代碼如下:

html

選項(xiàng)卡

<div data-options="region:'center',collapsible:false">
<div id="mainTabs" class="easyui-tabs" data-options="fit:true,narrow:true">
<div title="首頁" style="overflow:hidden;" data-options="iconCls:'fa fa-home'">
<div id="myclock" style="margin: 0 auto;width: 400px;" class="clock"></div> 
</div>
</div> 
</div>

js

添加橫著的選項(xiàng)卡

function addTab(title, url) {
if ($('#mainTabs').tabs('exists', title)) {
$('#mainTabs').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+ url+'" style="width:100%;height:99%;"></iframe>';
$('#mainTabs').tabs('add', {
title: title, 
content: content, 
closable: true ,
cache:true, 
}); 
}
}

點(diǎn)擊左邊選項(xiàng)卡

function clickTree(node) {
if ($(this).tree('isLeaf', node.target)) {
addTab(node.text, node.attributes.url); 
} else {
$(this).tree('toggle', node.target);
}
}

問題算是解決了吧!

思路:主要就是點(diǎn)擊橫著的選項(xiàng)卡的時(shí)候,重新加載數(shù)據(jù)一樣。

function addTab(title, url) {
if ($('#mainTabs').tabs('exists', title)) {
$('#mainTabs').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+ url+'" style="width:100%;height:99%;"></iframe>';
$('#mainTabs').tabs('add', {
title: title, 
content: content, 
closable: true ,
cache:true, 
}); 
}
}
function clickTree(node) {
if ($(this).tree('isLeaf', node.target)) {
addTab(node.text, node.attributes.url); 
/* 獲取橫向的選項(xiàng)卡 */
var content = '<iframe scrolling="auto" frameborder="0" src="'+ node.attributes.url+'" style="width:100%;height:99%;"></iframe>';
$('#mainTabs').tabs({
onSelect: function (title) {
var currTab = $('#mainTabs').tabs('getTab', title, node.attributes.url); 
var iframe = $(currTab.panel('options').content);
var src =iframe.attr('src'); 
$('#mainTabs').tabs('update',{ 
options: {
title: title,
href: src
}
});
}
}); 
} else {
$(this).tree('toggle', node.target);
}
}

效果截圖:

先打開產(chǎn)品類型和基礎(chǔ)產(chǎn)品頁面

到 產(chǎn)品類型 添加數(shù)據(jù)

到基礎(chǔ)產(chǎn)品 添加數(shù)據(jù)

我想要的效果達(dá)到了!

主要代碼:

var content = '<iframe scrolling="auto" frameborder="0" src="'+ node.attributes.url+'" style="width:100%;height:99%;"></iframe>';
$('#mainTabs').tabs({
onSelect: function (title) {
var currTab = $('#mainTabs').tabs('getTab', title, node.attributes.url); 
var iframe = $(currTab.panel('options').content);
var src =iframe.attr('src'); 
$('#mainTabs').tabs('update',{ 
options: {
title: title,
href: src
}
});
}
});

以上所述是小編給大家介紹的jQuery EasyUI Tab 選項(xiàng)卡問題小結(jié),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

最新評(píng)論