在项目中往往会遇到这种情况,点击菜单,上面出现tab页,下次如果再要访问这个菜单下面的数据就不用重新加载,以下代码是我这次在项目中用jQuery EasyUI实现的tab页:
在jsp中需要引入的重要js:
<link href="<%=request.getContextPath()%>/common/jquery-easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/common/jquery-easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="<%=request.getContextPath()%>/common/js/jquery.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/common/jquery-easyui/jquery.easyui.min.js" type="text/javascript"></script>
接下来是jsp中的tab页div:
<div id="phone_list_date">
<div id="tab" class="easyui-tabs">
</div>
</div>
以下是js中对应的一些代码,菜单树使用的也是jquery EasyUI实现的
//加载菜单树
$('#tt').tree({
data: menuData,
loadFilter: function(rows) {
return convert(rows);
},
onClick : function(node) { //点击onclick事件,查询出对应的数据
addTablePanel(node); //添加table页
onclickMenu(node); //数据加载到table页中
}
});
下面代码是向页面中添加tab页的核心代码:
/**
* 点击菜单树添加table页
*/
function addTablePanel(node){
if(isTabExists(node.text)){
$('#tab').tabs('select',node.text);//选中当前tabs
}else{
$('.multipleAnalyse_iframe').removeClass("multipleAnalyse_iframe").addClass('xx');
$('#tab').tabs('add',{
title:node.text,
content:"<iframe class='multipleAnalyse_iframe' style='height:100%; width:100%'></iframe>", //每个tab页里面添加一个iframe标签
closable:true
});
$('.multipleAnalyse_iframe').height($('#phone_list_date').height()-29);
}
}
/**
* 判断tab页是否存在
* @param title
* @returns
*/
function isTabExists(title){
return $('#tab').tabs('exists',title);
}
下面代码就是向tab页里面添加数据啦,这里添加的又是jsp页面
/**
* 根据不同的菜单,向iframe里面添加不同的jsp页面
* @param node
*/
function onclickMenu(node){
var nodeId = node.id;
switch(nodeId){
case 93: //DT用户跟踪
$(".multipleAnalyse_iframe").attr("src",path+"/multipleAnalyse/jsp/extendsBusinessAnalyse.jsp");
<span style="white-space:pre"> </span>$.messager.alert('提示','演示版暂时未提供该功能演示,请谅解!!');
break;
}
}