源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-10-22 02:55 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
下面将介绍如何异步取一棵树的所有节点,具体做法与官方同步取节点有很大不同,尤其在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的变量
[u]复制代码[/u] 代码如下:
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:
[u]复制代码[/u] 代码如下:
[{"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  …… 
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部