ext2的树组件的使用（从底层到表现层，异步加载）

beckrabbit

浏览: 129098 次
性别:
来自: 杭州

最近访客更多访客>>

netinsect00

inag0000

爱岩修

dkl187788

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

项目开发笔记

json DWR 数据结构 EXT Struts

貌似ext2的树组件没什么变化，一个简单的树照着example弄就可以了

js 代码

var Tree = Ext.tree;
var tree = new Tree.TreePanel({
el:'tree',
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'moduletree.do'
})
});
// set the root node
var root = new Tree.AsyncTreeNode({
text: '管辖单位',
draggable:false,
id:'source'
});
tree.setRootNode(root);
// render the tree
tree.render();
root.expand();

el决定了树的显示位置，一般是个div例如

dataUrl决定了树的json数据来源，我这里是一个struts的action，这个action会输出json数据

在服务层要提供一个可以生成json格式数据的service，struts的任务是获取传来的参数调用service方法输出json

我在服务层生成json数据用的是jsonlib包，论坛有详细介绍的帖子，就不多说了

数据库有两个表来构建树，一个是树的节点表，至少包括树的id name 我这里还有一个haschild，代表有没有子节点。

另一个是节点关系表，两列分别是父节点和他对应的子节点。

service层调用dao的方法将结果集组装成List或者Map，再用jsonlib包提供的api将list转化成json,例如

js 代码

//根据用户的角色和id生成用户的管辖单位树
public List getsubdept(String userid,Long roleid){
try{
//调用dao的方法查找到结果集
List list=roledeptdao.findRoledept(userid, roleid);
//生成json所使用的单位list
List deptlist=new ArrayList();
Iterator it=list.iterator();
while(it.hasNext()){
Ruledept rd=(Ruledept) it.next();
Map tree = new HashMap();
//节点显示单位名
tree.put("text", rd.getId().getTYwxtDept().getDeptName());
//节点的id
tree.put("id", rd.getId().getTYwxtDept().getDeptId());
Object value = new Object();
value = Boolean.TRUE;
tree.put("cls", "file");
//是否是叶子节点，我这里只有一层所以直接写的TRUE
tree.put("leaf", value);
//将这个生成叶子节点对应的MAP加到单位list里
deptlist.add(tree);
}
return deptlist;
}catch(Exception e){
log.error("获取单位列表失败"+e.getMessage());
return null;
}
}
public JSONArray getmoduletree(String userid, String roleid) {
List list=this.getsubdept(userid, new Long(roleid));
if(list==null){
return null;
}
//转换这个list让他变成json格式
JSONArray jsonArray = JSONArray.fromObject(list);
return jsonArray;
}

在action里面调用这个service方法：

java 代码

public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
HttpSession httpsession=request.getSession();
String roleid=(String) httpsession.getAttribute("role");
UserInfo userinfo=(UserInfo)httpsession.getAttribute("userinfo");
String userid=userinfo.getUserID();
JSONArray jsonArray=this.getRoledeptservice().getmoduletree(userid, roleid);
response.setContentType("text/json; charset=GBK");
try {
response.getWriter().print(jsonArray);
} catch (IOException e) {
log.error("输出json失败"+e.getMessage());
return null;
}
return null;
}

这样一个完整的树就生成了，现在这个树是只有两层，如果是多层的就需要修改service方法来递归构造一个树的list再转化成json。

异步读取节点：首先，底层的service方法要做到每次生成的是传入参数的下一级节点的list，然后在js的 tree.setRootNode(root);下面加上这句：js 代码

tree.on('beforeload', function(node){
tree.loader.dataUrl = 'createTree.do?id='+node.id;
});

tree.loader.dataUrl 的值需要返回的就是该节点id的下一级的json数据

数据量大的时候异步加载要好的多，服务层也代码比起一次性全部加载的反复递归调用省不少。

分享到：

FM2008发布了～ | 使用ext2的form提交表单（非AJAX方式）

2007-10-17 23:38
浏览 7666
评论(16)
论坛回复 / 浏览 (15 / 15715)
分类:Web前端
查看更多

16 楼 galant2008 2008-09-12

学习学习学习学习

15 楼 shileishmily 2008-07-24

tree.put("cls", "file");与它对应的树的节点在页面怎么没有图片显示啊

14 楼 davidcen 2008-06-19

peterwillcn 写道

请教一个比较难得问题。

我用的是column-tree。

当我拖动一行数据到另一个节点是，如何淡出一个对话框，得到新的节点和排序的位置呢？

例如：
1
+-----1.1
+-----1.2
+-----1.3
2
+-----2.1
+-----2.2 父节点是2。排序是2

把2.2拖到1.2/1.3之间，变成了

1(父节点)
+-----1.1
+-----1.2
+-----1.3 以前的2.2。父节点变成了1。排序变成了3。
+-----1.4 以前的1.3。
2(父节点)
+-----2.1

