繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
- Javascript
- 动态生成select选项全接触
- 不刷新页面动态更新select选项，实现两个select相互操作
- 网页输入框日期型有效性判定一网打尽
- 实用Javascript函数之一(自动将输入文本框中的内容转换成大写字符)
- 实用Javascript函数之二(自动将输入文本框中的内容转换成小写字符)
- 实用Javascript函数之三(限制文本输入框中只能输入数字\"0\"到\"9\")
- 实用Javascript函数之四(用于对sString字符串进行前空格截除)
- 实用Javascript函数之五(用于对sString字符串进行后空格截除)
- 实用Javascript函数之六(截除字符串前后空格)
- 如何使用交替的滚动标题
- 采用DOM模型时创建一个Select节点后，要删除option项的解决方法
- javascript函数速查
- 利用JavaScript和正则表达式进行丰富的日期判断（给其它项目组的代码，有比较好的编程风格和注释）
- 关于字符串的几个有用函数
- FileSystemObject 的例子（处理驱动器、文件夹、文件）
- 用JScript实现VB.Net,C#的[委托Delegate]:
- 得到固定字符位置的函数
- IE NC通用的藏鼠标右键一法
- Menu
- foolpot2001菜单
Javascript 中的 学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 177 ::
收藏到网摘: 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
……
评论 (0) All
