学习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 相关文章推荐
js常见表单应用技巧
Jan 09 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
微信小程序日期选择器实例代码
Jul 18 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
vue实现虚拟列表功能的代码
Jul 28 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 Javascript
原生JS实现拖拽效果
Dec 04 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/04/08 PHP
php实现httpclient类示例
2014/04/08 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
DHTML Slide Show script图片轮换
2008/03/03 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
python编写的最短路径算法
2015/03/25 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
基于Python的PIL库学习详解
2019/05/10 Python
Python发展史及网络爬虫
2019/06/19 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
abstract class和interface有什么区别
2013/08/04 面试题
信用社实习人员自我鉴定
2013/09/20 职场文书
中国梦的演讲稿
2014/01/08 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
青岛海底世界导游词
2015/02/11 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
python缺失值的解决方法总结
2021/06/09 Python
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL