Ztree的简单使用

1.我这里用的是struts2+Ztree.用到的lib如下：

2.首先建立一个树节点TreeNodeBean.java

1. public class TreeNodeBean { 
2.  
3.     private String id; 
4.  
5.     private String pId; 
6.  
7.     private String name; 
8.  
9.     private boolean open; 
10.  
11.     private boolean checked; 
12.  
13.      
14.  
15.     public TreeNodeBean(){}; 
16.  
17. //此处省略get set方法 
18.  
19. } 

3.接下来就是action了,TreeAction.action

1. import java.io.IOException; 
2.  
3. import java.io.PrintWriter; 
4.  
5. import java.util.ArrayList; 
6.  
7. import java.util.List; 
8.  
9.  
10.  
11. import javax.servlet.http.HttpServletResponse; 
12.  
13. import org.apache.struts2.ServletActionContext; 
14.  
15. import net.sf.json.JSONSerializer; 
16.  
17. import com.opensymphony.xwork2.ActionSupport; 
18.  
19. public class TreeAction extends ActionSupport { 
20.  
21.     private static final long serialVersionUID = 1L; 
22.  
23.     public String test(){ 
24.  
25.         System.out.println("==============test==============");      
26.  
27.         return "treejsp"; 
28.  
29.     }    
30.  
31.     public void add(){ 
32.  
33.         System.out.println("================add================="); 
34.  
35.          
36.  
37.     } 
38.  
39.      
40.  
41.     private String initTree(){ 
42.  
43.         System.out.println("==============initTree==============");      
44.  
45.         // TODO Auto-generated method stub 
46.  
47.         TreeNodeBean tnb1 = new TreeNodeBean(); 
48.  
49.         tnb1.setName("根元素1"); 
50.  
51.         tnb1.setId("1"); 
52.  
53.         tnb1.setpId("0"); 
54.  
55.         tnb1.setOpen(true); 
56.  
57. //      tnb1.setChecked(true); 
58.  
59.         TreeNodeBean tnb1_1 = new TreeNodeBean(); 
60.  
61.         tnb1_1.setName("元素1_1"); 
62.  
63.         tnb1_1.setId("1_1"); 
64.  
65.         tnb1_1.setpId("1"); 
66.  
67.         tnb1_1.setOpen(true); 
68.  
69. //      tnb1_1.setChecked(false); 
70.  
71.         TreeNodeBean tnb1_1_1 = new TreeNodeBean(); 
72.  
73.         tnb1_1_1.setName("元素1_1_1"); 
74.  
75.         tnb1_1_1.setId("1_1_1"); 
76.  
77.         tnb1_1_1.setpId("1_1"); 
78.  
79. //      tnb1_1_1.setChecked(false); 
80.  
81.          
82.  
83.         TreeNodeBean tnb1_1_2 = new TreeNodeBean(); 
84.  
85.         tnb1_1_2.setName("元素1_1_2"); 
86.  
87.         tnb1_1_2.setId("1_1_2"); 
88.  
89.         tnb1_1_2.setpId("1_1"); 
90.  
91.         TreeNodeBean tnb2 = new TreeNodeBean(); 
92.  
93.         tnb2.setName("根元素2"); 
94.  
95.         tnb2.setId("2"); 
96.  
97.         tnb2.setpId("0"); 
98.  
99.         tnb2.setOpen(true); 
100.  
101.         TreeNodeBean tnb2_2 = new TreeNodeBean(); 
102.  
103.         tnb2_2.setName("元素2_2"); 
104.  
105.         tnb2_2.setId("2_2"); 
106.  
107.         tnb2_2.setpId("2"); 
108.  
109.          
110.  
111.         List<TreeNodeBean> list = new ArrayList<TreeNodeBean>(); 
112.  
113.         list.add(tnb1); 
114.  
115.         list.add(tnb1_1); 
116.  
117.         list.add(tnb1_1_1); 
118.  
119.         list.add(tnb1_1_2); 
120.  
121.         list.add(tnb2); 
122.  
123.         list.add(tnb2_2); 
124.  
125. //      System.out.println(JSONObject.fromObject(tnb1).toString());//javaBean转换成json格式 
126.  
127. //      System.out.println(JSONObject.fromObject(list).toString());//javaBean转换成json格式 
128.  
129.         String s = JSONSerializer.toJSON(list).toString(); 
130.  
131.         System.out.println(s);//list转换成json格式        
132.  
133.         return s; 
134.  
135.     } 
136.  
137.      
138.  
139.     public void outTree(){ 
140.  
141.         System.out.println("==============outTree=============="); 
142.  
143. //      ActionContext act = ActionContext.getContext(); 
144.  
145.         HttpServletResponse response = ServletActionContext.getResponse(); 
146.  
147.         response.setContentType("text/html;charset=UTF-8"); 
148.  
149.         PrintWriter out; 
150.  
151.         try { 
152.  
153.             out = response.getWriter(); 
154.  
155.             out.print(initTree()); 
156.  
157.             out.flush(); 
158.  
159.             out.close();         
160.  
161.         } catch (IOException e) { 
162.  
163.             // TODO Auto-generated catch block 
164.  
165.             e.printStackTrace(); 
166.  
167.         } 
168.  
169.     } 
170.  
171. } 

