學(xué)習(xí)YUI.Ext 第六天--關(guān)于樹TreePanel(Part 1)

更新時(shí)間：2007年03月10日 00:00:00 投稿：mdxy-dxy

這篇文章主要介紹了學(xué)習(xí)YUI.Ext 第六天--關(guān)于樹TreePanel(Part 1)

學(xué)習(xí)YUI.Ext 第五天--關(guān)于樹TreePanel(Part 1)
效果演示：http://www.ajaxjs.com/yuicn/demos/order_tree.asp
樹組件是YUI.Ext 0.40 新增的組件。雖然YUI已經(jīng)自帶有TREE VIEW的組件，但JACK還是決定重新開發(fā)。具體原因在http://www.ajaxjs.com/yuicn/article.asp?id=20070245（翻譯文章）或http://www.jackslocum.com/blog/2006/12/29/preview-drag-and-drop-enhancements-and-the-new-treepanel/ （原文）
一、加載一個(gè)同步Tree:

復(fù)制代碼代碼如下:

var TreeTest = function(){ 
var Tree = YAHOO.ext.tree;// 快捷方式 
return { 
    init : function(){ 
    var tree = new Tree.TreePanel(’tree_div’, {//需要一個(gè)tree_div的holder 
    animate:true, //是否動(dòng)畫 
    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);

通過(guò)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"
} ]
Server端JSON的輸出（ASP JScript）

復(fù)制代碼代碼如下:

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會(huì)繼續(xù)解釋這個(gè)問(wèn)題。
FQA常見問(wèn)題：
1.Tree支持XML數(shù)據(jù)交換嗎？
A:暫不支持，據(jù)FOURM上的話，以后會(huì)提供支持，見：
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.針對(duì)某個(gè)節(jié)點(diǎn)的單擊事件
tree.on(’click’, function(node){
     if(node.id == ’foo’){
         // do something
     }
});c.針對(duì)某個(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對(duì)象已經(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();
    }
});