学习YUI.Ext第五天--关于树TreePanel(Part1)
效果演示：http://www.ajaxjs.com/yuicn/demos/order_tree.asp
树组件是YUI.Ext0.40新增的组件。虽然YUI已经自带有TREEVIEW的组件，但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:
复制代码 代码如下:
varTreeTest=function(){
varTree=YAHOO.ext.tree;//快捷方式
return{
init:function(){
vartree=newTree.TreePanel('tree_div',{//需要一个tree_div的holder
animate:true,//是否动画
loader:newTree.TreeLoader({dataUrl:'get_nodes.asp'}),//调用一个JSON
enableDD:false,//是否支持拖放
containerScroll:true
});
//设置根节点
varroot=newTree.AsyncTreeNode({
text:'Frank的作品',//根节点文字
draggable:false,//根节点是否可拖放
id:'source'
});
tree.setRootNode(root);
//渲染tree
tree.render(false,false);
//falsefornotrecursive(thedefault),falsetodisableanimation
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的输出（ASPJScript）
复制代码 代码如下:
vargoods=newdbOpen();
goods.GetSQL="select*fromgoodsbigclass";
with(goods){
GetRS(1);
varstr="";
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值，如果“叶子”是真的话，则不能包含子节点Childrennodes
"cls"-->选用的样式，通常在这里选定图标
”href“-->指定的url，还有一个”hrefTarget“的属性
另外，除了以上的属性，您还可以在JSON加入任何的属性，作为节点的属性，见Jack原话：
Thehrefattributeiscalled"href",there'salsoan"hrefTarget"attribute.Forcapturingnodeclicks,youcanlistenonindividualnodesoryoucanlistenfor"click"onthetreewhichwillpassyouthenodethatwasclicked.FYI,youcanputanyattributesyouwantinthejsonconfigforthenodeanditwillbeavailableasnode.attributes.FAQ.4会继续解释这个问题。
FQA常见问题：
1.Tree支持XML数据交换吗？
A:暂不支持，据FOURM上的话，以后会提供支持，见：
canIusexmlinsteadofjsonforsendingnodeshirerachy？
CorrectmeifI'mwrongbutIthinktheanswerisnohere.Butthatdoesn'tmeanitwon'tbesupportedlateron.
2.我想用单击代替双击展开子节点，可以吗？
A:可以，见：
tree.on('click',function(node){
if(!node.isLeaf()){
node.toggle();
}
});
3.事件处理的几种情形：
A:a.当加入某个节点时，为其增加事件
tree.on('append',function(tree,node){
if(node.id=='foo'){
//这里加入你的事件（如click）侦听器（addListener()）
}
});b.针对某个节点的单击事件
tree.on('click',function(node){
if(node.id=='foo'){
//dosomething
}
});c.针对某个区域（集合）的事件
//firesanytimetheselectioninthetreechanges
tree.getSelectionModel().on('selectionchange',function(sm,node){
if(node&&node.id=='foo'){
//dosomething
}
});
4.如何获取JSON中的自定义字段（或称作参数parameters）
A:JSON对象已经被构建函数construction传递到TreeNode中，作为node.attributes出现，所以调用属性node.attributes便可获取。详见：http://www.yui-ext.com/forum/viewtopic.php?t=2253
tree.on('click',function(node){
if(!node.isLeaf()){
node.toggle();
}
});
【学习YUI.Ext 第六天--关于树TreePanel(Part 1)】相关文章：
★ JavaScript中String.match()方法的使用详解
★ 理解javascript定时器中的setTimeout与setInterval
★ EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)