学习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 相关文章推荐
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
学习jQuey中的return false
Dec 18 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
Vue组件和Route的生命周期实例详解
Feb 10 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
微信小程序实现原生步骤条
Jul 25 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 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
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
简单的页面缓冲技术
2006/10/09 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
PHP7 弃用功能
2021/03/09 PHP
JavaScript去掉空格的方法集合
2010/12/28 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
Python中装饰器的一个妙用
2015/02/08 Python
基于python时间处理方法(详解)
2017/08/14 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
普通大学毕业生自荐信
2013/11/04 职场文书
公务员总结性个人自我评价
2013/12/05 职场文书
九年级数学教学反思
2014/02/02 职场文书
仓库规划计划书
2014/04/28 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
法律意见书范文
2015/06/04 职场文书
歌舞青春观后感
2015/06/10 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL