zoukankan      html  css  js  c++  java
  • Extjs 4 Tree 异步分级别加载子节点

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

    前台代码

    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',  
            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
    				 }
    			 }
    		  }
    
  • 相关阅读:
    模块系统
    控制结构
    基本语法
    Go-技篇第一 技巧杂烩
    微服务的4个设计原则和19个解决方案
    kcp-go源码解析
    windows.go
    服务端跨域处理 Cors
    Snowflake 全局唯一Id 生成
    面试?或许你应该这样
  • 原文地址:https://www.cnblogs.com/marky/p/3081907.html
Copyright © 2011-2022 走看看