483
[老貼重發]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 = 'https://127.0.0.1:9900/gmitp/platform/system/listAllArea.action?parentNodeId=-1';
} else {
tree.tree.loader.dataUrl = 'https://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();
}
}
});
}
}
} 最後更新：2017-11-09 16:33:37