學(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:

通過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）  
            

解釋：
“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è)問題。
FQA常見問題：
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.針對某個(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(); 
    } 
});

最新評論