溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在應用程序中，我們經常需要顯示或處理樹狀結構的對象信息，比如部門信息和地區信息，樹是一種非常典型的數據結構，這些信息都可以用樹來表示。對于傳統的HTML頁面來說，完全依靠手動編碼來實現樹是比較困難的，因為需要寫很多的JS代碼，對基于AJAX異步加載來說尤其如此，不但涉及AJAX數據異步加載，還需要考慮跨瀏覽器支持，處理起來非常麻煩，EXT中提供了現成的樹控件，通過這些控件，可以在B/S應用中快速開發出包含樹形信息結構的應用。
本文就是詳細介紹樹形結構的使用過程和實例。
樹控件由Ext.tree.TreePanel類定義，控件的名稱為TreePanel，TreePanel類繼承自Panel面板，在EXT中使用樹控件非常簡單，我們先來看一下代碼（包含配置信息）。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>簡單的樹形</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
<script type="text/javascript" src="../adapter/ext/ext-base.js"</script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript"><!--
Ext.onReady(function(){
var tree=new Ext.tree.TreePanel({
el:'tree'
});
var root=new Ext.tree.TreeNode({text:'我是根'});
tree.setRootNode(root);
tree.render();
});
</script>
</head>
<body>
<div id="tree"></div>
</body>
</html>
這里的參數tree表示渲染的DOM的id.HTML中應該要要有<div id="tree"></div>相對應，最后這棵樹就出現在這個div的位置上。
在獲得了樹形面板后，就必須要設置根，因為必須有了根才可以生長枝節，最后生成完整的樹，所以根是必須的。具體實現的效果如圖1所示。
圖1 只有根的樹
上面的實例代碼生成一棵沒有根的樹，下面的代碼就為樹添加枝和葉，代碼清單如下：
<script type="text/javascript">
Ext.onReady(function(){
var tree=new Ext.tree.TreePanel({
el:'tree',
autoHeight:true
});
var root=new Ext.tree.TreeNode({text:'區域信息'});
var node1=new Ext.tree.TreeNode({text:'湖南省'});
var node3=new Ext.tree.TreeNode({text:'廣東省'});
var node2=new Ext.tree.TreeNode({text:'廣州市'});
node3.appendChild(node2);
root.appendChild(node1);
root.appendChild(node3);
tree.setRootNode(root);
tree.render();
});
</script>
效果圖如圖2所示：
圖2 完整的樹控件
注意：我們一方面可以通過修改<div id="tree" style="height:300px;"></div>來設置div高度；同時也可以設置treePanel的autoHeight屬性為tree，則可以自動計算高度，否則展開的樹形控件看不到枝葉。
使用上面的錄入方式來獲取數據不僅麻煩，而且還容易出錯，Ext.tree.TreeLoader可以利用從后臺獲取的數據為我們組裝出一棵樹來，我們只需要提供數據，讓treeLoader完成數據轉換和裝配節點的操作。
（1）我們要為TreePanel配置一個TreeLoader，如下面代碼所示：
var tree=new Ext.tree.TreePanel({
el:'tree',
loader:new Ext.tree.TreeLoader({dataUrl:'data.txt'}),
autoHeight:true
});
（2）這里的TreeLoader僅包含一個參數{dataUrl:'data.txt'},這個dataUrl表示在樹完成渲染后從何處讀取數據。data.txt內容如下：
[
{text:'not leaf'},
{text:'is leaf',leaf:true}
]
(3) 現在查看頁面依然只能看到根，沒有讀取數據并顯示到頁面上，因為我們使用的TreeNode不支持Ajax，我們需要將其改成AsyncTreeNode,這樣才可以實現我們想要的異步加載效果，如下面的代碼所示：
var root=new Ext.tree.AsyncTreeNode({text:'區域信息'});
注意:必須將root.expand(true,true)修改成root.expand()避免無限循環展開樹枝。
讀取本地JSON其實是一種是用使用TreeLoader的另類方法。因為有時候樹形的數據并不多，為了獲取少量的數據而是用AJAX訪問后臺實在不劃算。首先為TreePanel設置一個參數為空的TreeLoader，如下面代碼所示：
var tree=new Ext.tree.TreePanel({
el:'tree',
loader:new Ext.tree.TreeLoader(),
autoHeight:true
});
然后，設置一個根節點，并為這個根節點設置children屬性，如下面代碼所示：
var root=new Ext.tree.AsyncTreeNode({
text:'我是根',
children:[
{text:'Leaf No.1',leaf:true},
{text:'Leaf No.1',leaf:true}
]
});
tree.setRootNode(root);
這里需要注意幾點：
(1) 必須設置TreeLoader,否則根節點會一直處于在讀取狀態，無法獲得children中定義的子節點
(2) 根節點必須是AsyncTreeNode,如果是TreeNode,也無法生成子節點
(3) 子節點中的葉子節點必須都加上leaf:true，否則會一直顯示讀取狀態。
樹形彈出的右鍵菜單效果圖如圖3所示：
圖3 右鍵菜單效果
具體實現步驟如下：
(1) 制作自定義菜單，如下面的代碼所示：
var contextmenu=new Ext.menu.Menu({
id:'theContextMenu',
items:[{
text:'點擊',
handler:function(){
alert('我被點中了');
}
}]
});
(2) 綁定contextmenu時間，如下面代碼所示：
tree.on("contextmenu",function(node,e){
e.preventDefault();
node.select();
contextmenu.showAt(e.getXY());
});
實際上，每個樹形節點都有icon和iconCls屬性，他們負責制定節點的圖標，現在我們來修改樹種節點的圖標，無論是通過new手工創建的節點，還是通過JSON讀取到的節點，設置方式都是一樣，如下面代碼所示：
var root1=new Ext.tree.TreeNode({
text:'icon',
icon:'user_female.png'
});
下面的代碼可以讓對話框看起來像是從標題上飛出來的：
tree.on("click",function(node){
Ext.Msg.show({
title:'提示',
msg:"你單擊了"+node,
animEl:node.ui.textNode
});
});
當我們把鼠標停留在某個節點的上方時，便會出現提示信息，為了實現這種效果，我們需要對提供的JSON數據做一些修改，在JSON中添加對應的節點提示信息，我們給每個節點數據都加上qtip:'xxx'參數，這個節點就可以顯示提示信息了。
不過，僅僅為JSON添加這個參數還不能在頁面上顯示提示信息，需要先在JS中對EXT的提示功能進行初始化。
Ext.QuickTips.init();//開啟提示功能
上面這行代碼必須在其他功能加載前完成，建議寫在onReady函數的第一行。具體代碼如下：
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
var tree=new Ext.tree.TreePanel({
el:'tree',
loader:new Ext.tree.TreeLoader(),
autoHeight:true
});
var root=new Ext.tree.AsyncTreeNode({
text:'我是根',
children:[
{text:'Leaf No.1',qtip:'No1',leaf:true},
{text:'Leaf No.1',qtip:'No2',leaf:true}
]
});
var root1=new Ext.tree.TreeNode({
text:'icon',
icon:'user_female.png'
});
tree.setRootNode(root);
//root.expand(true,true);
var contextmenu=new Ext.menu.Menu({
id:'theContextMenu',
items:[{
text:'點擊',
handler:function(){
alert('我被點中了');
}
}]
});
tree.on("contextmenu",function(node,e){
e.preventDefault();
node.select();
contextmenu.showAt(e.getXY());
});
tree.on("click",function(node){
Ext.Msg.show({
title:'提示',
msg:"你單擊了"+node,
animEl:node.ui.textNode
});
});
tree.render();
});
</script>
雖然我們完全可以監聽click事件，但是直接在節點樹形中設置超鏈接的地址也是一個好主意，這是很多人想實現的功能，具體的代碼如下：
var root=new Ext.tree.AsyncTreeNode({
text:'我是根',
children:[
{text:'新浪網',qtip:'新浪網',leaf:true,href:'http://www.sina.com.cn'},
{text:'百度中國',qtip:'搜索引擎',leaf:true,href:'http://www.baidu.cn',hrefTarget:'_blank'}
]
});
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
