Extjs Tree + JSON + Struts2 例子

 来源：未知    作者：云自无心水自闲

 

核 心提示：最近尝试用extjs来展示树状菜单。着实花了一番功夫。树状菜单的菜单项需要动态加载，而目前版本的extjs中只支持JSON格式的数据。查 了一些资料，决定使用struts2的json-plugin。首先按照例子做了一个，但是结果就是不成功，界面上只出来了一个js中生成的root

最 近尝试用extjs来展示树状菜单。着实花了一番功夫。树状菜单的菜单项需要动态加载，而目前版本的extjs中只支持JSON格式的数据。查了一些资 料，决定使用struts2的json-plugin。首先按照例子做了一个，但是结果就是不成功，界面上只出来了一个js中生成的root节点，不能加 载从后台生成的数据。研究后发现是数据格式有问题。使用json-plugin生成的数据格式如下：

1. { "cls" : "folder" , "id" :10, "leaf" : false , "children" :[{ "cls" : "file" , "id" :11, "leaf" : true , "children" : null , "text" : "S600" },{ "cls" : "file" , "id" :12, "leaf" : true , "children" : null , "text" : "SLK200" }], "text" : "Benz" }  

而extjs需要的数据格式如下：

1. [{ "cls" : "folder" , "id" :10, "leaf" : false , "children" :[{ "cls" : "file" , "id" :11, "leaf" : true , "children" : null , "text" : "S600" },{ "cls" : "file" , "id" :12, "leaf" : true , "children" : null , "text" : "SLK200" }], "text" : "Benz" }]  

区别很小，就只相差最外面的两个方括号。但是少了这两个方括号，在json中，含义迥然不同，前者表示一个对象，而后者表示一个数组。而extjs 中 tree的dataloader需要的数据必须是一个数组。而这样的数据格式是json-plugin自动生成的，无法改变。所以，我最后放弃了json -plugin，转而使用json-lib来解决这个问题。
1. 下载json-lib, http://json-lib.sourceforge.net/
2. lib目录下的jar文件清单：
commons-beanutils-1.7.0.jar
commons-collections-3.2.jar
commons-digester-1.6.jar
commons-lang-2.3.jar
commons-logging-1.1.jar
dom4j-1.6.1.jar
ezmorph-1.0.4.jar
freemarker-2.3.8.jar
javassist-3.8.1.jar
json-lib-2.2.1-jdk15.jar
log4j-1.2.13.jar
ognl-2.6.11.jar
struts2-core-2.0.11.jar
xml-apis-1.0.b2.jar
xwork-2.0.4.jar

首先配置web.xml

