學習YUI.Ext 第五天--關于樹TreePanel(Part 1)
效果演示：http://www.ajaxjs.com/yuicn/demos/order_tree.asp
樹組件是YUI.Ext 0.40 新增的組件。雖然YUI已經自帶有TREE VIEW的組件，但JACK還是決定重新開發。具體原因在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
});
// 設置根節點
var root = new Tree.AsyncTreeNode({
text: 'Frank的作品', //根節點文字
draggable:false, //根節點是否可拖放
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{
