`
u177734357
  • 浏览: 16192 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

ext2.2以上扩展TreeLoader 支持Struts2通过jsonplugin返回json对象

javaext树扩展TreeLoaderjsonplugin支持json对象 
阅读更多 
<%@ 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>&nbsp;&nbsp;</c:if><a href="#" onclick="logout()" >注销</a></td></tr><tr><td> &nbsp;</td><td>&nbsp; </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":"权限用户管理"}]

 

分享到：
| md5加密工具类
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ext2.2+struts2使用json传输数据生成的树

    本篇将详细讲解如何使用`Ext2.2`和`Struts2`集成，通过`JSON`传输数据生成树形结构。 首先，`Ext2.2`的树形组件（TreePanel）是一种强大的可视化工具，能够展示层级关系的数据。它支持动态加载、拖放操作以及多种...

    Ext.tree.TreeLoader附带封装的json类

    在本文中，我们将深入探讨`Ext.tree.TreeLoader`与JSON数据在Ext JS框架中的应用。`Ext.tree.TreeLoader`是Ext JS库中的一个组件，它负责加载和解析树形结构的数据，而JSON（JavaScript Object Notation）则是一种轻...

    Extjs Tree + JSON + Struts2 例子

    通过这种方式，我们解决了 Struts2 JSON 插件返回数据格式与 ExtJS Tree 期待格式不匹配的问题。现在，树形菜单应该能够正确地动态加载并显示从服务器获取的数据。这个例子展示了如何在实际开发中灵活应对数据格式...

    Ext下使用的跨域treeloader

    Extjs 原始的treeloader无法通过跨域读取jsonp数据，非常恼人，查了网上一些资料后自己写了一个。能够实现跨域的jsonp读取加载节点。没有太多时间调试，可能不完美。

    ExtJS_Tree利用_JSON_在Struts_2实现Ajax动态加载树结点

    通过以上步骤，我们就能实现一个基于ExtJS Tree、JSON和Struts 2的Ajax动态加载树结构。这种技术允许我们仅加载当前需要的节点，提高应用的性能，并且可以轻松地与服务器端数据进行交互。同时，由于采用了JSON格式，...

    Ext tree json 动态加载完美实例

    在Ext Tree Panel中，我们可以通过设置`loader`属性来启用延迟加载，指定一个`TreeLoader`对象，该对象负责从服务器获取更多数据。 **3. JSON数据交互** JSON是树Panel与服务器进行数据交互的常用格式。在本例中，...

    ext2的树组件的使用

    本文主要介绍EXT2树组件的使用，包括从底层的JSON数据生成到表现层的渲染。 首先，EXT2的树组件（TreePanel）是通过JavaScript实现的，它依赖于EXT库提供的类和方法。在示例代码中，我们创建了一个新的TreePanel...

    JSON　——数据库结果集转换

    2. **手动构建JSON**：对于简单的查询结果，可以手动构建JSON字符串，但这通常效率较低且容易出错，特别是在处理复杂数据结构时。 3. **利用现有的库**：例如，使用Google的Gson库或Jackson库，它们提供了强大的...

    Ext 开发指南 学习资料

    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树封装

    在ExtJS中，一个JSON树是由多个JSON对象组成的，每个对象代表树的一个节点。这些对象通常包含ID、文本、子节点等属性，用以构建可交互的树形视图。例如： ```json { "id": "1", "text": "父节点", "children": ...

    ext2.0+dwr 实现的动态树

    例如，`rootVisible`属性决定是否显示根节点，`animate`属性控制节点展开和折叠时的动画效果，而`loader`属性则是关键，它用于指定树的加载行为，通常是一个`TreeLoader`对象。 ```javascript var tree = new Ext....

    ext tree 分页

    2. **使用TreeLoader**: TreeLoader是用来加载和解析树节点的数据对象。它支持分页加载，可以通过设置`loadPage`方法来指定加载哪一页的数据。例如： ```javascript var treeLoader = new Ext.tree.TreeLoader({ ...

    Ext.ux.tree.treegrid异步加载

    ### Ext.ux.tree.TreeGrid 异步加载知识点详解 #### 一、Ext.ux.tree.TreeGrid简介 在ExtJS框架中，`Ext.ux.tree.TreeGrid`组件是一种结合了树形结构与表格显示特性的控件，适用于展示具有层级关系的数据。通过...

    extJs 2异步树 源程序.

    2. **配置TreeLoader**：创建一个`TreeLoader`实例，设置其`dataUrl`属性为服务器端返回JSON数据的URL，可以自定义`baseAttrs`属性来设置默认的节点属性。 3. **添加根节点**：在TreeLoader中定义根节点，可以是一...

    Ext Tree示例

    Ext Tree 支持多种数据源，包括 JSON、XML 和 JavaScript 对象。 `tree2.html`、`tres.html`、`s1.html`、`tree.html` 这些 HTML 文件可能包含了不同的示例代码，用于展示 Ext Tree 的不同用法和配置。例如，它们...

    Ext中Ajax的应用

    然后在 `login` 函数中，通过 `Ext.Ajax.request` 方法将该 XML 文档对象发送到服务器。服务器端接收到 XML 数据后，可以根据其中的内容进行相应的逻辑处理。 #### 二、Ext 整合 DWR **2.1 在 Grid 中使用 DWR ...

    Ext.Tree.Panel

    `Ext.Tree.Panel`是EXT JS库中的一个重要组件，用于展示层次结构的数据，通常用作树形菜单或文件系统目录的视图。这个组件是EXT JS框架中用于创建交互式、可扩展的树结构的工具。以下是对`Ext.Tree.Panel`相关知识的...

    JSP EXT 遍历 TREE

    EXT的TREE组件通常与JSON数据源配合使用，通过异步加载或者一次性加载所有数据来构建树结构。这个文件可能包含了节点ID、父节点ID、节点文本等信息，EXT的`TreeStore`会解析这个JSON数据并填充到TREE中。 最后，...

    多叉树结合JavaScript树形控件实现无限级树形结构（一种构建多级有序树形结构JSON（或XML）数据源的方法）

    1. 树形控件的实现：通过 Ext JS 的 TreePanel 和 TreeLoader，从服务器获取 JSON 数据并动态构建树形结构。 2. 文件一 `branchTree.html`：展示了如何配置 Ext JS 的 TreePanel，设置加载器以请求服务器数据，以及...

    Ext 3.0源码+典型实例

    通过配置 TreeNode 和 TreeLoader，可以实现树形结构的动态更新和异步数据加载。 5. **中文 API**：提供的中文 API 文档是开发者的重要参考资料，它详尽地介绍了 Ext 3.0 中的类、方法、属性和事件。通过查阅 API，...

Magicbox
Global site tag (gtag.js) - Google Analytics