先做一个tabs的页签页：
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/taglib/common.jsp"%>
<html>
<head>
<title>Kensite开发平台</title> //随便起名
<%@ include file="/WEB-INF/view/taglib/header.jsp"%>
<%@ include file="/WEB-INF/view/taglib/easyui.jsp"%>
<%@ include file="/WEB-INF/view/taglib/layer.jsp"%>
<style type="text/css">
</style>
</head>
<body>
<div style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;height:100%;">
<div id="ks_tab_win" class="easyui-tabs" data-options="tabPosition:'bottom',plain:true"
style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;height:100%">
<div id="0" title="企业信息" style="overflow: auto;"> //title是你打开的第一个页签名
<c:if test="${empty url}">
<span style="font-size:32px;color:red">URL都不传闹哪样</span>
</c:if>
<c:if test="${not empty url}">
<iframe id="ifrm0" style="width:100%;height:100%;border:none" src="${ctx }${url}"></iframe>
</c:if>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready( $(function () {
}));
function addTab(id, title, url) {
if(url==null || url=='') {
var content = '<span style="font-size:32px;color:red">URL都不传闹哪样</span>';
$('#ks_tab_win').tabs('add',{
title: 'I服了YOU',
content: content,
closable: true
});
return;
}
if(title==null && title=='') {
title=='查看';
}
if(id!=null && id!='') {
var tabIdx = getTabIndex(id);
if ($('#ks_tab_win').tabs('exists', tabIdx)){
$('#ks_tab_win').tabs('select', tabIdx);
} else {
var content = '<iframe id="ifrm'+id+'" style="width:100%;height:100%;border:none" src="'+url+'"></iframe>';
$('#ks_tab_win').tabs('add', {
id: id,
title: title,
content: content,
closable: true
});
}
} else {
if ($('#ks_tab_win').tabs('exists', title)){
$('#ks_tab_win').tabs('select', title);
} else {
var content = '<iframe id="ifrm'+title+'" style="width:100%;height:100%;border:none" src="'+url+'"></iframe>';
$('#ks_tab_win').tabs('add', {
title: title,
content: content,
closable: true
});
}
}
}
function closeTab(selector) { //关闭打开的指定页签页
if(selector!=null && selector!='') {
var tabIdx = getTabIndex(selector);
if(tabIdx != -1) {
$('#ks_tab_win').tabs('close', tabIdx);
} else {
$('#ks_tab_win').tabs('close', selector);
}
} else {
}
}
function refreshTab(selector) { //刷新指定页签页
if(!selector) {
var src = document.getElementById('ifrm'+selector+'').src;
document.getElementById('ifrm'+selector+'').src = src;
}
}
function getTabIndex(id) {
var tabs = $('#ks_tab_win').tabs('tabs');
for(var i=0; i<tabs.length; i++) {
if(tabs[i].attr('id') == id) {
return i;
}
}
return -1;
}
</script>
</html>
在导航菜单中的URL中先使用页签：/sysMenu/tabs?url= 然后再页签后边跟上页签中的第一个页面的地址，这样就能使用页签
从第一页打开之后的页，需要在这页中配置一下body中：
<table class="easyui-datagrid" style="width:400px;height:250px" data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true"> <thead> <tr> <th data-options="field:'businessId',width:100" formatter="rowformater">企业编号</th> //formatter方法
</tr>
</thead>
</table>
js：
function rowformater(value, row, index) { var str = "<a href='javascript:void(0)' onclick='warnMssage("+index+")'>"+value+"</a>" return str; } function warnMssage(index){ $("#dataList").datagrid('selectRow',index); var row = $("#dataList").datagrid('getSelected'); id = row.id; title = "【"+row.businessName+"】"+"预警信息"; url = "${ctx}/fms/warningMessage/list?row="+row.id; parent.addTab(id,title,url); }
这样就可以在这个页面中打开之后的页签页了
