|
|
效果演示：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/ （原文）
一、加載一個同步Tree:
復制代碼 代碼如下:
var TreeTest = function(){
var Tree = YAHOO.ext.tree;// 快捷方式
return {
init : function(){
var tree = new Tree.TreePanel('tree_div', {//需要一個tree_div的holder
animate:true, //是否動畫
loader: new Tree.TreeLoader({dataUrl:'get_nodes.ASP'}), //調用一個JSON
enableDD:false,// 是否支持拖放
containerScroll: true
});
// 設置根節(jié)點
var root = new Tree.AsyncTreeNode({
text: 'Frank的作品', //根節(jié)點文字
draggable:false, //根節(jié)點是否可拖放
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調用這個get_nodes.ASP文件，假設服務器返回這樣一個JSON(有關JSON的介紹:http://www.json.org/json-zh.html)：
[{
"text":"yui-ext.js","id":"http://yui-ext.js","leaf":true,"cls":"file"
} ,{
"text":"yui-ext-1118.php","id":"http://yui-ext-1118.php","leaf":true,"cls":"file"
} ,{
"text":"yui-ext-1228.php","id":"http://yui-ext-1228.php","leaf":true,"cls":"file"
} ,{
"text":"build","id":"http://build","cls":"folder"
} ,{
"text":"source","id":"http://source","cls":"folder"
} ,{
"text":"yui-ext-1123.php","id":"http://yui-ext-1123.php","leaf":true,"cls":"file"
} ,{
"text":"yui-ext-1203.php","id":"http://yui-ext-1203.php","leaf":true,"cls":"file"
} ]
Server端JSON的輸出（ASP JScript）
復制代碼 代碼如下:
var goods = new dbOpen();
goods.GetSQL ="select * from goodsbigclass";
with(goods){
GetRS(1);
var str="";
str+="[";
do{
str+='{"text":"'+rs("BigClassName")+'","id":"http://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值
“l(fā)eaf”-->Boolean值，如果“葉子”是真的話，則不能包含子節(jié)點Children nodes
"cls"-->選用的樣式，通常在這里選定圖標
”href“-->指定的url，還有一個”hrefTarget“的屬性
另外，除了以上的屬性，您還可以在JSON加入任何的屬性，作為節(jié)點的屬性，見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ù)解釋這個問題。
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é)點，可以嗎？
A:可以，見：
tree.on('click', function(node){
if(!node.isLeaf()){
node.toggle();
}
});
3.事件處理的幾種情形：
A: a.當加入某個節(jié)點時，為其增加事件
tree.on('append', function(tree, node){
if(node.id == 'foo'){
// 這里加入你的事件（如click）偵聽器（addListener()）
}
});b.針對某個節(jié)點的單擊事件
tree.on('click', function(node){
if(node.id == 'foo'){
// do something
}
});c.針對某個區(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)被構建函數(shù) construction傳遞到TreeNode中，作為node.attributes 出現(xiàn)，所以調用屬性node.attributes 便可獲取。詳見：http://www.yui-ext.com/forum/viewtopic.php?t=2253
tree.on('click', function(node){
if(!node.isLeaf()){
node.toggle();
}
});
JavaScript技術：學習YUI.Ext 第六天--關于樹TreePanel(Part 1)，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
