[老贴重发]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<level)
        {
            Ext.each(node.childNodes, function(n){    

              if(!n.isLeaf()) //zhangpf 当n.isLeaf()=true时,n为Ext.tree.TreeNode类型,不具有isLoaded()和reload()方法
          {
                if(!n.isLoaded())
                {         

                    n.reload();
                }
              }
           });  

        }
       }  

 代码不难,这里就不多做详解。这里只说一点:关于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<level)
        {
            Ext.each(node.childNodes, function(n){    

                if(!n.isLeaf()) //zhangpf 当n.isLeaf()=true时,n为Ext.tree.TreeNode类型,不具有isLoaded()和reload()方法
                {
                    if(!n.isLoaded())
                    {         

                        n.reload();
                    }
                }
             });  

        }
       }
}  
时间: 2024-10-30 22:10:18

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

基于MVC4+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍使用EasyUI的树控件构建Web界面的相关经验. 在很多界面设计上,我们可能都需要引入树列表控件,这个控件可以用zTree来实现,也

Jquery zTree 树控件异步加载操作_jquery

zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE.FireFox.Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Ajax 异步加载 两种方式 支持多种事件响应及反馈 支持 Tree 的节点移动.编辑.删除 支持任意更换皮肤 / 个性化图标(依靠css) 支持极其灵活的 checkbox 或 radio 选择功能 简单的参数配置实现 灵活多变的功能 异步加载的意思就是: 当点

基于jQuery的树控件实现代码(asp.net+json)_jquery

语言: asp.net (其实都一样 只要服务器返回json就可以了); 先介绍下: 这个是一个美女大姐问我要的 写好了DEMO准备发给他 总不能独享 就贴出来了 第二次在cnblogs写博.. - - 那个代码有冗余 各位大虾可以自行修改... (失恋了 没心情弄); 压缩包: 里面有3个自己写的插件 1.一个是jQuery 请求webservices的便捷插件 2.一个防ext的mask()加载效果 3.树控件... 关于: /* 本代码只限交流学习使用,勿用于商业用途 系统难免存在bug

vs2008-如何实现树控件与SqlServer2005数据库的连接,对数据库的操作可以显示在树控件上!

问题描述 如何实现树控件与SqlServer2005数据库的连接,对数据库的操作可以显示在树控件上! 建立一个对话框应用程序,托人一个树控件,通过对数据库的操作对树形控件的结点进行修改,添加的功能,利用vs2008的vc++实现! 解决方案 树控件就是得到点击的节点等,获取对应的信息,然后构造sql语句,从数据库查询对应的数据,显示到控件 解决方案二: http://download.csdn.net/detail/zhanght520/2001498

WPF自定义控件与样式(9)-树控件TreeView与菜单Menu-ContextMenu

原文:WPF自定义控件与样式(9)-树控件TreeView与菜单Menu-ContextMenu 一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 菜单Menu的自定义样式: 右键菜单ContextMenu的自定义样式: 树控件TreeView的自定义样式,及右键菜单实现. 二.菜单Menu的自定义样式 自定义菜单样式的效果图: Menu和Context

asp .net中Ztree树控件,如何与导航栏联动,点击导航栏上的栏目,对应的树节点也要展开

问题描述 asp .net中Ztree树控件,如何与导航栏联动,点击导航栏上的栏目,对应的树节点也要展开 点击上面的栏目名称,对应的树节点也要展开 解决方案 导航和ztree什么关系..不就是调用getNodeByParam (key, value, parentNode)找到节点,然后expandNode展开节点而已.自己看api详细参数说明 解决方案二: 就是一个展开事件,在ztree官方例子有

ext net-VS中安装ext.net后控件无法正确显示,浏览器中查看正常

问题描述 VS中安装ext.net后控件无法正确显示,浏览器中查看正常 设计界面中EXT控件显示 please configure in source view

ext中file控件的浏览按钮的样式 怎样改变??

问题描述 ext中file控件的浏览按钮的样式 怎样改变?? 问题补充:lizhi92574 写道 解决方案 修改一下代码this.input_file.on("change", function(e) {if (navigator.userAgent.indexOf('Firefox') >= 0) { //Firefox浏览器try {netscape.security.PrivilegeManager.enablePrivilege("UniversalXPCon

easyui tree树控件动态插入的html代码会失去渲染?

问题描述 easyui tree树控件动态插入的html代码会失去渲染? HI, RT, 问题描述:试图通过ajax向后台发送请求,服务端返回已经拼接好的 列表(树形控件的叶子结点和子节点), 前台回调函数拿到返回值后插入到树形控件ul标签里,但是没有样式(即没有被渲染). 脚本如下: $(document).ready(function () { $.post('/test.ashx', { 'action': 'getNodes' }, function (data, textStatus)