【转】Struts2 JSON 2

核心提示：最近尝试用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

2. 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">
7. index.jsp
10. struts2
11. org.apache.struts2.dispatcher.FilterDispatcher
15. struts2
16. /*

然后是struts.xml

3.     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
4.     "http://struts.apache.org/dtds/struts-2.0.dtd">
11. /menu.jsp

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 children;  
7. }  

4. action

1. package com.lab;  
3. import java.util.ArrayList;  
4. import java.util.List;  
6. import net.sf.json.JSONArray;  
8. public class MenuAction {  
9. private String menuString;  
11. private List menus;  
13. public String execute() {  
15.         menus = new ArrayList ();  
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);  
24.         List benzList = new ArrayList ();  
25.         benz.setChildren(benzList);  
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);  
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);  
48.         List bmwList = new ArrayList ();  
49.         bmw.setChildren(bmwList);  
51.         menu = new Menu();  
52.         menu.setText("325i");  
53.         menu.setCls("file");  
54.         menu.setLeaf(true);  
55.         menu.setId(21);  
56.         bmwList.add(menu);  
58.         menu = new Menu();  
59.         menu.setText("X5");  
60.         menu.setCls("file");  
61.         menu.setLeaf(true);  
62.         menu.setId(22);  
63.         bmwList.add(menu);  
65.         JSONArray jsonObject = JSONArray.fromObject(menus);  
66. try {  
67.             menuString = jsonObject.toString();  
68.         } catch (Exception e) {  
69.             menuString = "ss";  
70.         }  
72. return "success";  
73.     }  
75. public String getMenuString() {  
76. return menuString;  
77.     }  
79. public void setMenuString(String menuString) {  
80. this.menuString = menuString;  
81.     }  
82. }  

5. menu.jsp

1. <%@ taglib prefix="s" uri="/struts-tags" %>

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

5. rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
9. <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
12. <script type="text/javascript" src="extjs/ext-all.js"></script>
13. <script type="text/javascript" src="reorder.js"></script>
16. rel="stylesheet" type="text/css" href="extjs/resources/css/example.css" />
19. <script type="text/javascript" src="../examples.js"></script>

20. Drag and Drop ordering in a TreePanel

21. 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).
    

23. Drag along the edge of the tree to trigger auto scrolling while performing a drag and drop.

24. In order to demonstrate drag and drop insertion points, sorting was not enabled.

25. The data for this tree is asynchronously loaded with a JSON TreeLoader.

26. The js is not minified so it is readable. See reorder.js.

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. */
9. Ext.onReady(function(){  
10. // shorthand
11. var Tree = Ext.tree;  
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.     });  
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);  
32. // render the tree
33.     tree.render();  
34.     root.expand();  
35. });  

源码下载：http://ajava.org/code/menu/14589.html

看过此文的读者还看过：
Extjs Tree + JSON + Struts2 例子
Extjs Tree + JSON + Struts2 示例源代码(下载)

本文内容搜集于互联网，如有侵犯你的权利，请来信告知。