ext 异步加载树_2

最新推荐文章于 2021-03-04 01:54:30 发布
最新推荐文章于 2021-03-04 01:54:30 发布
阅读量415 收藏
点赞数
分类专栏： 开源工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/athenait/article/details/9227287
版权

附件中 是 整个项目 ,下载即可使用

1.需要建立数据库和表结构 sql 和数据脚本 见上面

2.讲项目放在TOMCat 可以直接运行

 

 

对于前台接收json字符串 的一个思考（2010.05.23）：

 

 

对于上面的例子，我们是使用 menu.jsp 来接收后台的返回的json字符串

menu.jsp  的内容很简单 2行

 

<%@ taglib prefix="s" uri="/struts-tags" %>
<s:property value="menuString" escape="false"/>

 

其中：

 

<s:property>标签的escape属性默认值为true，即不解析html代码，直接将其输出。
如：novel.NTitle的值为

<font color=red>邪门</font>

则<s:property value="#novel.NTitle">就直接输出原值。若想让标签解析html标签输出:

邪门

则将escape设为false

<s:property value="#novel.NTitle" escape="false"/>

 

 

这个例子中我们希望 输出解析后的值，不想看到html标签

 

 <action name="menus" class="cn.com.xinli.tree.action.QueryNodeAction">
            <result name="success">/menu.jsp</result>
  </action>

 

并且使用的是 <package name="struts2" extends="struts-default">

 

 

我们把 后台的json字符串放在了 menuString 字符串中，

 

 

而extends="struts-default" 下面的action 都是页面跳转的意思

<result name="success">/menu.jsp</result>
的意思就是 action执行后 跳转到 menu.jsp

 

而

tree.loader.dataUrl='http://localhost:9090/struts2/menus!loadTree.action?pid='+node.id

是ext 中的方法 他是用来接受json字符串的 ，首先看看 tree.loader.dataUrl 的源码，可见

tree.loader.dataUrl 是一个ajax请求 接受返回结果，而loadTree.action 返回一个json字符串，刚好绑定在

 

menu.jsp 中，因此 tree.loader.dataUrl  得到了json字符串,由于是ajax请求，也不会引起页面跳转

 

 

