[老贴重发]EXT:指定树控件TreePanel 展开到第几层

简介:

12年写的文章了,可能由于某博客某年帐号泄露,被人删除了很多文章。

还有底搞的,我就重发一下。


对于Ext.tree.TreePanel,相信使用过EXT的人一般都用到过。所以本文中不会包含EXT或TreePanel 基础知识的介绍了

    比如做一个行政区划的树。如下图所示:


但在有的时候,这颗树的数据量会很大,层级也会很深,默认全部展开的话,会很慢,而且显示一大堆东西出来,显示不符合用户的需求。可又不是默认全部折叠,这样用户又第一眼看不见想关心的东西的内容。

   所以笔者在这里提出了一个解决方案:展开到指定层级

   如上图所示,在笔者刚刚完成的一个项目中,用户只需要关心乡镇的信息,偶尔会查看一下乡镇下面的村组信息。所以在这次应用中,需要默认把树展开到乡镇一级。

   要达到以上目的呢,目前有两种手段:

     1)通过异步得到的节点数据信息中,将需要展开的节点加属性定义:expanded:true

          如一个json格式的节点: {id:"XXXX",text:"YYYY",expanded:true}

          这种方式需要编写异步取数据代码时,根据你要展开到的层级,计算哪些节点需要做设置:expanded:true

     2)利用Treepanel的load事件,定义其响应函数,在响应函数中添加控制逻辑。

 

    因为第一种方式,太过繁琐,不适合封装成项目级的控件,所以本文将重点介绍第二种方式。

   先来晒晒load事件的响应函数中的部分代码:[load事件:在节点加载后触发。Fires when a node is loaded]

   在下面的代码中,除了实现了可以展开到指定层数,还可以只展开第一个节点及该节点之下的各层子节点


var level=2;//通过这里指定展开到第几层  
         
       if(level==0)//此时规定:只展开第一个节点及其所有子节点  
{    
       Ext.each(node.childNodes, function(n){     
        if(n.isFirst())  
        {  
        if(!n.isLeaf())          
        {  
               if(!n.isLoaded())  
               {          
                                                     
              n.reload();  
           }  
        }  
                      
         }  
                
     });  
                
}  
       if(level>0)//此时规定:根据设置的层数,展开到第level层  
       {  
        var path=node.getPath();  
        var index=path.indexOf('/');  
        var loadedlevel=0;  
        while(index>=0)   
        {  
            loadedlevel++;  
            index=path.indexOf('/',index+1);          
        }  
        if(loadedlevel


代码不难,这里就不多做详解。这里只说一点:关于isLoaded()和reload()方法,它们不是TreeNode的方法,而是属于AsyncTreeNode的方法。所以在用它们时,要格外小心。

    OK,再晒下完整点的代码,它是我封装的struts的页面控件,最终生成的部分js。我又拿来修改些,去掉了些,所以不保证一定能运行起来。

 


  这里补充一句:这里的展开到指定层的逻辑,同样适用于Ext改写的ComboboxTree


 Ext.onReady(function(){  
   var tree = new Ext.ux.ComboBoxTree({  
        id:'XXXX',  
        renderTo : 'XXX_div',  
        hiddenName:"XXX_name",  
        name: 'folderMoveTo',  
        displayField: 'text',  
                valueField: 'id',  
        width : 200,  
        typeAhead: true,   
            triggerAction: 'all',  
            autoScroll : false,    
            selectOnFocus: true,  
                       forceSelection: true,  
        tree : {  
            xtype:'treepanel',  
            listeners:{beforeload:loadTree,load:afterload},               
             rootVisible: true,  
             autoScroll : false,     
                autoHeight : true,    
             root : new Ext.tree.AsyncTreeNode({id:'-1',text:'-请选择-'})  
        },  
                      
        selectNodeModel:'all'  
    });  
      
    tree.setValue({id:'',text:'-请选择-'});  
});  
      
      
function loadTree(node){  
    if (node.id == "-1") {         
            tree.tree.loader.dataUrl =  'http://127.0.0.1:9900/gmitp/platform/system/listAllArea.action?parentNodeId=-1';  
    } else  {         
        tree.tree.loader.dataUrl = 'http://127.0.0.1:9900/gmitp/platform/system/listAllArea.action?parentNodeId='+node.id;  
    }  
  
}     
  
  
function afterload(node){  
  
    //实现设置展开层数.  
       var level=3;  
         
       if(level==0)//此时规定:只展开第一个节点及其所有子节点  
        {    
            Ext.each(node.childNodes, function(n){    
                if(n.isFirst())  
                {  
                    if(!n.isLeaf())          
                    {  
                        if(!n.isLoaded())  
                        {         
                                                     
                            n.reload();  
                        }  
                    }  
                    return;  
                }  
                
             });  
                
     }  
       if(level>0)//此时规定:根据设置的层数,展开到第level层  
       {  
        var path=node.getPath();  
        var index=path.indexOf('/');  
        var loadedlevel=0;  
        while(index>=0)   
        {  
            loadedlevel++;  
            index=path.indexOf('/',index+1);          
        }  
        if(loadedlevel



相关文章
【el-tree】树形结构拖拽,拖动修改分组
【el-tree】树形结构拖拽,拖动修改分组
624 1
|
3月前
element中tree组件的选中获取和返显
本文介绍了如何在Element UI的tree组件中获取选中的节点值以及如何进行节点的默认选中(返显)。主要通过使用`getCheckedKeys()`和`getHalfCheckedKeys()`方法来获取完全和半选中的节点,然后使用`setCheckedKeys()`方法来设置默认选中的节点。
226 2
element中tree组件的选中获取和返显
|
5月前
|
存储
el-tree 动态指定默认选中节点
el-tree 动态指定默认选中节点
404 6
|
5月前
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
879 0
|
7月前
element plus 可选择树形组件(el-tree) 怎样一键展开/收起?实现方法详解
element plus 可选择树形组件(el-tree) 怎样一键展开/收起?实现方法详解
843 2
element plus 可选择树形组件(el-tree) 怎样一键展开/收起?实现方法详解
|
前端开发 JavaScript
饿了么UI中el-tree中的树节点选中高亮的两种常用方式(highlight-current属性)
饿了么UI中el-tree中的树节点选中高亮的两种常用方式(highlight-current属性)
482 0
|
7月前
el-tree饿了么elementUI tree树结构插件设置全部展开折叠
el-tree饿了么elementUI tree树结构插件设置全部展开折叠
|
JSON JavaScript 前端开发
vue+Element实现Tree树形(是否默认展开所有节点属性: default-expand-all)
vue+Element实现Tree树形(是否默认展开所有节点属性: default-expand-all)
133 0
27zTree - 拖拽节点基本控制
27zTree - 拖拽节点基本控制
39 0
|
前端开发
【el-tree】树形组件图标的自定义
【el-tree】树形组件图标的自定义
1682 0