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

下面将介绍如何异步取一棵树的所有节点,具体做法与官方同步取节点有很大不同,尤其在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 
…… 

时间: 2024-09-20 07:29:45

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

学习YUI.Ext 第六天--关于树TreePanel(Part 1)_YUI.Ext相关

学习YUI.Ext 第五天--关于树TreePanel(Part 1)  效果演示:http://www.ajaxjs.com/yuicn/demos/order_tree.asp     树组件是YUI.Ext 0.40 新增的组件.虽然YUI已经自带有TREE VIEW的组件,但JACK还是决定重新开发.具体原因在http://www.ajaxjs.com/yuicn/article.asp?id=20070245(翻译文章)或http://www.jackslocum.com/blog/2

Ext javascript建立超链接,进行事件处理的实现方法_YUI.Ext相关

1,如何在javasript建立超链接 <script type="text/JavaScript"> //方法一: location.href='网址'; //方法二: document.write('<a href="网址">文字</a>'); </script> 2,应用到Ext中的树控件事件处理 tree_03.js 复制代码 代码如下: Ext.onReady(function(){ var root = n

学习YUI.Ext 第七天--关于View&amp;amp;JSONView_YUI.Ext相关

展现一条一条的二维关系的数据,我们可以使用GIRD组件. 但有些场合,如产品展示,画册,我们可以使用View组件,来展示"矩阵"式的数据. View的数据源来自DataModel对象,即包含XMLDataModel和JSONDataModel.尽管View支持JSON,但如果不是用于DataModel,View的子类JSONView更适用,因为它提供更多的事件和方法.一般来说,View用于XML数据源:JSONView用于JSON数据源. View如何工作? 记得以前如何输出一个记录吗

ext.net ...-请问ext.net中的treepanel如何设置节点的选中以及取消选中

问题描述 请问ext.net中的treepanel如何设置节点的选中以及取消选中 http://wenku.baidu.com/search?word=ext&lm=0&od=0 解决方案 EXT.NET循环并且选中TreePanel的某些值Ext TreePanel中选中指定的节点----------------------

为Yahoo! UI Extensions Grid增加内置的可编辑器_YUI.Ext相关

原文地址 文章日期:2006/9/10 对YUI-EXT GIRD功能需求最强烈的是内置可编辑的支持.市场上大多数收费的JAVASCRIPT GIRD,我看过的那些可编辑支持,并没有给我留下太深的印象.它给你一个基本的TEXT FIELD,一些CHECKBOXS或者是Select fields,这导致了你一边单击某个字段在编辑,另一边厢插入一个FORM到这个单元格之中,不知不觉地,会出现越来越多编辑过的"脚印footprint",尤其是IE,在很多行的情况下. 所以我决定不采用这种方法

Javascript的一种模块模式_YUI.Ext相关

Douglas Crockford已经传授了一个有用的单例模式(singleton pattern)实现此规则,我认为他的模式有益于你基于YUI的那些应用.Douglas叫它模块模式(module pattern).它是如下工作的: 创建一个命名空间对象:如果你使用YUI,可以用YAHOO.namespace()方法: YAHOO.namespace("myProject");这分配了一个空的myProject对象,是YAHOO的一个成员(如 果myProject已存在的话,则不会被覆

刚刚开始学习c++,该从哪里入手?从哪里可以获取语法知识?

问题描述 刚刚开始学习c++,该从哪里入手?从哪里可以获取语法知识? 如题.纯小白,看了一些课程,但是从哪里知道有哪些代码可以调用,以及语句的语法呢?手上找不到资料. 解决方案 建议你网上找培训机构的视频看看,书的话建议你网上买一本c语言的书. 解决方案二: 买书看撒...照着给的demo写写.. 解决方案三: 如果可以的话先学学C语言!对以后学习别的语言又很大帮助! 解决方案四: 建议你网上找培训机构的视频看看,书的话建议你网上买一本c语言的书. 解决方案五: 入门的话看:<> 谭浩强 清华

《Ext JS权威指南》——2.1节获取Ext JS 4

第2章 从"Hello World"开始 "Hello World"几乎已经成为所有开发类图书的必用案例,本书也不能免俗.本章将通过编写"Hello World"程序来让大家对如何使用Ext JS进行开发有初步的了解,如Ext JS代码是如何运行的.代码书写风格是怎样的.如何实现本地化等.2.1 获取Ext JS 4 要下载Ext JS 4,可访问地址:http://www.sencha.com/products/Ext JS/download/

树状结构 求和-sql 按树状结构 分组求和 父节点包括所有字节点的值

问题描述 sql 按树状结构 分组求和 父节点包括所有字节点的值 有一个表存树状结构: 值 上级节点 所属级数 001 * 1 00101 001 2 00102 001 2 0010203 00102 3 ... 00103 001 2 ... 在其他表中存储对应的数据,有[金额]和[数状表的字节点值]. 如: 100.00 / 0010203 现在想做出求和的效果如下 码值 合计 001 161 00101 61 0010101 50 0010101 11 00102 100 0010203