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数据

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