当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)

Javascript
jQuery中isFunction方法的BUG修复
将函数的实际参数转换成数组的方法
javascript 删除数组中重复项（uniq）
js 巧妙去除数组中的重复项
javascript下一种表单元素获取方法存在的问题
javascript 三种数组复制方法的性能对比
js 多层叠的TAB选项卡
javascript 自动标记来自搜索结果页的关键字
起点页面传值js,有空研究学习下
javascript 的Document属性和方法集合
JavaScript 使用简略语法创建对象的代码
使用JQuery进行跨域请求
jquery 经典动画菜单效果代码
jquery 常用操作方法
js提示信息jtip封装代码，可以是图片或文章
javascript面向对象的方式实现的弹出层效果代码
jquery中的sortable排序之后的保存状态的解决方法
js或css实现滚动广告的几种方案
使用JavaScript库还是自己写代码？
js 右键菜单，支持不同对象不同菜单(兼容IE、Firefox)

No. « 281 282 283 284 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 150 ::
收藏到网摘: n/a

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