学习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_13_执行模型详解
Oct 20 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
js构造函数创建对象是否加new问题
Jan 22 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
vue实现中部导航栏布局功能
Jul 30 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
javascript实现支付宝滑块验证码效果
Jul 24 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 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类常量用法实例分析
2015/07/09 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
python语言基本语句用法总结
2019/06/11 Python
python多进程重复加载的解决方式
2019/12/13 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
python如何随机生成高强度密码
2020/08/19 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
介绍一下Java的事务处理
2012/12/07 面试题
欢送退休感言
2014/02/08 职场文书
客服部班长工作责任制
2014/02/25 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
故意伤害辩护词
2015/05/21 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
小学数学教师研修日志
2015/11/13 职场文书
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server