学习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 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
js每次Title显示不同的名言
Sep 25 Javascript
Javascript玩转继承(一)
May 08 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 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
PHP生成月历代码
2007/06/14 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
php简单图像创建入门实例
2015/06/10 PHP
jquery 表单进行客户端验证demo
2009/08/24 Javascript
异步加载script的代码
2011/01/12 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
python简单程序读取串口信息的方法
2015/03/13 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
使用python模拟高斯分布例子
2019/12/09 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
简单了解如何封装自己的Python包
2020/07/08 Python
python给list排序的简单方法
2020/12/10 Python
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
大型演出策划方案
2014/05/28 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
谢师宴邀请函
2015/02/02 职场文书
上班迟到检讨书
2015/05/06 职场文书
史上最牛辞职信
2015/05/13 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
赤壁观后感(2)
2015/06/15 职场文书
JavaScript 对象创建的3种方法
2021/11/17 Javascript
Apache自带的ab压力测试工具的实现
2022/07/23 Servers