学习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 相关文章推荐
javaScript面向对象继承方法经典实现
Aug 20 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 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将字符串转换成16进制的方法
2015/03/17 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
js实现图片放大展示效果
2017/08/30 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
教室标语大全
2014/06/21 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
Go语言应该什么情况使用指针
2021/07/25 Golang
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python