1. <? xml   version = "1.0"   encoding = "UTF-8" ?>   
2. < web-app   version = "2.4"   xmlns = "http://java.sun.com/xml/ns/j2ee"   
3.    xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"   
4.    xsi:schemaLocation ="http://java.sun.com/xml/ns/j2ee   
5.     http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" >   
6.    < welcome-file-list >   
7.      < welcome-file > index.jsp </ welcome-file >   
8.    </ welcome-file-list >   
9.    < filter >   
10.      < filter-name > struts2 </ filter-name >   
11.      < filter-class > org.apache.struts2.dispatcher.FilterDispatcher </ filter-class >   
12.    </ filter >   
13.   
14.    < filter-mapping >   
15.      < filter-name > struts2 </ filter-name >   
16.      < url-pattern > /* </ url-pattern >   
17.    </ filter-mapping >   
18. </ web-app >   
19.   

然后是struts.xml

1. <? xml   version = "1.0"   encoding = "UTF-8" ?>   
2. <!DOCTYPE struts PUBLIC   
3.     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"   
4.     "http://struts.apache.org/dtds/struts-2.0.dtd" >   
5.       
6. < struts >   
7.      < constant   name = "struts.devMode"   value = "true" />   
8.      < constant   name = "struts.i18n.encoding"   value = "UTF-8" />   
9.      < package   name = "person"   extends = "struts-default" >   
10.          < action   name = "menus"   method = "execute"   class = "com.lab.MenuAction" >   
11.              < result > /menu.jsp </ result >   
12.          </ action >   
13.      </ package >   
14. </ struts >   

3. 树的节点模型（省略了getter，setter)

1. public class Menu {   
2.     private int id;   
3.     private String text;   
4.     private boolean leaf;   
5.     private String cls;   
6.     private List < Menu >  children;   
7. }   

4. action

1. package  com.lab;   
2.   
3. import  java.util.ArrayList;   
4. import  java.util.List;   
5.   
6. import  net.sf.json.JSONArray;   
7.   
8. public   class  MenuAction {   
9.      private  String menuString;   
10.       
11.      private  List<Menu> menus;   
12.       
13.      public  String execute() {   
14.   
15.         menus =  new  ArrayList<Menu>();   
16.           
17.         Menu benz =  new  Menu();   
18.         benz.setText( "Benz" );   
19.         benz.setCls( "folder" );   
20.         benz.setLeaf( false );   
21.         benz.setId( 10 );   
22.         menus.add(benz);   
23.           
24.         List<Menu> benzList =  new  ArrayList<Menu>();   
25.         benz.setChildren(benzList);   
26.           
27.         Menu menu;   
28.         menu =  new  Menu();   
29.         menu.setText( "S600" );   
30.         menu.setCls( "file" );   
31.         menu.setLeaf( true );   
32.         menu.setId( 11 );   
33.         benzList.add(menu);   
34.         menu =  new  Menu();   
35.         menu.setText( "SLK200" );   
36.         menu.setCls( "file" );   
37.         menu.setLeaf( true );   
38.         menu.setId( 12 );   
39.         benzList.add(menu);   
40.           
41.         Menu bmw =  new  Menu();   
42.         bmw.setText( "BMW" );   
43.         bmw.setCls( "folder" );   
44.         bmw.setLeaf( false );   
45.         bmw.setId( 20 );   
46.         menus.add(bmw);   
47.           
48.         List<Menu> bmwList =  new  ArrayList<Menu>();   
49.         bmw.setChildren(bmwList);   
50.           
51.         menu =  new  Menu();   
52.         menu.setText( "325i" );   
53.         menu.setCls( "file" );   
54.         menu.setLeaf( true );   
55.         menu.setId( 21 );   
56.         bmwList.add(menu);   
57.           
58.         menu =  new  Menu();   
59.         menu.setText( "X5" );   
60.         menu.setCls( "file" );   
61.         menu.setLeaf( true );   
62.         menu.setId( 22 );   
63.         bmwList.add(menu);   
64.           
65.         JSONArray jsonObject = JSONArray.fromObject(menus);   
66.          try  {   
67.             menuString = jsonObject.toString();   
68.         }  catch  (Exception e) {   
69.             menuString =  "ss" ;   
70.         }   
71.   
72.          return   "success" ;   
73.     }   
74.   
75.      public  String getMenuString() {   
76.          return  menuString;   
77.     }   
78.   
79.      public   void  setMenuString(String menuString) {   
80.          this .menuString = menuString;   
81.     }   
82. }   
83.   

5. menu.jsp

1. < %@ taglib  prefix = "s"   uri = "/struts-tags"  % >   
2. < s:property   value = "menuString"   escape = "false" />   

6. html页面和js
我使用的就是extjs的example中的reorder.html和reorder.js，更改了reorder.js中treeloader的dataurl： menus.action

1. < html >   
2. < head >   
3. < meta   http-equiv = "Content-Type"   content = "text/html; charset=iso-8859-1" >   
4. < title > Reorder TreePanel </ title >   
5. < link   rel = "stylesheet"   type = "text/css"   href = "extjs/resources/css/ext-all.css"   />   
6.   
7.      <!-- GC -->   
8.       <!-- LIBS -->   
9.       < script   type = "text/javascript"   src = "extjs/adapter/ext/ext-base.js" > </ script >   
10.       <!-- ENDLIBS -->   
11.     
12.      < script   type = "text/javascript"   src = "extjs/ext-all.js" > </ script >   
13. < script   type = "text/javascript"   src = "reorder.js" > </ script >   
14.   
15. <!-- Common Styles for the examples -->   
16. < link   rel = "stylesheet"   type = "text/css"   href = "extjs/resources/css/example.css"   />   
17. </ head >   
18. < body >   
19. < script   type = "text/javascript"   src = "../examples.js" > </ script > <!-- EXAMPLES -->   
20. < h1 > Drag and Drop ordering in a TreePanel </ h1 >   
21. < p > This example shows basic drag and drop node moving in a tree. In this implementation there are no restrictions and    
22. anything can be dropped anywhere except appending to nodes marked "leaf" (the files).  < br > </ p >   
23. < p > Drag along the edge of the tree to trigger auto scrolling while performing a drag and drop. </ p >   
24. < p > In order to demonstrate drag and drop insertion points, sorting was  < b > not </ b >  enabled. </ p >   
25. < p > The data for this tree is asynchronously loaded with a JSON TreeLoader. </ p >   
26. < p > The js is not minified so it is readable. See  < a   href = "reorder.js" > reorder.js </ a > . </ p >   
27.   
28. < div   id = "tree-div"   style = "overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;" > </ div >   
29.   
30. </ body >   
31. </ html >   
32.   

js:

1. /*  
2.  * Ext JS Library 2.0.1  
3.  * Copyright(c) 2006-2008, Ext JS, LLC.  
4.  * licensing@extjs.com  
5.  *  
6.  * http://extjs.com/license  
7.  */   
8.   
9. Ext.onReady( function (){   
10.      // shorthand   
11.      var  Tree = Ext.tree;   
12.       
13.      var  tree =  new  Tree.TreePanel({   
14.         el: 'tree-div' ,   
15.         autoScroll: true ,   
16.         animate: true ,   
17.         enableDD: true ,   
18.         containerScroll:  true ,   
19.         loader:  new  Tree.TreeLoader({   
20.             dataUrl: 'http://localhost:8080/lab/menus.action'   
21.         })   
22.     });   
23.   
24.      // set the root node   
25.      var  root =  new  Tree.AsyncTreeNode({   
26.         text:  'Ext JS' ,   
27.         draggable: false ,   
28.         id: 'source'   
29.     });   
30.     tree.setRootNode(root);   
31.   
32.      // render the tree   
33.     tree.render();   
34.     root.expand();   
35. });