<%@ 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="#" οnclick="logon()" >登陆</a> </c:if><a href="#" οnclick="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 οnlοad="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":"权限用户管理"}]
675
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
