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

所属分类: 网络编程 / JavaScript 阅读数: 876
收藏 0 赞 0 分享
下面将介绍如何异步取一棵树的所有节点,具体做法与官方同步取节点有很大不同,尤其在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 
…… 
更多精彩内容其他人还在看

深入解析Vue 组件命名那些事

本篇文章主要介绍了深入解析Vue 组件命名那些事,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue学习笔记进阶篇之vue-cli安装及介绍

这篇文章主要介绍了Vue学习笔记进阶篇之vue-cli安装及介绍,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jquery版轮播图效果和extend扩展

这篇文章主要为大家详细介绍了jquery版轮播图效果,以及extend扩展的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jQuery Validate格式验证功能实例代码(包括重名验证)

本文通过实例代码给大家介绍了jQuery Validate格式验证功能,代码中包括重名验证的方法,需要的的朋友参考下吧
收藏 0 赞 0 分享

Angular.js中angular-ui-router的简单实践

本篇文章主要介绍了Angular.js中angular-ui-router的简单实践,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript实现二维坐标点排序效果

这篇文章主要为大家详细介绍了JavaScript实现二维坐标点排序效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

深入理解vue2.0路由如何配置问题

本篇文章主要介绍了vue2.0路由配置问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

基于bootstrap实现多个下拉框同时搜索功能

这篇文章主要为大家详细介绍了基于bootstrap实现多个下拉框同时搜索功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript 值类型和引用类型的初次研究(推荐)

这篇文章主要介绍了JavaScript 值类型和引用类型的初次研究,需要的朋友可以参考下
收藏 0 赞 0 分享

利用jQuery异步上传文件的插件用法详解

这篇文章主要介绍了利用jQuery异步上传文件的插件用法详解,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多