若隐若现的造句:基于Ext异步加载tree的实例

基于Ext异步加载tree的实例

使用JS生成树形结构的菜单是基于J2EE的B/S系统常用的UI方式。但长期以来的问题是同步（即一次加载整棵树）加载一棵完整的树给前台及后台同时带来压力，由于加载数据及渲染时间过长使用户体验度很低。Ajax的异步数据传输方式是解决此问题的较好方式，即每次只加载一层节点，当需要时才加载下级节点，这样页面无需一次加载解决了此问题。

Ext的TreePanel组件提供了此功能即异步树（asynchronism tree），使用其实现需以下两步：

• 后台数据加载的实现，并以JSON形式提供给前台。
• 前台Ext的Tree组件实现。

实现预览：

1. 首先是JavaBean的节点模型（Tree Node Model）：

1. /** 
2.  * Method: 异步加载树型结点
    
3.  * Origin Time: 2008-8-15 下午03:56:28
    
4.  *  
5.  * @author Seraph
    
6.  * @email: seraph115@gmail.com
    
7.  */  
8. public class AsyncTreeNode {  
9.   
10.     private String id;  
11.   
12.     private String text; // 结点显示名称  
13.   
14.     private boolean leaf; // 是否为叶子结点  
15.   
16.     private boolean disabled; // 是否可用  
17.   
18.     private String cls; // 显示的样式，file、folder  
19.   
20.     private String iconCls; // 结点图标样式  
21.   
22.     private String href; // 点击后时的链接  
23.   
24.     private String hrefTarget; // 在何frame中显示  
25.   
26.     private boolean draggable; // 是否可拖拽  
27.   
28.         // Omit the get and set method  
29.         ... ...  
30. }  

