需要解決的問(wèn)題:
比如說(shuō) 我先把行政區(qū)域的頁(yè)面打開(kāi)之后,我又把產(chǎn)品類型管理的頁(yè)面打開(kāi),之后我再產(chǎn)品類型管理里添加了一條數(shù)據(jù),當(dāng)我點(diǎn)擊橫著的行政區(qū)域選項(xiàng)卡時(shí),我需要使用到產(chǎn)品類型管理崗添加的數(shù)據(jù),但是在行政區(qū)域里不存在那條數(shù)據(jù)。我就想讓這條數(shù)據(jù)顯示出來(lái),所以我就想當(dāng)我點(diǎn)擊橫著的選項(xiàng)卡的時(shí)候,我就想讓刷新一下頁(yè)面。這時(shí)那條數(shù)據(jù)就會(huì)顯示出來(lái)。
主要是我完全不知道我點(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="首頁(yè)" 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="http://www.gimoo.net/t/1901/5c33f0e951d69.html'+ 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); } }
問(wèn)題算是解決了吧!
思路:主要就是點(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="http://www.gimoo.net/t/1901/5c33f0e951d69.html'+ 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="http://www.gimoo.net/t/1901/5c33f0e951d69.html'+ 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); } }
效果截圖:
先打開(kāi)產(chǎn)品類型和基礎(chǔ)產(chǎn)品頁(yè)面
到 產(chǎn)品類型 添加數(shù)據(jù)
到基礎(chǔ)產(chǎn)品 添加數(shù)據(jù)
我想要的效果達(dá)到了!
主要代碼:
var content = '<iframe scrolling="auto" frameborder="0" src="http://www.gimoo.net/t/1901/5c33f0e951d69.html'+ 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)卡問(wèn)題小結(jié),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)綠夏網(wǎng)網(wǎng)站的支持!