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

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

js 代码

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,例如

js 代码

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 代码

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

 

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

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