学习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获取服务器时间的两个简单方法
Jan 08 Javascript
Fixie.js 自动填充内容的插件
Jun 28 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
基于form-data请求格式详解
Oct 29 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 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
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
js有序数组的连接问题
2013/10/01 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
js实现聊天对话框
2020/02/08 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python 初始化多维数组代码
2008/09/06 Python
python写入中英文字符串到文件的方法
2015/05/06 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
Python3如何判断三角形的类型
2020/04/12 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
模具设计与制造专业应届生求职信
2013/10/18 职场文书
法律顾问服务方案
2014/05/15 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
校友回访母校寄语
2015/02/26 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
MySQL中日期型单行函数代码详解
2021/06/21 MySQL