学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
发布时间:2016-12-30 来源:查字典编辑
摘要:下面将介绍如何异步取一棵树的所有节点,具体做法与官方同步取节点有很大不同,尤其在json的id属性上,下面是我一些摸索,可能不是最佳方案,有...

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

复制代码 代码如下:

varrootId=1;

varTreeTest=function(){

//shorthand

varTree=YAHOO.ext.tree;

return{

init:function(userName){

vartree=newTree.TreePanel('detailTree',{

animate:true,

//这个dataUrl是初始化树所用的url,你也可以不写或定义一个静态json文件,还可以什么都不写全部依赖于第二个url自动产生,视具体需求而定

loader:newTree.TreeLoader({dataUrl:'calendarDetail.do?method=getDayDetailJSON&parentId='+rootId}),

enableDD:true,

containerScroll:true

});

//settherootnode

varroot=newTree.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);

});

//renderthetree

tree.render();

//falsefornotrecursive(thedefault),falsetodisableanimation

root.expand();

}

};

}();

同时再分析一个json:

复制代码 代码如下:

[{"text":"衣服类",

"id":"5",//注意:这里是该节点的id,拼连接时要用到,与官方的json有所不同

"leaf":true,

"cls":"file",

"description":"这里是衣服类"}]//自定义只需要这样就可以了

给出java产生json的代码逻辑片断:

……

//list为由传入的id所求的category集合

Listlist=

findBy("parentId",newLong(parentId.toString()));

StringBufferJSONStr=newStringBuffer();//声明json

JSONStr.append("[");

for(CostCategoryi:list){

booleanisLeaf=isLeaf(i.getId());//isLeaf()为判断是否有以该id为parentId的节点,具体没有给出

Stringicon=isLeaf?"file":"folder";

Stringdescription=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

……

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类