<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><%=(String)request.getSession().getAttribute("title")%></title> <link rel="stylesheet" href="css/icons.css" type="text/css"></link> <link rel="stylesheet" href="css/code.css" type="text/css"></link> <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/resources/css/ext-all.css" /> <script type="text/javascript" src="<%=request.getContextPath()%>/js/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/ext-all.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jinyongtab.js"></script> <script> var Uname=''; Ext.onReady(function() { Ext.QuickTips.init(); //TreeLoader扩展,支持josn-plugin返回的json对象中包含的数组值 Ext.tree.JsonPluginTreeLoader = function (config) { this.rootName = 'nodes'; Ext.tree.JsonPluginTreeLoader.superclass.constructor.call(this, config); } Ext.extend(Ext.tree.JsonPluginTreeLoader, Ext.tree.TreeLoader, { processResponse: function (response, node, callback) { var json = response.responseText; try { var o = response.responseData || Ext.decode(json); //在原代码基础上增加了下面处理--------------------- if (Ext.type(o) == 'object') {//如果返回的是对象则获取他的root部分,rootName是可以在使用的时候配置的 o = o[this.rootName || 'nodes']; } //-------------------------------------------------- node.beginUpdate(); for (var i = 0, len = o.length; i < len; i++) { var n = this.createNode(o[i]); if (n) { node.appendChild(n); } } node.endUpdate(); this.runCallback(callback, scope || node, [node]); } catch(e) { this.handleFailure(response); } } }); //end*************** // tree start var tree = new Ext.tree.TreePanel( { title : '树', el:'win', region : 'west', split : true, border : true, width : 220, minSize : 100, maxSize : 300, loader: new Ext.tree.JsonPluginTreeLoader({dataUrl: 'loadTree.action'}) //new Ext.tree.TreeLoader({dataUrl:'Data.txt'}) }); var root = new Ext.tree.AsyncTreeNode( { text : '功能菜单' }); tree.setRootNode(root); root.expand(); tree.render(); //树节点监控事件 点击树叶子节点触发 点击跟则将之展开 tree.on('click',function(node, event){ event.stopEvent(); if(node.isLeaf()){ // var templink = node.attributes.link; var n = contentPanel.getComponent(node.id); //alert(node.id); if (!n) { //判断是否已经打开该面板 n = contentPanel.add({ 'id':node.id, 'title':node.text, closable:true, //autoLoad:{url:"iframe.jsp", scripts:true} //通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性 html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src='+node.id+'></iframe>' //通过html属性载入目标页 }); } contentPanel.setActiveTab(n); } }); // tree end //右边具体功能面板区 var contentPanel = new Ext.TabPanel({ region : 'center', enableTabScroll:true, activeTab:0, margins:'0 5 5 0', items:[updatePeopleform] }); // layout start var viewport = new Ext.Viewport( { layout : 'border', items : [ { region : 'north', border : true, collapsible : false, height : 70, html:'<table width="100%"><tr><td width="50%" align="left">网管系统</td><td width="50%" align="right"> <c:if test="${sessionScope.uname == null}"><a href="#" onclick="logon()" >登陆</a> </c:if><a href="#" onclick="logout()" >注销</a></td></tr><tr><td> </td><td> </td></tr><tr><td>当前操作用户:<font color=red><%=(String)request.getSession().getAttribute("uname")%></font></td><td></td></tr></table>', bodyStyle : 'background-color:#BDD3EF;' },tree, contentPanel] }); // layout end }); //浏览器关闭后触发事件 //window.onunload = function(){ // logout(); //} //注销处理方法处理方法 function logout(){ Ext.Ajax.request({ url: 'Logout.action', success: function(response,options){ Ext.MessageBox.alert('提示',Ext.decode(response.responseText).message);//获得后台传来的提示 //window.location.href="main.jsp"; top.location='main.jsp'; }, failure: function(response,options){ Ext.MessageBox.alert('提示',Ext.decode(response.responseText).message);//获得后台传来的提示 } }); } //登陆 function logon(){ Ext.getCmp('logonWindow').show(); if(Ext.getCmp('bd2')==null){ if(!fagshowcode){ fagshowcode=showcode(); } } } </script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/logon.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/updatepwd.js"></script> </head> <body onload="showLogon('<%=(String)request.getSession().getAttribute("uname")%>')"> <table width="100%" height="100%"> <tr height="60"> <td > </td> </tr> <tr ><td> <div id="win" style="width: 20%"></div> </td> </tr> </table> </body> </html>
说明:此页面为左边树菜单右边操作页面的框架结构,点击左边树节点右边跳转到不同的页面。
Struts2 action代码
package cn.rx.oamp.action; import java.util.Date; import java.util.List; import cn.rx.oamp.action.BaseAction; public class UserAction extends BaseAction { private boolean success; private String message; private List nodes; private MenuService menuService; /** * 加载树 * @return */ public String loadTree() { if (this.islogon()) { String us = this.getSession().getAttribute("uname").toString(); nodes = menuService.selectAllMenu(us); } return SUCCESS; } public boolean isSuccess() { return success; } public void setSuccess(boolean success) { this.success = success; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public List getNodes() { return nodes; } public void setNodes(List nodes) { this.nodes = nodes; } public void setMenuService(MenuService menuService) { this.menuService = menuService; } }
返回json数据为
"nodes":[{"children":[{"id":"user.jsp","leaf":true,"text":"用户管理"},{"id":"role.jsp","leaf":true,"text":"角色管理"}],"id":null,"leaf":false,"text":"权限用户管理"}]