listeners : { movenode : function(tree, node, oldParent, newParent, index) {
					alert(index+",oldParent.attributes.oid="+oldParent.attributes.oid 
					+",newParent.attributes.oid="+ newParent.attributes.oid
					+",node.attributes.oid="+node.attributes.oid);
					node.attributes.pid=newParent.attributes.oid;
					alert("new node.attributes.pid"+node.attributes.pid);
					this.root.reload();
	      } 
	    }

在columntree中添加监听器,查询columntree的父类为Treepanel,查询Treepanel的Public Events,

movenode : ( Tree tree, Node node, Node oldParent, Node newParent, Number index )
Fires when a node is moved to a new location in the tree
Listeners will be called with the following arguments:
tree : Tree
The owner tree
node : Node
The node moved
oldParent : Node
The old parent of this node
newParent : Node
The new parent of this node
index : Number
The index it was moved to

我也是刚刚看EXT,用的是2.1 其他版本的Events 可能稍有不同;目前我的打算只能是拖拽之后数据反馈到服务端,服务端有一个树型结构的cache,对此cache进行修改和重新加载,见this.root.reload();,在用户交互上做提示持久化操作,最后用户确认所有的改动完全持久化到数据库.而更好的想法是直接修改dataUrl返回的数据,但是现在我还不知道哪个API能操作这个TreeLoader里面的dataUrl,要是这样就可以不用频繁访问服务端而只是在客户端拖拽,最后确认用户的更改就行了.如果有这方面设计的高手得知,也请告知.

13 楼 jayxu 2008-05-27

kaki 写道

有一点不明白，json-lib能够直接把list转化成json数据传吗？？

json-lib本身的实现是把list内部封装的对象转换为json格式数组

12 楼 peterwillcn 2008-05-26

11 楼 kaki 2008-01-16

有一点不明白，json-lib能够直接把list转化成json数据传吗？？

10 楼 jasonzhl 2008-01-08

fangzhouxing

可否把你的用dwr实现的数据的代码帖出来，或者打包上传供参考一下，我在extjs.com上面看到了很多你的帖子，感觉你对extjs的理解很深，想向你学习一下，我刚刚做了一颗树，但是有很多问题没法解决。谢谢！

9 楼 zlq4863947 2007-12-24

呵呵，谢谢 beckrabbit提供这么好的文章，不知有没有想过用struts2的实现....

8 楼 kanxue 2007-12-14

用火狐跟踪了一下,原来那几行代码没用,因为他传的参数是node,
客户端这样写
       loader: new Tree.TreeLoader({
           dataUrl:'moduletree.do'
       })
服务端只需要request.getparameter("node")即可读取

7 楼 kanxue 2007-12-11

引用

tree.on('beforeload', function(node){
tree.loader.dataUrl = 'createTree.do?id='+node.id;
});

我也这样写,为啥点击不能传id啊?

6 楼 beckrabbit 2007-10-18

fangzhouxing 写道

我使用DWR, 可以做到即时同步节点的拖动操作。

把整个树传递，数据量好像太大了。

的确，如果树比较大的话这样做不好。
但是按照一般的思维方式，做树的节点拖动这种操作一般是调整组织结构什么的，
在最后加一个保存按钮可以保证用户的输入准确度，而且可以加入还原按钮什么的。
如果每次拖动树节点都提交一次数据，拖动多次后如果用户发现树已经混乱了，
还想回到原来状态就不那么好办了，还要再把原来那颗树保存一下

5 楼 fangzhouxing 2007-10-18

我使用DWR, 可以做到即时同步节点的拖动操作。

把整个树传递，数据量好像太大了。

4 楼 beckrabbit 2007-10-18

fangzhouxing 写道

beckrabbit，谢谢回复。

是否考虑过树的拖动改变父节点，或者通过拖动调整同级位置的操作。

添加一个保存的按钮，这个按钮将树按照一定的规则保存成json或者数组什么的
使用DWR把组装好的树的数据传回服务端，服务端的方法解析传过来的数据，将数据保存就可以了

3 楼 fangzhouxing 2007-10-18

beckrabbit，谢谢回复。

是否考虑过树的拖动改变父节点，或者通过拖动调整同级位置的操作。

2 楼 beckrabbit 2007-10-18

当然可以只用一个表了这是数据库设计的问题了
我上面的例子是直接从项目里拿出来的只要业务逻辑能正确的组装成树形结构的list就可以了

1 楼 fangzhouxing 2007-10-18

引用

数据库有两个表来构建树，一个是树的节点表，至少包括树的id name 我这里还有一个haschild，代表有没有子节点。

另一个是节点关系表，两列分别是父节点和他对应的子节点。

为何不用一个表实现呢？我的树表结构如下，请指正：

CREATE TABLE Docmnt_Content (
Id int NOT NULL,
Name nvarchar(255) NOT NULL,
IsLeaf nchar(1) NOT NULL, //即 hasChildren
ParentId int NOT NULL, //父节点Id,0表示无父节点的根节点
SortOrder int NOT NULL, //用于节点同级排序
PRIMARY KEY (Id)
)

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论