Extjs 4 Tree 异步分级别加载子节点

最新推荐文章于 2020-08-31 17:43:12 发布

weixin_30319153

最新推荐文章于 2020-08-31 17:43:12 发布

阅读量126

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/marky/archive/2013/05/16/3081907.html

本文介绍如何使用ExtJS框架创建一个类似资源管理器的树形菜单，展示文件夹及子文件夹结构。通过前后端代码配合，实现动态加载树形结构，并在节点展开时动态更改请求URL。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目的:将一个文件夹下的所有文件和子文件以树的形式显示在网页中，类似于资源管理器

前台代码

var store2 = Ext.create('Ext.data.TreeStore', {  
        proxy: { 
            type: 'ajax',  
            url: '../TreeTest.ashx'  
        },  
        fields:['id','text']//跟旧版本extjs一样，节点的id和显示文本  
    });  
      
    var AsyncTree2 = Ext.create("Ext.tree.Panel",{  
        title: 'Simple Tree2',  
        width:300,  
        height:300,  
        collapsible: true,  
        singleExpand: true,  
		useArrows: true,
        root: {  
            id:1,  
            text: "hehe",  
            expanded: true  
          
        },  
        store:store2,  
	    renderTo: 'tree-div',
		listeners:{
		     'beforeitemexpand':function(node,optd)
			 {
			    if(node.data.text=='总公司')
				{

                             		               }
				 else
				 {
				  // node.leaf=true
				 }
			 }
		  }
		  
		  });

});

后台代码

 public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
       // context.Request.Params["bumen"]; ;
        string id = context.Request.Params["node"];
        string result = "";
        if (id == "1")
        {
            result = "[{'text':'总公司','id':100}]";
        }
        else if (id == "100")
        {
            result = "[{'text':'分公司一','id':110,leaf:true},{'text':'分公司二','id':120}]";
        }
        else if (id == "120")
        {
            result = "[{'text':'部分一','id':1200,leaf:true},{'text':'部门二','id':1300,leaf:true}]";
        }
        context.Response.Write(result);
    }

扩展，每个节点展开时，如何改变每次服务请求的URL 地址，extraParams 参数值，在beforeitemexpand事件中，调用store.setProxy()方法

listeners:{
		     'beforeitemexpand':function(node,optd)
			 {
			    if(node.data.text=='总公司')
				{
			          var tt=node.data.text;
				  var  mystore=AsyncTree2.getStore()
				//   mystore.proxy.url='../TreeTest.ashx?aa==vv' 
				//  mystore.load();
				   mystore.setProxy({
                                       type:'ajax',

                                       url:'../TreeTest11.ashx' ,
                                       extraParams:{time:tt}

                                      })

				 }
				 else
				 {
				  // node.leaf=true
				 }
			 }
		  }

转载于:https://www.cnblogs.com/marky/archive/2013/05/16/3081907.html