学习YUI.Ext第六天--关于树TreePanel(Part1)
学习 关于 -- Ext YUI Part1 第六天
2023-06-13 09:13:54 时间
学习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:
复制代码代码如下:
效果演示: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();
}
});
相关文章
- 【企业架构】Salesforce CTA 的持续学习:十本关于企业架构、战略和工程的好书
- zkw线段树 学习笔记
- Python(二)Marshmallow 库相关学习
- 关于虚函数的学习思考
- [ 机器学习 ] 关于Jupyter Notebook中pytorch模块import失败的问题
- 【七】强化学习、gym学习平台扩充,更好的玩转虚拟环境,关于mujoco、mujoco-py、baselines安装配置----待更新------
- 31. Groovy 语法-表达式知识学习
- mybatis的学习
- SpringBoot学习笔记
- 学习 Linux:一步一步走向成功(怎样学习linux)
- 学习数据结构的好处有哪些?
- 深入浅出MySQL:学习MySQL必备的好书(关于mysql的好书)
- 探索Redis学习如何掌握缓存神器(关于redis的学习)
- 大飞的Redis学习笔记一次开启数据库事业的突破(大飞的redis学习笔记)
- 关于SQLServer2005的学习笔记XML的处理
- php入门学习知识点五关于php数组的几个基本操作
- Sql学习第三天——SQL关于withties介绍
- Sql学习第三天——SQL关于CTE(公用表达式)的递归查询使用