在项目中往往会遇到这种情况,点击菜单,上面出现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>
<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); }
/** * 根据不同的菜单,向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; } }