学习YUI.Ext 第六天--关于树TreePanel(Part 1)


Posted in Javascript onMarch 10, 2007

学习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{  
        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值,如果“叶子”是真的话,则不能包含子节点Children nodes 
"cls"-->选用的样式,通常在这里选定图标
”href“-->指定的url,还有一个”hrefTarget“的属性
另外,除了以上的属性,您还可以在JSON加入任何的属性,作为节点的属性,见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会继续解释这个问题。
FQA常见问题:
1.Tree支持XML数据交换吗?
A:暂不支持,据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.我想用单击代替双击展开子节点,可以吗?
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'){ 
         // do something 
     } 
});c.针对某个区域(集合)的事件 
// 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中的自定义字段(或称作参数 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(); 
    } 
});
Javascript 相关文章推荐
js打印纸函数代码(递归)
Jun 18 Javascript
javascript Array对象基础知识小结
Nov 16 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
jQuery 选择器详解
Jan 19 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
Angular网络请求的封装方法
May 22 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
Vue如何将页面导出成PDF文件
Aug 17 Javascript
学习YUI.Ext第五日--做拖放Darg&Drop
Mar 10 #Javascript
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 #Javascript
学习YUI.Ext 第三天
Mar 10 #Javascript
学习YUI.Ext 第二天
Mar 10 #Javascript
学习YUI.Ext基础第一天
Mar 10 #Javascript
JavaScript触发器详解
Mar 10 #Javascript
又一个图片自动缩小的JS代码
Mar 10 #Javascript
You might like
php 接口类与抽象类的实际作用
2009/11/26 PHP
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
JavaScript 组件之旅(一)分析和设计
2009/10/28 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
python修改注册表终止360进程实例
2014/10/13 Python
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
详解python之简单主机批量管理工具
2017/01/27 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
python中图像通道分离与合并实例
2020/01/17 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
法学个人求职信范文
2014/01/27 职场文书
亚运会口号
2014/06/20 职场文书
优秀创业计划书分享
2019/07/19 职场文书
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js
vue递归实现树形组件
2022/07/15 Vue.js