/*** Method: 异步加载树型结点
* Origin Time: 2008-8-15 下午03:56:28
** @author Seraph
* @email: seraph115@gmail.com
*/public class AsyncTreeNode {private String id;private String text; // 结点显示名称private boolean leaf; // 是否为叶子结点private boolean disabled; // 是否可用private String cls; // 显示的样式，file、folderprivate String iconCls; // 结点图标样式private String href; // 点击后时的链接private String hrefTarget; // 在何frame中显示private boolean draggable; // 是否可拖拽// Omit the get and set method... ...}

数据库中的表结构：

VARCHAR2

取下级节点的接口定义：

1. /** 
2.  * Method: 获取异步加载树型子结点
    
3.  * Author: Seraph
    
4.  * Origin Time: 2008-9-9 下午05:46:02
    
5.  *  
6.  * @param menuId 当前结点的id 
7.  * @return 下级节点组成的List 
8.  */  
9. public List getLowerTreeNodes(String menuId);  

/*** Method: 获取异步加载树型子结点
* Author: Seraph
* Origin Time: 2008-9-9 下午05:46:02
** @param menuId 当前结点的id* @return 下级节点组成的List*/public List getLowerTreeNodes(String menuId);

数据提供的Spring的Controller:

1. /** 
2.  * Method:
    
3.  * Origin Time: 2008-8-15 上午11:07:55
    
4.  * @author Seraph
    
5.  * @email: seraph115@gmail.com
    
6.  */  
7. public class AsyncTreeProviderController extends JsonProviderController {  
8.   
9.     private TreeManager treeManager;  
10.       
11.     public void setTreeManager(TreeManager treeManager) {  
12.         this.treeManager = treeManager;  
13.     }  
14.   
15.     protected ModelAndView handleRequestInternal(HttpServletRequest request,  
16.             HttpServletResponse response) throws Exception {  
17.   
18.         String rootId = request.getParameter("id");  
19.         List list = treeManager.getLowerTreeNodes(rootId);  
20.           
21.         super.pushJsonResponse(response, list);  
22.   
23.         return null;  
24.     }  
25.   
26. }  

/*** Method:
* Origin Time: 2008-8-15 上午11:07:55
* @author Seraph
* @email: seraph115@gmail.com
*/public class AsyncTreeProviderController extends JsonProviderController {private TreeManager treeManager;public void setTreeManager(TreeManager treeManager) {this.treeManager = treeManager;}protected ModelAndView handleRequestInternal(HttpServletRequest request,HttpServletResponse response) throws Exception {String rootId = request.getParameter("id");List list = treeManager.getLowerTreeNodes(rootId);super.pushJsonResponse(response, list);return null;}}

  此步将查询到的下级结点的List转换为JSON数据通过Ajax方式返回给Ext的TreePanel组件用以渲染下级结点。

PS: 推荐使用json-lib来转换javabean为json数据。下面是json-lib的maven的dependency。

1.   
2.     net.sf.json-lib  
3.     json-lib  
4.     2.2.2  
5.   

        net.sf.json-libjson-lib2.2.2

2. JavaScript的Ext TreePanel组件实现：

1. /** 
2.  * async-tree.js Power by YUI-EXT and JSON. 
3.  *  
4.  * @author Seraph 
5.  * @email seraph115@gmail.com 
6.  */  
7.    
8. var AsyncTree = {   
9.     author: "Seraph",  
10.     version: "0.1.0"  
11. };  
12.   
13. // -> Configuration of tree. e.g: CG[1]  
14. var CG = {  
15.     1: "asyncTreeProvider.do",  
16.     2: "async"  
17. };  
18.   
19. // -> Root-node name in Chinese. e.g: CN[1]  
20. var CN = {  
21.     1: "菜单",  
22.     2: "配置"  
23. };  
24.   
25. // -> Root-node ID of tree. e.g: ID[1]  
26. var ID = {  
27.     1: "-1",  
28.     2: "-2"  
29. };  
30.   
31. Ext.onReady(function(){  
32.       
33.         var Tree = Ext.tree;  
34.       
35.         var myTreeLoader = new Ext.tree.TreeLoader({  
36.             url: CG[1]  
37.         });  
38.      
39.         myTreeLoader.on("beforeload", function(treeLoader, node) {  
40.                 myTreeLoader.baseParams.id = node.attributes.id;  
41.             }, myTreeLoader);  
42.      
43.         var tree = new Tree.TreePanel({  
44.             el:'tree1',  
45.             autoScroll:true,  
46.             autoHeight: true,  
47.             border: false,  
48.             animate:true,  
49.             enableDD:true,  
50.             rootVisible:false,  
51.             containerScroll: true,  
52.             loader: myTreeLoader,  
53.             root: {  
54.                 nodeType: CG[2],  
55.                 text: CN[1],  
56.                 id: ID[1]  
57.             }  
58.         });  
59.         tree.render();  
60.         tree.getRootNode().expand();  
61.           
62.     });  

/*** async-tree.js Power by YUI-EXT and JSON.** @author Seraph* @email seraph115@gmail.com*/var AsyncTree = {author: "Seraph",version: "0.1.0"};// -> Configuration of tree. e.g: CG[1]var CG = {1: "asyncTreeProvider.do",2: "async"};// -> Root-node name in Chinese. e.g: CN[1]var CN = {1: "菜单",2: "配置"};// -> Root-node ID of tree. e.g: ID[1]var ID = {1: "-1",2: "-2"};Ext.onReady(function(){var Tree = Ext.tree;var myTreeLoader = new Ext.tree.TreeLoader({url: CG[1]});myTreeLoader.on("beforeload", function(treeLoader, node) {myTreeLoader.baseParams.id = node.attributes.id;}, myTreeLoader);var tree = new Tree.TreePanel({el:'tree1',autoScroll:true,autoHeight: true,border: false,animate:true,enableDD:true,rootVisible:false,containerScroll: true,loader: myTreeLoader,root: {nodeType: CG[2],text: CN[1],id: ID[1]}});tree.render();tree.getRootNode().expand();});