项目中使用easyui的tab页,每个tab页均内嵌iframe,现在要在tab页中控制新增一个同级别的tab页,记录如下:
首先是main.html主页面:
<div class="easyui-tabs" fit="true" id="tabs"> <div title="首页" data-options="iconCls:'icon-home'" id="main"></div> </div>
现在要在‘首页’这个tab页中控制新增一个同级别的tab页,可使用如下:
var jq = top.jQuery; if (jq("#tabs").tabs('exists', "新增的tab页")){ jq("#tabs").tabs('select', "新增的tab页"); } else { var content = '<iframe scrolling="auto" frameborder="0" src="/href/list" style="100%;height:100%;"></iframe>'; jq("#tabs").tabs('add',{ title:"新增的tab页", content:content, closable:true, iconCls: "icon-building_edit" }); }
刷新'首页'这个tab页:
var jq = top.jQuery; jq("#tabs").tabs('close', "新增的tab页"); var tab = jq('#tabs').tabs("getSelected"); // get selected panel jq('#tabs').tabs('update', { tab: tab, options: { content:'<iframe scrolling="auto" frameborder="0" src="/market" style="100%;height:100%;"></iframe>' } }); jq.messager.show({title:"提示",content:"更新成功"});
这样的话,一个tab页关闭之后,就可以实现刷新之前跳转过来的tab页。
然后是在iframe子页面中调用父页面的js方法:
function openCustomerLinkMan(){ var selectedRows=$("#dg").datagrid("getSelections"); if(selectedRows.length!=1){ $.messager.alert("系统提示","请选择一条要管理的数据!"); return; } window.parent.openTab('客户联系人管理','linkManManage.jsp?cusId='+selectedRows[0].id,'icon-lxr'); //直接新增一个tab页 }