学习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":"//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）
代码如下:
var goods = new dbOpen();
goods.GetSQL ="select * from goodsbigclass";
with(goods){
GetRS(1);
var str="";
str+="[";
do{
