<%@ 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":"权限用户管理"}]
分享到:
相关推荐
本篇将详细讲解如何使用`Ext2.2`和`Struts2`集成,通过`JSON`传输数据生成树形结构。 首先,`Ext2.2`的树形组件(TreePanel)是一种强大的可视化工具,能够展示层级关系的数据。它支持动态加载、拖放操作以及多种...
在本文中,我们将深入探讨`Ext.tree.TreeLoader`与JSON数据在Ext JS框架中的应用。`Ext.tree.TreeLoader`是Ext JS库中的一个组件,它负责加载和解析树形结构的数据,而JSON(JavaScript Object Notation)则是一种轻...
通过这种方式,我们解决了 Struts2 JSON 插件返回数据格式与 ExtJS Tree 期待格式不匹配的问题。现在,树形菜单应该能够正确地动态加载并显示从服务器获取的数据。这个例子展示了如何在实际开发中灵活应对数据格式...
Extjs 原始的treeloader无法通过跨域读取jsonp数据,非常恼人,查了网上一些资料后自己写了一个。能够实现跨域的jsonp读取加载节点。没有太多时间调试,可能不完美。
通过以上步骤,我们就能实现一个基于ExtJS Tree、JSON和Struts 2的Ajax动态加载树结构。这种技术允许我们仅加载当前需要的节点,提高应用的性能,并且可以轻松地与服务器端数据进行交互。同时,由于采用了JSON格式,...
在Ext Tree Panel中,我们可以通过设置`loader`属性来启用延迟加载,指定一个`TreeLoader`对象,该对象负责从服务器获取更多数据。 **3. JSON数据交互** JSON是树Panel与服务器进行数据交互的常用格式。在本例中,...
本文主要介绍EXT2树组件的使用,包括从底层的JSON数据生成到表现层的渲染。 首先,EXT2的树组件(TreePanel)是通过JavaScript实现的,它依赖于EXT库提供的类和方法。在示例代码中,我们创建了一个新的TreePanel...
2. **手动构建JSON**:对于简单的查询结果,可以手动构建JSON字符串,但这通常效率较低且容易出错,特别是在处理复杂数据结构时。 3. **利用现有的库**:例如,使用Google的Gson库或Jackson库,它们提供了强大的...
8.5.4. Ext对json的支持力度 8.5.5. 反向操作,ext把json变成字符串 8.6. 小声说说scope 8.7. 菜单和工具条 8.7.1. 至简至廉的菜单 8.7.2. 丰富一点儿的多级菜单 8.7.3. 单选多选,菜单里搞这套 8.7.4. 小把戏,定制...
在ExtJS中,一个JSON树是由多个JSON对象组成的,每个对象代表树的一个节点。这些对象通常包含ID、文本、子节点等属性,用以构建可交互的树形视图。例如: ```json { "id": "1", "text": "父节点", "children": ...
例如,`rootVisible`属性决定是否显示根节点,`animate`属性控制节点展开和折叠时的动画效果,而`loader`属性则是关键,它用于指定树的加载行为,通常是一个`TreeLoader`对象。 ```javascript var tree = new Ext....
### Ext.ux.tree.TreeGrid 异步加载知识点详解 #### 一、Ext.ux.tree.TreeGrid简介 在ExtJS框架中,`Ext.ux.tree.TreeGrid`组件是一种结合了树形结构与表格显示特性的控件,适用于展示具有层级关系的数据。通过...
2. **使用TreeLoader**: TreeLoader是用来加载和解析树节点的数据对象。它支持分页加载,可以通过设置`loadPage`方法来指定加载哪一页的数据。例如: ```javascript var treeLoader = new Ext.tree.TreeLoader({ ...
2. **配置TreeLoader**:创建一个`TreeLoader`实例,设置其`dataUrl`属性为服务器端返回JSON数据的URL,可以自定义`baseAttrs`属性来设置默认的节点属性。 3. **添加根节点**:在TreeLoader中定义根节点,可以是一...
Ext Tree 支持多种数据源,包括 JSON、XML 和 JavaScript 对象。 `tree2.html`、`tres.html`、`s1.html`、`tree.html` 这些 HTML 文件可能包含了不同的示例代码,用于展示 Ext Tree 的不同用法和配置。例如,它们...
`Ext.Tree.Panel`是EXT JS库中的一个重要组件,用于展示层次结构的数据,通常用作树形菜单或文件系统目录的视图。这个组件是EXT JS框架中用于创建交互式、可扩展的树结构的工具。以下是对`Ext.Tree.Panel`相关知识的...
EXT的TREE组件通常与JSON数据源配合使用,通过异步加载或者一次性加载所有数据来构建树结构。这个文件可能包含了节点ID、父节点ID、节点文本等信息,EXT的`TreeStore`会解析这个JSON数据并填充到TREE中。 最后,...
1. 树形控件的实现:通过 Ext JS 的 TreePanel 和 TreeLoader,从服务器获取 JSON 数据并动态构建树形结构。 2. 文件一 `branchTree.html`:展示了如何配置 Ext JS 的 TreePanel,设置加载器以请求服务器数据,以及...
通过配置 TreeNode 和 TreeLoader,可以实现树形结构的动态更新和异步数据加载。 5. **中文 API**:提供的中文 API 文档是开发者的重要参考资料,它详尽地介绍了 Ext 3.0 中的类、方法、属性和事件。通过查阅 API,...