首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

EXT:指定树控件TreePanel 铺展到第几层

2012-08-24 
EXT:指定树控件TreePanel 展开到第几层对于Ext.tree.TreePanel,相信使用过EXT的人一般都用到过。所以本文中

EXT:指定树控件TreePanel 展开到第几层
    对于Ext.tree.TreePanel,相信使用过EXT的人一般都用到过。所以本文中不会包含EXT或TreePanel 基础知识的介绍了

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

   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();          }          }         });                  }        }}


    

热点排行