一、加載一個(gè)同步Tree:

var TreeTest = function(){

var Tree = YAHOO.ext.tree;// 快捷方式



return {

init : function(){

var tree = new Tree.TreePanel('tree_div', {//需要一個(gè)tree_div的holder

animate:true, //是否動畫

loader: new Tree.TreeLoader({dataUrl:'get_nodes.asp'}), //調(diào)用一個(gè)JSON

enableDD:false,// 是否支持拖放

containerScroll: true

});



// 設(shè)置根節(jié)點(diǎn)

var root = new Tree.AsyncTreeNode({

text: 'Frank的作品',  //根節(jié)點(diǎn)文字

draggable:false, //根節(jié)點(diǎn)是否可拖放

id:'source'

});

tree.setRootNode(root);
// 渲染 tree

tree.render(false,false);

// false for not recursive (the default), false to disable animation

root.expand(false,false);

}

};

}();

YAHOO.ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);

通過XHR調(diào)用這個(gè)get_nodes.asp文件，假設(shè)服務(wù)器返回這樣一個(gè)JSON(有關(guān)JSON的介紹:http://www.json.org/json-zh.html)：

[{
"text":"yui-ext.js","id":"\/yui-ext.js","leaf":true,"cls":"file"
} ,{
"text":"yui-ext-1118.php","id":"\/yui-ext-1118.php","leaf":true,"cls":"file"
} ,{
"text":"yui-ext-1228.php","id":"\/yui-ext-1228.php","leaf":true,"cls":"file"
} ,{
"text":"build","id":"\/build","cls":"folder"
} ,{
"text":"source","id":"\/source","cls":"folder"
} ,{
"text":"yui-ext-1123.php","id":"\/yui-ext-1123.php","leaf":true,"cls":"file"
} ,{
"text":"yui-ext-1203.php","id":"\/yui-ext-1203.php","leaf":true,"cls":"file"
} ]

var goods = new dbOpen();
goods.GetSQL ="select * from goodsbigclass";
with(goods){
GetRS(1);
var str="";
str+="[";
do{
str+='{"text":"'+rs("BigClassName")+'","id":"\/yui-ext.js","leaf":true,"cls":"file","href":"?b_id='+rs("BigClassID")+'"},';
rs.MoveNext();
}while(!rs.EOF);
str+="]";
Response.Write(str);
Close();
}
goods= null;

解釋：
“text”-->顯示的文本
"id"-->id值
“leaf”-->Boolean值，如果“葉子”是真的話，則不能包含子節(jié)點(diǎn)Children nodes
"cls"-->選用的樣式，通常在這里選定圖標(biāo)
”href“-->指定的url，還有一個(gè)”hrefTarget“的屬性
另外，除了以上的屬性，您還可以在JSON加入任何的屬性，作為節(jié)點(diǎn)的屬性，見Jack原話：
The href attribute is called "href", there's also an "hrefTarget" attribute. For capturing node clicks, you can listen on individual nodes or you can listen for "click" on the tree which will pass you the node that was clicked. FYI, you can put any attributes you want in the json config for the node and it will be available as node.attributes. FAQ.4會繼續(xù)解釋這個(gè)問題。
FQA常見問題：

1.Tree支持XML數(shù)據(jù)交換嗎？
A:暫不支持，據(jù)FOURM上的話，以后會提供支持，見：
can I use xml instead of json for sending nodes hirerachy ？
Correct me if I'm wrong but I think the answer is no here. But that doesn't mean it won't be supported later on.

2.我想用單擊代替雙擊展開子節(jié)點(diǎn)，可以嗎？
A:可以，見：

tree.on('click', function(node){
if(!node.isLeaf()){
node.toggle();
}
});

3.事件處理的幾種情形：
A: a.當(dāng)加入某個(gè)節(jié)點(diǎn)時(shí)，為其增加事件

tree.on('append', function(tree, node){
if(node.id == 'foo'){
// 這里加入你的事件（如click）偵聽器（addListener()）
}
});

b.針對某個(gè)節(jié)點(diǎn)的單擊事件

tree.on('click', function(node){
if(node.id == 'foo'){
// do something
}
});

c.針對某個(gè)區(qū)域（集合）的事件

// fires any time the selection in the tree changes
tree.getSelectionModel().on('selectionchange', function(sm, node){
if(node && node.id == 'foo'){
// do something
}
});

4.如何獲取JSON中的自定義字段（或稱作參數(shù) parameters）
A:JSON對象已經(jīng)被構(gòu)建函數(shù) construction傳遞到TreeNode中，作為node.attributes 出現(xiàn)，所以調(diào)用屬性node.attributes 便可獲取。詳見：http://www.yui-ext.com/forum/viewtopic.php?t=2253

tree.on('click', function(node){
if(!node.isLeaf()){
node.toggle();
}
});

 本文轉(zhuǎn)自:http://www.ajaxjs.com/yuicn/article.asp?id=20070206