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

ext2的树组件的使用（从底层到表现层，异步加载）
转载自http://www.iteye.com/topic/132995

1. var Tree = Ext.tree;
2.
3. var tree = new Tree.TreePanel({
4. el:'tree',
5. autoScroll:true,
6. animate:true,
7. enableDD:true,
8. containerScroll: true,
9. loader: new Tree.TreeLoader({
10. dataUrl:'moduletree.do'
11. })
12. });
13.
14. // set the root node
15. var root = new Tree.AsyncTreeNode({
16. text: '管辖单位',
17. draggable:false,
18. id:'source'
19. });
20. tree.setRootNode(root);
21.
22. // render the tree
23. tree.render();
24. 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,例如

1. //根据用户的角色和id生成用户的管辖单位树
2. public List getsubdept(String userid,Long roleid){
3. try{
4. //调用dao的方法查找到结果集
5. List list=roledeptdao.findRoledept(userid, roleid);
6. //生成json所使用的单位list
7. List deptlist=new ArrayList();
8. Iterator it=list.iterator();
9. while(it.hasNext()){
10. Ruledept rd=(Ruledept) it.next();
11. Map tree = new HashMap();
12. //节点显示单位名
13. tree.put("text", rd.getId().getTYwxtDept().getDeptName());
14. //节点的id
15. tree.put("id", rd.getId().getTYwxtDept().getDeptId());
16. Object value = new Object();
17. value = Boolean.TRUE;
18. tree.put("cls", "file");
19. //是否是叶子节点，我这里只有一层所以直接写的TRUE
20. tree.put("leaf", value);
21. //将这个生成叶子节点对应的MAP加到单位list里
22. deptlist.add(tree);
23. }
24.
25. return deptlist;
26. }catch(Exception e){
27. log.error("获取单位列表失败"+e.getMessage());
28. return null;
29. }
30.
31. }
32.
33. public JSONArray getmoduletree(String userid, String roleid) {
34. List list=this.getsubdept(userid, new Long(roleid));
35. if(list==null){
36. return null;
37. }
38. //转换这个list让他变成json格式
39. JSONArray jsonArray = JSONArray.fromObject(list);
40. return jsonArray;
41. }


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

1. public ActionForward execute(ActionMapping mapping, ActionForm form,
2. HttpServletRequest request, HttpServletResponse response) {
3.
4. HttpSession httpsession=request.getSession();
5. String roleid=(String) httpsession.getAttribute("role");
6. UserInfo userinfo=(UserInfo)httpsession.getAttribute("userinfo");
7. String userid=userinfo.getUserID();
8. JSONArray jsonArray=this.getRoledeptservice().getmoduletree(userid, roleid);
9. response.setContentType("text/json; charset=GBK");
10. try {
11. response.getWriter().print(jsonArray);
12. } catch (IOException e) {
13. log.error("输出json失败"+e.getMessage());
14. return null;
15. }
16.
17. return null;
18. }


这样一个完整的树就生成了，现在这个树是只有两层，如果是多层的就需要修改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数据

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