[老貼重發]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();
                    }
                }
             });

        }
       }
}