Js代码
  1. requestData : function(node, callback){   
  2.       if(this.fireEvent("beforeload", this, node, callback) !== false){   
  3.           this.transId = Ext.Ajax.request({   
  4.               method:this.requestMethod,   
  5.               url: this.dataUrl||this.url,   
  6.               success: this.handleResponse,   
  7.               failure: this.handleFailure,   
  8.               scope: this,   
  9.               argument: {callback: callback, node: node},   
  10.               params: this.getParams(node)   
  11.           });   
  12.       }else{   
  13.           // if the load is cancelled, make sure we notify   
  14.           // the node that we are done   
  15.           if(typeof callback == "function"){   
  16.               callback();   
  17.           }  
  requestData : function(node, callback){
        if(this.fireEvent("beforeload", this, node, callback) !== false){
            this.transId = Ext.Ajax.request({
                method:this.requestMethod,
                url: this.dataUrl||this.url,
                success: this.handleResponse,
                failure: this.handleFailure,
                scope: this,
                argument: {callback: callback, node: node},
                params: this.getParams(node)
            });
        }else{
            // if the load is cancelled, make sure we notify
            // the node that we are done
            if(typeof callback == "function"){
                callback();
            }

 

 

 

这种从后台得到 json 字符串，传递到前台一个Jsp页面的做法有点 臃肿，比如我们还需要在 action中 使用json.jar

 

使用下面的方法 将一个对象转化为 json 字符串

 

 JSONArray jsonObject = JSONArray.fromObject(menus);
  menuString = jsonObject.toString();

 

其实 strtus2已经为我们提供了action 返回 json字符串的支持，下面我们改造 以前手工得到json字符，用一个Jsp页面来接受的例子，换成 使用strtus2 json 插件支持

 

步骤：

 

1.首先在以前的项目中加入

 

    jsonplugin-0.32.jar

 

2. 修改 后台构造Json串的方法

 

 

Java代码
  1. package cn.com.xinli.tree.action;   
  2. import java.util.List;   
  3. import javax.servlet.http.HttpServletRequest;   
  4. import org.apache.log4j.Logger;   
  5. import cn.com.xinli.tree.bean.FuctionTreeNode;   
  6. import cn.com.xinli.tree.dao.FuctionTreeDao;   
  7. import cn.com.xinli.tree.dao.impl.FuctionTreeDaoImpl;   
  8. public class QueryNodeAction extends BaseAction   
  9. {   
  10.     private Logger log=Logger.getLogger(QueryNodeAction.class);   
  11.     private String menuString;   
  12.     /*返回给前台树的Json 对象，使用struts2 json插件可以直接将这个对象转换为  
  13.      * json字符串  
  14.      * 需要在struts.xml中进行配置  
  15.      *   
  16.      * */  
  17.     private List<FuctionTreeNode> menusList;   
  18.        
  19.     public List<FuctionTreeNode> getMenusList() {   
  20.         return menusList;   
  21.     }   
  22.   
  23.     public void setMenusList(List<FuctionTreeNode> menusList) {   
  24.         this.menusList = menusList;   
  25.     }   
  26.   
  27.     public String getMenuString() {   
  28.         return menuString;   
  29.     }   
  30.   
  31.     public void setMenuString(String menuString) {   
  32.         this.menuString = menuString;   
  33.     }   
  34.   
  35.      
  36.     /*异步加载树*/  
  37.     public String loadTree()   
  38.     {       
  39.           log.info("开始根据父亲节点查找孩子节点");   
  40.           HttpServletRequest request=getRequest();   
  41.           String nodeId=request.getParameter("pid");   
  42.           log.info("父亲节点的ID是:"+nodeId);   
  43.           FuctionTreeDao treeDao=new  FuctionTreeDaoImpl();   
  44.       try    
  45.       {   
  46.         menusList=treeDao.queryNodeById(nodeId);   
  47.          log.info("孩子结点的数目是："+menusList.size());   
  48.         //以下三行代码可以让返回的JSON数据不包含需要过滤的字段   
  49.          /*  
  50.         JsonConfig config = new JsonConfig();  
  51.         //过滤cls属性  
  52.         config.setExcludes( new String[]{"cls"});  
  53.         JSONArray jsonObject2 = JSONArray.fromObject(menus,config);  
  54.         */  
  55.         //JSONArray jsonObject = JSONArray.fromObject(menus);   
  56.       //    menuString = jsonObject.toString();   
  57.      
  58.        }   
  59.        catch (Exception e)    
  60.        {   
  61.             e.printStackTrace();   
  62.              
  63.        }   
  64.           
  65.      
  66.        return "success";   
  67.     }   
  68.     /*ajax 调用,返回json 字符串*/  
  69.     public String ajax()   
  70.     {   
  71.         //HttpServletResponse resp= getResponse();    
  72.         //resp.setContentType("application/json;charset=UTF-8");   
  73.         HttpServletRequest req= getRequest();    
  74.         try  
  75.         {   
  76.             System.out.println("从前台Ajax请求参数是："+req.getParameter("foo"));   
  77.             menuString="[{success:true,msg:'修改权限成功'}]";   
  78.             //resp.getWriter().write("{success:true,msg:'修改权限成功'}");   
  79.         }    
  80.         catch (Exception e)   
  81.         {   
  82.             // TODO Auto-generated catch block   
  83.             e.printStackTrace();   
  84.         }   
  85.            
  86.         return "aa";   
  87.     }   
  88.      
  89.        
  90.        
  91. }  
package cn.com.xinli.tree.action;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import org.apache.log4j.Logger;
import cn.com.xinli.tree.bean.FuctionTreeNode;
import cn.com.xinli.tree.dao.FuctionTreeDao;
import cn.com.xinli.tree.dao.impl.FuctionTreeDaoImpl;
public class QueryNodeAction extends BaseAction
{
	private Logger log=Logger.getLogger(QueryNodeAction.class);
    private String menuString;
    /*返回给前台树的Json 对象，使用struts2 json插件可以直接将这个对象转换为
     * json字符串
     * 需要在struts.xml中进行配置
     * 
     * */
    private List<FuctionTreeNode> menusList;
    
    public List<FuctionTreeNode> getMenusList() {
		return menusList;
	}

	public void setMenusList(List<FuctionTreeNode> menusList) {
		this.menusList = menusList;
	}

	public String getMenuString() {
        return menuString;
    }

    public void setMenuString(String menuString) {
        this.menuString = menuString;
    }

  
    /*异步加载树*/
    public String loadTree()
    {	 
    	  log.info("开始根据父亲节点查找孩子节点");
	      HttpServletRequest request=getRequest();
	      String nodeId=request.getParameter("pid");
	      log.info("父亲节点的ID是:"+nodeId);
	      FuctionTreeDao treeDao=new  FuctionTreeDaoImpl();
      try 
      {
      	menusList=treeDao.queryNodeById(nodeId);
    	 log.info("孩子结点的数目是："+menusList.size());
   	  	//以下三行代码可以让返回的JSON数据不包含需要过滤的字段
    	 /*
    	JsonConfig config = new JsonConfig();
    	//过滤cls属性
   	  	config.setExcludes( new String[]{"cls"});
   	  	JSONArray jsonObject2 = JSONArray.fromObject(menus,config);
   	  	*/
   	  	//JSONArray jsonObject = JSONArray.fromObject(menus);
   	  //	menuString = jsonObject.toString();
  
       }
       catch (Exception e) 
       {
       		e.printStackTrace();
          
       }
       
  
       return "success";
    }
    /*ajax 调用,返回json 字符串*/
    public String ajax()
    {
    	//HttpServletResponse resp= getResponse(); 
    	//resp.setContentType("application/json;charset=UTF-8");
    	HttpServletRequest req= getRequest(); 
    	try
    	{
    		System.out.println("从前台Ajax请求参数是："+req.getParameter("foo"));
    		menuString="[{success:true,msg:'修改权限成功'}]";
			//resp.getWriter().write("{success:true,msg:'修改权限成功'}");
		} 
    	catch (Exception e)
    	{
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
    	return "aa";
    }
  
	
	
}

 

3 .修改 struts.xml 关键是 修改 packega 的 extends="json-default"

 

Xml代码
  1. <?xml version="1.0" encoding="UTF-8" ?>  
  2. <!DOCTYPE struts PUBLIC   
  3.     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"   
  4.     "http://struts.apache.org/dtds/struts-2.0.dtd">  
  5.   
  6. <struts>  
  7.     <package name="struts2" extends="json-default">  
  8.         <action name="login" class="cn.com.xinli.tree.action.LoginAction">  
  9.             <result name="success">/result.jsp</result>  
  10.             <result name="input">/login2.jsp</result>  
  11.             <result name="error">/login2.jsp</result>  
  12.         </action>                                 
  13.          <action name="menus" class="cn.com.xinli.tree.action.QueryNodeAction">  
  14.             <result name="success" type="json">  
  15.                 <param name="root">menusList</param>  
  16.             </result>  
  17.                
  18.             <result name="aa" type="json">  
  19.                 <param name="root">menuString</param>  
  20.             </result>  
  21.         </action>  
  22.            
  23.          
  24.     </package>  
  25.        
  26. </struts>  
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
	<package name="struts2" extends="json-default">
		<action name="login" class="cn.com.xinli.tree.action.LoginAction">
			<result name="success">/result.jsp</result>
			<result name="input">/login2.jsp</result>
			<result name="error">/login2.jsp</result>
		</action>                              
		 <action name="menus" class="cn.com.xinli.tree.action.QueryNodeAction">
            <result name="success" type="json">
            	<param name="root">menusList</param>
            </result>
            
            <result name="aa" type="json">
            	<param name="root">menuString</param>
            </result>
        </action>
        
      
	</package>
    
</struts>

 

 其中

 

<result name="success" type="json">
             <param name="root">menusList</param>
            </result>

 

代表 这个action的返回结果是 json字符串， 其中json串的 root节点 为 menusList

 

如果你返回的对象 不需要那个属性 可以这么写，则格式化  page 对象为json字符串的时候

 

conditions,limit,start,success,objCondition 几个属性将被忽略

 

<param name="root">page</param>
    <param name="excludeProperties">
     conditions,limit,start,success,objCondition
    </param>

 

 相反的 如果只需要对象的 某个属性转化为Json串 可以这么写

<result type="json">
    <param name="includeProperties">
     success,msg
    </param>
   </result>

 

附件中 extTreeJSON.rar 为修改以后例子 ，其中 依赖的Lib 可以下载 以前的lib

 

往事随風
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android 点滴技巧记录（持续更新）
sumakira的专栏
09-09 821
ExpandableListView里， 如果在关联的adapter的getChildView()里设置了setOnClickListener监听事件，在expandablelistview.setOnChildClick()绑定子菜单点击事件是没有反应的，原因在于两个监听有冲突，去掉adapter里的监听即可。 先创建一个MyApp来extendsApplication, 然后用p
ext 异步加载树完整版
05-27
"ext 异步加载树完整版" 提到的是EXT JS框架中的一个特性，EXT JS是一个广泛使用的JavaScript库，用于构建富客户端Web应用程序。在这个场景下，"异步加载树"是指树形组件（Tree Panel）不一次性加载所有节点，而是...
ext.tree动态加载
冷月宫主的专栏
03-27 1832
<br />前些天把静态的写完，总觉得还是应该弄成动态的加载比较好。所以就又花了天时间弄了下，把动态加载的弄完了。<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html><br /><head><br /><meta http-equiv="Content-Type" cont
用ExtJS 实现动态载入树（Load tree）
lizh0912的专栏
02-24 2029
 用ExtJS  实现动态载入树（Load tree）1、  数据库背景：这里有一个组织机构表，结构如下： Oracle DDL脚本 ：create table  ORGANIZATION(  ORGID       NUMBER(10) not null,  PARENTID    NUMBER(10) not null,  ORGNAME     VARCHAR
Ext实现tree的自动加载，生成枝节点和叶子节点
vpovpo的博客
03-31 246
Ext实现tree的自动加载，生成枝节点和叶子节点。 本人超级初心，刚刚起步做编程，做了一个tree结构到自己的项目中。利用了treepanel等组件完成的，写的不算详细，希望给像我一样的朋友们一点帮助。 代码如下： [code="java"] this.root = new Ext.tree.AsyncTreeNode({//定义了root为异步加载，不然出现的枝节点会无限加载的 ...
Ext tree的动态加载
super3000xp的专栏
11-07 810
当加载生成树的时候，如果数据量过大的时候，加载的速度会很慢！！实现动态加载树时需要注意的几点如下： loader：是我们加载树数据的url， root:new Ext.tree.AsyncTreeNode({})是异步加载必须自带的部分 listeners: {      beforeload:function(node){} }是我们自定义加载，动态修改的传值（把父节点传递到后台）的部
ext 异步加载树_1
往事随風
07-02 600
实现原理：树的每一个节点都有自己的ID，和它的父亲节点的ID，还有自己的文本内容，以及点击后在哪个frame中打开哪个连接，是否是叶子节点等内容，树的第一级节点的父亲节点的ID我们将它置为0，以后每次点解一个非叶子节点的时候，我们都去异步加载他的所有孩子结点，将信息组装成JSON字符串，返回给前台，前台的EXT Tree使用JSON数据构造树   主要步骤：    第一步：构造 树的 表结构  
ext动态树 java_基于Ext异步加载tree的实例 - Seraph115 - JavaEye技术网站
weixin_39967670的博客
03-04 104
使用JS生成树形结构的菜单是基于J2EE的B/S系统常用的UI方式。但长期以来的问题是同步(即一次加载整棵树)加载一棵完整的树给前台及后台同时带来压力，由于加载数据及渲染时间过长使用户体验度很低。Ajax的异步数据传输方式是解决此问题的较好方式，即每次只加载一层节点，当需要时才加载下级节点，这样页面无需一次加载解决了此问题。Ext的TreePanel组件提供了此功能即异步树(asynchronis...
Ext异步加载树(TREE)
u010481881的博客
10-10 163
jsp页面: var tree; var ne; var rightshowMenu; Ext.onReady(function(){ Ext.BLANK_IMAGE_URL="ext/resources/images/aero/s.gif"; var loader = new Ext.tree.TreeLoader({ ...
ext异步加载树
scott.cgi
12-07 1497
/** * @author Scott.wanglei * 组织结构树 页面需要id为orgTree-div的DIV * 需要orgTree.render();才能呈现在页面(DOM就绪后) */var OrgTree = function(){    var orgTree = new Ext.tree.TreePanel({        el: orgTree-div,        u
Ext treeLoader 同步、异步加载树 问题
Seas_小庙的专栏
10-25 7278
1.tree的异步加载： 前台代码： Ext.onReady(function(){ Ext.BLANK_IMAGE_URL="/commons/extjs2.1/extjs/resources/images/default/s.gif"; var root= new Ext.tree.AsyncTreeNode( { id:'1', text: '我是树根' } ); var loa
EXT2_combobox_form.rar_combobox ext_ext
09-20
EXT2_combobox_form.rar_combobox ext_ext 这个标题暗示我们关注的是一个与EXT2相关的项目，其中包含了关于form表单和combobox的示例。EXT是一个流行的JavaScript库，主要用于构建富客户端应用，特别是Web应用的用户...
Extjs4树结构异步加载
06-21
2. **Proxy**: 树结构的异步加载通常使用`AjaxProxy`或`JsonPProxy`，根据服务器端支持的协议选择。配置包括URL、方法（GET或POST）、以及读取（`read`）操作的相关参数。 3. **NodeInterface**: 每个树节点都需要...
支持异步加载的纯手写的js树
03-27
本人手写的一款js树形控件，附带图片，代码简洁，注释齐全，可读性高，易于维护，方便移植，结构清晰，思路明了，界面美观，同时支持异步加载，对浏览器的兼容行强，你还可以根据自己的需要扩展功能，可大量应用于...
iText 生成pdf分页
往事随風
07-02 7792
iText生成pdf文件时，会遇到分页（page X of Y）的需求。iText分页主要有2个方法：1. 创建一个document（不含page X of Y信息）放内存中，新建一个PdfReader对象，通过PdfReader对象得到PdfStamper，使用PdfStamper把分页号写入每一页 的页眉或页脚。当需要生成pdf的页面较多时，计算页号就有可能发生不准确。2. 在Page
FCKeditor使用详解
往事随風
07-02 963
1.FCKeditor的官方网站是：http://www.fckeditor.net/download 目前最新的FCKeditor 2.4.2版本。请在此页下载：http://sourceforge.net/project/showfiles.php?group_id=75348如图所示：要下载FCKeditor2.4.2.zip和   FCKeditor.NET版的2个zip包。说明：FCKe
swftools将PDF转成swf 2
往事随風
07-02 932
由于工程需要把用户上传的PDF转换为SWF，服务器要求也是linux，所以就想到 swftools,官方网站：http://www.swftools.org/可以把很多文件转换为swf，他默认只支持 英文，中文转换出来是乱码，所以我们要下载中文字库。中途遇到不少问题，都慢慢解决了，参数也明白了，大家看我的记载吧。 环境： Server : ubuntu-server 8.0.4 software
JPA由实体生成表
往事随風
07-02 672
persistence.xml   实体名不能有下划线、主键不能有约束（待更进一步的考证）   测试： EntityManagerFactory factory = Persistence.createEntityManagerFactory("xxx");//persistence-unit name="xxx"  EntityManager em = factory.createEnti
DWR日志
往事随風
07-02 531
如果DWR会打印多余的日志 可把log4j.properties 中加入： log4j.rootLogger=DEBUG, stdout log4j.appender.stdout=org.apache.log4j.ConsoleAppender log4j.logger.java.sql.PreparedStatement=ERRORlog4j.logger.uk.ltd.getahead.dw
Ext.tree.TreeLoader传参数以及异步加载
最新发布
06-08
好的，我来回答你的问题。 要在Ext.tree.TreeLoader中传参数，可以通过两种方式来实现： ...需要注意的是，在异步加载时，需要在服务端返回的数据中包含节点的子节点数据，这样才能正确地构建树形结构。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值