1.   
2.  
3. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 
4.  
5. <% 
6.  
7. String path = request.getContextPath(); 
8.  
9. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
10.  
11. %> 
12.  
13.  
14.  
15. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
16.  
17. <html> 
18.  
19.   <head> 
20.  
21.     <base href="<%=basePath%>"> 
22.  
23.     <link rel="stylesheet" href="css/demo.css" type="text/css"> 
24.  
25.     <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css"> 
26.  
27.     <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> 
28.  
29.     <script type="text/javascript" src="js/jquery.ztree.core-3.4.js"></script>    
30.  
31.     <script type="text/javascript" src="js/jquery.ztree.excheck-3.4.js"></script>  
32.  
33.          
34.  
35.     <title>树的测试页面</title> 
36.  
37.      
38.  
39.     <meta http-equiv="pragma" content="no-cache"> 
40.  
41.     <meta http-equiv="cache-control" content="no-cache"> 
42.  
43.     <meta http-equiv="expires" content="0">     
44.  
45.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
46.  
47.     <meta http-equiv="description" content="This is my page"> 
48.  
49.     <!-- 
50.  
51.     <link rel="stylesheet" type="text/css" href="styles.css"> 
52.  
53.     --> 
54.  
55.     <SCRIPT type="text/javascript"> 
56.  
57.         <!-- 
58.  
59.   
60.  
61.         var setting = { 
62.  
63.             check: { 
64.  
65.                 enable: true 
66.  
67.             }, 
68.  
69.             data: { 
70.  
71.                 simpleData: { 
72.  
73.                     enable: true 
74.  
75.                 } 
76.  
77.             }, 
78.  
79.             callback: { 
80.  
81.                 onClick: onClick 
82.  
83.             }                
84.  
85.         };   
86.  
87.     function onClick(event, treeId, treeNode, clickFlag) { 
88.  
89.         alert("treeId:"+treeId+",treeNode.name:"+treeNode.name+",treeNode.checked:"+treeNode.checked); 
90.  
91.     }    
92.  
93. function r(){ 
94.  
95.     var result = $.ajax({ 
96.  
97.         url: '<%=path%>/TreeAction!outTree.action', 
98.  
99.         async: false 
100.  
101.         }).responseText; 
102.  
103.         return result; 
104.  
105. } 
106.  
107.  
108.  
109.         $(document).ready(function(){ 
110.  
111.  
112.  
113.          var zNodes = r(); 
114.  
115.          //alert(zNodes); 
116.  
117.             $.fn.zTree.init($("#treeDemo"), setting, eval('(' + zNodes + ')')); 
118.  
119.         }); 
120.  
121.         //--> 
122.  
123.        function onCheck(e,treeId,treeNode){ 
124.  
125.             var treeObj=$.fn.zTree.getZTreeObj("treeDemo"), 
126.  
127.             nodes=treeObj.getCheckedNodes(true), 
128.  
129.             v=""; 
130.  
131.             for(var i=0;i<nodes.length;i++){ 
132.  
133.             v+=nodes[i].name + ","; 
134.  
135.             alert(nodes[i].id); //获取选中节点的值 
136.  
137.             } 
138.  
139.          }   
140.  
141.        function onCheck(){ 
142.  
143.             var treeObj=$.fn.zTree.getZTreeObj("treeDemo"), 
144.  
145.             nodes=treeObj.getCheckedNodes(true), 
146.  
147.             v="", 
148.  
149.             v2=""; 
150.  
151.             for(var i=0;i<nodes.length;i++){ 
152.  
153.             v+=nodes[i].name + ","; 
154.  
155.             v2+=nodes[i].id + ","; 
156.  
157.             //alert(nodes[i].id); //获取选中节点的值 
158.  
159.             } 
160.  
161.             if(v==""){ 
162.  
163.                 alert("至少选择一个选项"); 
164.  
165.             }else{ 
166.  
167.                 alert("你选中的值为:"+v); 
168.  
169.                 alert("你选中的id为:"+v2); 
170.  
171.             } 
172.  
173.          }   
174.  
175.         function tj(){ 
176.  
177.             document.forms[0].action="<%=path%>/TreeAction!add.action"; 
178.  
179.             //document.forms[0].submit();            
180.  
181.             onCheck(); 
182.  
183.         } 
184.  
185.          
186.  
187.     </SCRIPT> 
188.  
189.   </head> 
190.  
191.    
192.  
193.   <body> 
194.  
195.   <h1>treejsp.jsp测试页面</h1> 
196.  
197.     <form action="#"> 
198.  
199.     <div style="height:80px;">  
200.  
201.             <div id="treeDemo" class="ztree"></div> 
202.  
203.             <input type="button" value="提交"/> 
204.  
205.     </div> 
206.  
207.     </form> 
208.  
209.   </body> 
210.  
211. </html>