学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007-03-10 00:00
387 查看
下面将介绍如何异步取一棵树的所有节点,具体做法与官方同步取节点有很大不同,尤其在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的变量
同时再分析一个json:
异步取节点的思路是这样的:
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 ……
相关文章推荐
- 学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
- 学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
- 学习YUI.Ext 第六天--关于树TreePanel(Part 1)
- 学习YUI.Ext 第六天--关于树TreePanel(Part 1)
- 学习YUI.Ext 第六天--关于树TreePanel(Part 1)
- 学习EXT第六天--关于树TreePanel(Part 1)
- 学习EXT第六天--关于树TreePanel(Part 2异步获取节点)
- ext TreePanel 一次递归加载数据及异步加载数据(点子节点加载数据)
- EXT.NET TreePanel获取选中节点
- 如何获取TreePanel中勾选了CheckBox的节点集合【Ext.Net 1.0】
- ExtJs 4.x 学习小记:动态添加节点到Ext.tree.Panel
- EXT.NET 使用总结(2) ---TreePanel(带右键菜单,节点自定义属性)
- Extjs学习笔记--Ext.tree.Panel
- Ext.tree.treePanel关于调用loader
- ExtJS4 Ext.tree.Panel获取Node对象
- yui-tree刷新节点时候的从新异步更新
- EXTJS5的学习记录之TreePanel树的本地加载与异步加载
- [Ext.Net]TreePanel 异步加载数据
- 关于Struts 树(DOJO dojo.widget.Tree)节点的展开问题!(异步树)
- 学习YUI.Ext 第七天--关于View&JSONView