学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)


Posted in Javascript onMarch 10, 2007

下面将介绍如何异步取一棵树的所有节点,具体做法与官方同步取节点有很大不同,尤其在json的id属性上,下面是我一些摸索,可能不是最佳方案,有待大家一起研究。
异步取节点的思路是这样的:
1、先定义一个初始化节点(也可以不定义,看个人需求)
2、yui-ext根据该节点id请求服务器,获得子节点各属性
3、循环
特点:可以在上一级目录中,在服务器端预先将该节点是否有子节点读好(json中的isLeaf属性),虽然但数据库将多承担一些压力,但用个count(*)不会造成太大负担(除非查询条件异常复杂),也可以不读,即把所有isLeaf设置为false。
问题:
1、目前还无法进行reload,即每次打开节点都重新读取一次
2、样式还有些问题,无法通过node. childNodes[i]设置子节点的style,所以无法改变最后一级元素的style(也许是通过别的途径改变style的?)
示例:
先给出一段js代码,可以结合官方的demo(http://yui-ext.com/playpen/yui-ext.0.40/examples/tree/reorder.html)看看:
//定义根id的变量

var rootId = 1;  
var TreeTest = function(){  
    // shorthand  
    var Tree = YAHOO.ext.tree;      return {  
        init : function(userName){  
            var tree = new Tree.TreePanel('detailTree', {  
                animate:true,   
                //这个dataUrl是初始化树所用的url,你也可以不写或定义一个静态json文件,还可以什么都不写全部依赖于第二个url自动产生,视具体需求而定  
                loader: new Tree.TreeLoader({dataUrl:'calendarDetail.do?method=getDayDetailJSON&parentId='+rootId}),  
                enableDD:true,  
                containerScroll: true  
            });  
            // set the root node  
            var root = new Tree.AsyncTreeNode({  
                text: 'yui-ext',   
                draggable:false,   
                id:rootId  
            });  
            tree.setRootNode(root);  
            //根据当前节点id,动态拼出请求服务器的路径  
            //每产生一个节点,指向一个事件的引用,将新建loader.dataUrl(具体事件的机制还需要再研究)  
            //注意调用函数是beforeload  
            tree.on('beforeload', function(node){   
                tree.loader.dataUrl = 'calendarDetail.do?method=getDayDetailJSON&parentId='+node.id;  
            });  
              
            //这里演示一个自定义json的用法(description为自定义json的key)  
            //以及如何定义某节点的style(node.ui.textNode.style.title)  
            //具体可以看ui这个类  
            tree.on('beforeexpand', function(node){   
                node.ui.textNode.style.title = ‘red';  
                alert(node.attributes.description);  
            });                                          
            // render the tree  
            tree.render();  
            // false for not recursive (the default), false to disable animation  
            root.expand();  
        }  
    };  
}(); 

同时再分析一个json:
[{"text":"衣服类",    
"id":"5",     //注意:这里是该节点的id,拼连接时要用到,与官方的json有所不同   
"leaf":true,  
"cls":"file",  
"description":"这里是衣服类"}]   //自定义只需要这样就可以了   
给出java产生json的代码逻辑片断:   
……  
//list为由传入的id所求的category集合  
List list=   
findBy("parentId", new Long(parentId.toString()));  
StringBuffer JSONStr = new StringBuffer();  //声明json  
JSONStr.append("[");  for(CostCategory i : list){    
    boolean isLeaf = isLeaf(i.getId());  //isLeaf()为判断是否有以该id为parentId的节点,具体没有给出  
    String icon = isLeaf?"file":"folder";  
    String description = i.getCategoryDescription()==null?"":i.getCategoryDescription();  
    //{"text":"treedata.jsp","id":"treedata.jsp","leaf":true,"cls":"file"},  
    JSONStr.append("{\"text\":\""+  
            i.getCategoryName()+"\",\"id\":\""+  
            i.getId()+"\",\"leaf\":"+  
            isLeaf+",\"cls\":\""+  
            icon+"\",\"description\":\""+  
            description+"\"},");  
}  
JSONStr.deleteCharAt(JSONStr.lastIndexOf(","));  
JSONStr.append("]");  
System.out.println(JSONStr);  
out.print(JSONStr);   //输出json  
…… 
Javascript 相关文章推荐
javascript 写类方式之一
Jul 05 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
学习YUI.Ext 第七天--关于View&JSONView
Mar 10 #Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 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
You might like
mysql+php分页类(已测)
2008/03/31 PHP
php设计模式 Proxy (代理模式)
2011/06/26 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
python处理文本文件并生成指定格式的文件
2014/07/31 Python
python自动化测试之连接几组测试包实例
2014/09/28 Python
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
python中kmeans聚类实现代码
2018/02/23 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
用Python 执行cmd命令
2020/12/18 Python
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
会计毕业生求职简历的自我评价
2013/10/20 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
高三语文复习计划
2015/01/19 职场文书
高中生物教学反思
2016/02/20 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
PHP基本语法
2021/03/31 PHP