easyui tree 对节点进行添加、修改、删除操作。

1. Tree的初始化

           由页面静态加载的，大家都知道了，easyui API也有，我就不再赘述了，这里主要是怎么通过ajax后台请求数据，并生成tree。

        我们一般都是会配合一个登录系统来实现，用户登录之后会出现tree的页面，在页面初始化的时候加载tree，就需要onload时间来实现，或者使用jQuery的$(function (){})；也能实现。

        代码如下：

1. $(function () {
2. // 登录成功提示
3. $.messager.show({
4. title : '提示',
5. msg : "登录成功"
6. });
7. // 一下添加tree代码
9.  });

这样当页面元素加载完成就会调用function，这时在里面加上tree的加载就行。

(1). 树的请求数据      

1. // 实例化树菜单
2. $("#tree").tree({
3. url:'getNodesById.do?id=1',// 请求路径
4. onLoadSuccess:function(node,data){// 成功加载树之后的操作
5. var tree = $(this);
6. if(data){
7. $(data).each(function(index,d) {// 遍历生成节点
8. if (this.state=='closed') {
9. tree.tree('expandAll');
10. }
11. });
12. }
13. }
15. });

上面的代码就是简单的加载tree的方法，其中url就是请求路径，在这里会根据url去同后台进行交互，后台只要组装好数据，response后前天就行。

(2)   后台请求并组装json数据       Java代码实现如下；

1. /**
2. * 初始化所有的树形节点
3. * @throws UnsupportedEncodingException
4. */
5. @RequestMapping(value="/getNodesById")
6. public void getNodesById(@RequestParam int id ,HttpServletRequest request,HttpServletResponse response) throws UnsupportedEncodingException{
7. request.setCharacterEncoding("utf-8");
8. response.setCharacterEncoding("utf-8");
9. System.out.println("kaishi");
10. String str ="";
11. StringBuilder json = new StringBuilder();
13. // 获得根节点
14. Tree treeRoot = treeService.getNodeById(id);
15. // 拼接根节点
16. json.append("[");
17. json.append("{\"id\":" +String.valueOf(treeRoot.getId()));
18. json.append(",\"text\":\"" +treeRoot.getText() + "\"");
19. json.append(",\"state\":\"open\"");
20. // 获取根节点下的所有子节点
21. List<Tree> treeList = treeService.getNodesById(id);
22. // 遍历子节点下的子节点
23. if(treeList!=null && treeList.size()!=0){
24. json.append(",\"children\":[");
25. for (Tree t : treeList) {
27. json.append("{\"id\":" +String.valueOf(t.getId()));
28. json.append(",\"text\":\"" +t.getText() + "\"");
29. json.append(",\"state\":\"open\"");
31. // 该节点有子节点
32. // 设置为关闭状态,而从构造异步加载tree
34. List<Tree> tList = treeService.getNodesById(t.getId());
35. if(tList!=null && tList.size()!=0){// 存在子节点
36. json.append(",\"children\":[");
37. json.append(dealJsonFormat(tList));// 存在子节点的都放在一个工具类里面处理了
38. json.append("]");
39. }
40. json.append("},");
41. }
42. str = json.toString();
43. str = str.substring(0, str.length()-1);
44. str+="]}]";
46. }
47. try {
49. System.out.println("输出json数据"+str);
50. response.getWriter().print(str);
51. } catch (IOException e) {
52. e.printStackTrace();
53. }
54. }
58. /**
59.      * 处理数据集合，将数据集合转为符合格式的json
60.      * @param tList 参数
61.      * @return json字符串
62.      */
63.     public String dealJsonFormat(List<Tree> tList){
64.         StringBuilder json = new StringBuilder();
65.         for (Tree tree : tList) {
66.             json.append("{\"id\":" +String.valueOf(tree.getId()));
67.             json.append(",\"text\":\"" +tree.getText() + "\"");
68.             json.append(",\"attributes\":\""+tree.getAttributes()+"\"");
69.             json.append("},");
70.         }
71.         String str = json.toString();
72.         str = str.substring(0, str.length()-1);
73.         
74.         System.out.println("---------"+str);
75.         return str;
76.     }

1. // 输出的json格式
3. [
4. {
5. "id": 1,
6. "text": "功能菜单",
7. "state": "open",
8. "children": [
9. {
10. "id": 2,
11. "text": "北京",
12. "state": "open",
13. "children": [
14. {
15. "id": 4,
16. "text": "北京IOP数据",
17. "attributes": "showAreaList.do?"
18. },
19. {
20. "id": 5,
21. "text": "北京虚拟机数据",
22. "attributes": "showAreaList.do?"
23. }
24. ]
25. },
26. {
27. "id": 3,
28. "text": "上海",
29. "state": "open",
30. "children": [
31. {
32. "id": 6,
33. "text": "上海IOP数据",
34. "attributes": "showAreaList.do?"
35. },
36. {
37. "id": 7,
38. "text": "上海虚拟机数据",
39. "attributes": "showAreaList.do?"
40. }
41. ]
42. }
43. ]
44. }
45. ]

上面就是输出的json格式，这样返回到前端就可以生成tree了。

2. 节点的增删改

             这个我没有研究出来直接在添加修改时，焦点聚焦到选中的节点，使用了另外一种方法，使用easyui的dialog弹出窗来实现的，这个不要见笑了。

这样实现，就能轻易的获取节点的内容了，之后就是提交事件触发ajax请求后台数据了。

(1) 右键菜单功能

就是简单的创建一个div，这个菜单引入easyui的样式就行。这里定义id是为了方便判断选中的是添加，修改，删除中的哪一个。

html:

1. <div id="tabsMenu" class="easyui-menu" style="width:120px;">
2. <div name="close" id="1">添加</div>
3. <div name="Other" id="2">修改</div>
4. <div name="All" id="3">删除</div>
5. </div>

千万别再这里面创建onclick事件，tree里面已经提供了现成的方法。

1. // 实例化树菜单
2. $("#tree").tree({
3. url:'getNodesById.do?id=1',
4. onLoadSuccess:function(node,data){// 加载树
5. var tree = $(this);
6. if(data){
7. $(data).each(function(index,d) {
8. if (this.state=='closed') {
9. tree.tree('expandAll');
10. }
11. });
12. }
13. }
14. onContextMenu: function(e,node){// 生成右键菜单
15. e.preventDefault();
16. $(this).tree('select',node.target);
17. $('#tabsMenu').menu('show',{
18. left: e.pageX,
19. top: e.pageY
20. });
21. $('#tabsMenu').menu({
22. onClick:function(item){ // 根据选择的id判断选中的是添加，修改，还是删除
23. if(item.id==1){// 添加
24. document.getElementById("mydialog").title = "添加节点";
25. var node = $("#tree").tree('getSelected');
26. document.getElementById("txRolename").value = "";
27. alert(node.text);
28. $('#mydialog').show(); // 弹出框显示
29. $('#mydialog').dialog({
30. collapsible: true,
31. minimizable: true,
32. maximizable: true,
34. buttons: [{
35. text: '提交',
36. iconCls: 'icon-ok',
37. handler: function() {
38. $.ajax({
39. url : "addTreeNode.do",
40. type : "post",
41. async : false,
42. data : "area="+$("#txRolename").val()+"&pid="+node.id,
43. dataType:"json",
44. success : function(data) {
45. loadTree();
46. $('#mydialog').dialog('close');
47. }
49. });
50. }
51. }, {
52. text: '取消',
53. handler: function() {
54. $('#mydialog').dialog('close');
55. }
56. }]
57. });
59. }else if(item.id==2){// 修改
60. var node = $("#tree").tree('getSelected');
61. document.getElementById("mydialog").title = "修改节点";
62. document.getElementById("txRolename").value = node.text;
63. $('#mydialog').show();
64. $('#mydialog').dialog({
65. collapsible: true,
66. minimizable: true,
67. maximizable: true,
69. buttons: [{
70. text: '提交',
71. iconCls: 'icon-ok',
72. handler: function() {
74. $.ajax({
75. url : "updTreeNode.do",
76. type : "post",
77. async : false,
78. data : "area="+$("#txRolename").val()+"&id="+node.id,
79. dataType:"json",
80. success : function(data) {
81. loadTree();
82. $('#mydialog').dialog('close');
83. }
85. });
86. }
87. }, {
88. text: '取消',
89. handler: function() {
90. $('#mydialog').dialog('close');
91. }
92. }]
93. });
95. }else if(item.id==3){// 删除
96. var node = $("#tree").tree('getSelected');
97. $('#mydialogtemp').show();
98. $('#mydialogtemp').dialog({
99. collapsible: true,
100. minimizable: true,
101. maximizable: true,
103. buttons: [{
104. text: '提交',
105. iconCls: 'icon-ok',
106. handler: function() {
107. alert('提交数据');
108. $.ajax({
109. url : "delTreeNode.do",
110. type : "post",
111. async : false,
112. data :"id="+node.id,
113. dataType:"json",
114. success : function(data) {
115. loadTree();
116. $('#mydialogtemp').dialog('close');
117. }
119. });
120. }
121. }, {
122. text: '取消',
123. handler: function() {
124. $('#mydialog').dialog('close');
125. }
126. }]
127. });
129. }
130. }
131. });
134. }
136. });

这样就可以实现右键功能了，我这里顺便把增删改写上了。这点简单相信大家都能看懂，接下来的事情就是与后台交互了，这里就不在赘述了。添加，修改，删除之后，别忘记重新加载一下树。

1. // 加载树
2. function loadTree(){
3. $("#tree").tree({
4. url:'getNodesById.do?id=1',
5. onLoadSuccess:function(node,data){
6. var tree = $(this);
7. if(data){
8. $(data).each(function(index,d) {
9. if (this.state=='closed') {
10. tree.tree('expandAll');
11. }
12. });
13. }
14. }});
15. }

3. 叶子节点点击事件

主要是使用ifream来加载一个新的页面

1. // 实例化树菜单
2. $("#tree").tree({
3. url:'getNodesById.do?id=1',
4. onLoadSuccess:function(node,data){// 加载树
5. var tree = $(this);
6. if(data){
7. $(data).each(function(index,d) {
8. if (this.state=='closed') {
9. tree.tree('expandAll');
10. }
11. });
12. }
13. },
15. onClick:function(node){// 添加tab
16. if(node.attributes){
17. node1=$("#tree").tree('getParent',node.target);
18. openTab(node.text,node.attributes,node1.text);
19. }
20. }
21. });
22.  // 新增Tab
23. function openTab(text,url,text1){
25. if($("#tabs").tabs('exists',text)){
26. $("#tabs").tabs('select',text);
27. }else{
28. url = url+"area="+text1;
29. alert(url);
30. var content="<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="+url+"></iframe>";
31. $("#tabs").tabs('add',{
32. title:text,
33. closable:true,
34. content:content
35. });
36. }
37. }
39. });

然后后台代码指向新页面，这样就会加载进去了。

前端HTML代码

1. <%@ page language="java" pageEncoding="UTF-8"%>
2. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
3. <%
4. String path = request.getContextPath();
5. %>
6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
7. <html xmlns="http://www.w3.org/1999/xhtml">
8. <head>
9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10. <script src="js/jquery-easyui-1.4.1/jquery.min.js"></script>
11. <script src="js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
12. <link href="js/jquery-easyui-1.4.1/themes/default/easyui.css" rel="stylesheet"/>
13. <link href="js/jquery-easyui-1.4.1/themes/icon.css" rel="stylesheet" />
14. <script src="js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
15. <script >
16. var node1;
17. $(function () {
18. // 登录成功提示
19. $.messager.show({
20. title : '提示',
21. msg : "登录成功"
22. });
25. // 实例化树菜单
26. $("#tree").tree({
27. url:'getNodesById.do?id=1',
28. onLoadSuccess:function(node,data){// 加载树
29. var tree = $(this);
30. if(data){
31. $(data).each(function(index,d) {
32. if (this.state=='closed') {
33. tree.tree('expandAll');
34. }
35. });
36. }
37. },
39. onClick:function(node){// 添加tab
40. if(node.attributes){
41. node1=$("#tree").tree('getParent',node.target);
42. openTab(node.text,node.attributes,node1.text);
43. }
44. },
45. onContextMenu: function(e,node){// 生成右键菜单
46. e.preventDefault();
47. $(this).tree('select',node.target);
48. $('#tabsMenu').menu('show',{
49. left: e.pageX,
50. top: e.pageY
51. });
52. $('#tabsMenu').menu({
53. onClick:function(item){
54. if(item.id==1){// 添加
55. document.getElementById("mydialog").title = "添加节点";
56. var node = $("#tree").tree('getSelected');
57. document.getElementById("txRolename").value = "";
58. alert(node.text);
59. $('#mydialog').show();
60. $('#mydialog').dialog({
61. collapsible: true,
62. minimizable: true,
63. maximizable: true,
65. buttons: [{
66. text: '提交',
67. iconCls: 'icon-ok',
68. handler: function() {
69. $.ajax({
70. url : "addTreeNode.do",
71. type : "post",
72. async : false,
73. data : "area="+$("#txRolename").val()+"&pid="+node.id,
74. dataType:"json",
75. success : function(data) {
76. loadTree();
77. $('#mydialog').dialog('close');
78. }
80. });
81. }
82. }, {
83. text: '取消',
84. handler: function() {
85. $('#mydialog').dialog('close');
86. }
87. }]
88. });
90. }else if(item.id==2){// 修改
91. var node = $("#tree").tree('getSelected');
92. document.getElementById("mydialog").title = "修改节点";
93. document.getElementById("txRolename").value = node.text;
94. $('#mydialog').show();
95. $('#mydialog').dialog({
96. collapsible: true,
97. minimizable: true,
98. maximizable: true,
100. buttons: [{
101. text: '提交',
102. iconCls: 'icon-ok',
103. handler: function() {
105. $.ajax({
106. url : "updTreeNode.do",
107. type : "post",
108. async : false,
109. data : "area="+$("#txRolename").val()+"&id="+node.id,
110. dataType:"json",
111. success : function(data) {
112. loadTree();
113. $('#mydialog').dialog('close');
114. }
116. });
117. }
118. }, {
119. text: '取消',
120. handler: function() {
121. $('#mydialog').dialog('close');
122. }
123. }]
124. });
126. }else if(item.id==3){// 删除
127. var node = $("#tree").tree('getSelected');
128. $('#mydialogtemp').show();
129. $('#mydialogtemp').dialog({
130. collapsible: true,
131. minimizable: true,
132. maximizable: true,
134. buttons: [{
135. text: '提交',
136. iconCls: 'icon-ok',
137. handler: function() {
138. alert('提交数据');
139. $.ajax({
140. url : "delTreeNode.do",
141. type : "post",
142. async : false,
143. data :"id="+node.id,
144. dataType:"json",
145. success : function(data) {
146. loadTree();
147. $('#mydialogtemp').dialog('close');
148. }
150. });
151. }
152. }, {
153. text: '取消',
154. handler: function() {
155. $('#mydialog').dialog('close');
156. }
157. }]
158. });
160. }
161. }
162. });
165. }
167. });
169. // 加载树
170. function loadTree(){
171. $("#tree").tree({
172. url:'getNodesById.do?id=1',
173. onLoadSuccess:function(node,data){
174. var tree = $(this);
175. if(data){
176. $(data).each(function(index,d) {
177. if (this.state=='closed') {
178. tree.tree('expandAll');
179. }
180. });
181. }
182. }});
183. }
185. // 新增Tab
186. function openTab(text,url,text1){
188. if($("#tabs").tabs('exists',text)){
189. $("#tabs").tabs('select',text);
190. }else{
191. url = url+"area="+text1;
192. alert(url);
193. var content="<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="+url+"></iframe>";
194. $("#tabs").tabs('add',{
195. title:text,
196. closable:true,
197. content:content
198. });
199. }
200. }
202. });
204. // 注销系统
205. function getOut(){
206. window.location.href ="<%=path%>/getOut.do";
207. }
210. </script>
212. <style>
214. article, aside, figure, footer, header, hgroup,
215. menu, nav, section { display: block; }
217. .west{
219. width:200px;
221. padding:10px;
223. }
225. .north{
227. height:75px;
229. }
230. .south{
231. height:50px;
232. }
233. </style>
235. </head>
236. <body class="easyui-layout">
237. <div region="north" class="north" style="background:url('image/autelan.png') no-repeat;">
239. <div style="float:right;font-size: 15px;height:60px;text-align: center;padding-right: 20px;padding-bottom: 10px;">
240. 欢迎<span style="color:red">${sessionScope.user.username}</span>登陆
241. <a href="#" onclick="getOut()">
242. <img src="image/exit.png"/>注销</a>
243. <a href="javascript:history.go(-1);">
244. <img src="image/nav_back.gif" />后退</a>
245. <a href="javascript:history.go(1);">
246. <img src="image/nav_forward.gif" />前进
247. </a>
248. </div>
249. </div>
250. <div region="center" title="数据管理">
251. <div class="easyui-tabs" fit="true" border="false" id="tabs">
253. </div>
254. </div>
255. <div region="west" class="west" title="导航菜单">
256. <ul id="tree"></ul>
257. </div>
258. <div region="south" class="south" style="text-align: center">
259. 版权所有@-----------------------翻版必究
260. </div>
262. <div id="tabsMenu" class="easyui-menu" style="width:120px;">
263. <div name="close" id="1">添加</div>
264. <div name="Other" id="2">修改</div>
265. <div name="All" id="3">删除</div>
266. </div>
268. <div id="mydialog" style="display:none;padding:5px;width:400px;height:100px;">
269. <label class="lbInfo">节点名称：</label>
270. <input id="txRolename" type="text" class="easyui-validatebox" required="true" /><br />
271. </div>
273. <div id="mydialogtemp" style="display:none;padding:5px;width:400px;height:100px;" title="删除节点">
274. 你确定要删除该节点？删除的同时会将该节点下的所有子节点删除！
275. </div>
276. </body>
277. </html>

后台Java代码

1. package com.chenqk.springmvc.controller;
4. import java.io.IOException;
5. import java.io.UnsupportedEncodingException;
6. import java.util.List;
8. import javax.servlet.http.HttpServletRequest;
9. import javax.servlet.http.HttpServletResponse;
12. import org.apache.log4j.Logger;
14. import org.springframework.beans.factory.annotation.Autowired;
15. import org.springframework.beans.factory.annotation.Qualifier;
16. import org.springframework.stereotype.Controller;
17. import org.springframework.web.bind.annotation.RequestMapping;
18. import org.springframework.web.bind.annotation.RequestParam;
21. import com.chenqk.springmvc.service.TreeService;
22. import com.chenqk.springmvc.entity.Tree;
23. /**
24. * 控制类
25. * @author chenqk
26. *
27. */
28. @Controller
29. @RequestMapping("/")
30. public class TreeController{
33. @Autowired
34. @Qualifier("TreeService")
35. private TreeService treeService;
37. private static Logger logger = Logger.getLogger(TreeController.class);
40. /**
41. * 初始化所有的树形节点
42. * @throws UnsupportedEncodingException
43. */
44. @RequestMapping(value="/getNodesById")
45. public void getNodesById(@RequestParam int id ,HttpServletRequest request,HttpServletResponse response) throws UnsupportedEncodingException{
46. request.setCharacterEncoding("utf-8");
47. response.setCharacterEncoding("utf-8");
48. System.out.println("kaishi");
49. String str ="";
50. StringBuilder json = new StringBuilder();
52. // 获得根节点
53. Tree treeRoot = treeService.getNodeById(id);
54. // 拼接根节点
55. json.append("[");
56. json.append("{\"id\":" +String.valueOf(treeRoot.getId()));
57. json.append(",\"text\":\"" +treeRoot.getText() + "\"");
58. json.append(",\"state\":\"open\"");
59. // 获取根节点下的所有子节点
60. List<Tree> treeList = treeService.getNodesById(id);
61. // 遍历子节点下的子节点
62. if(treeList!=null && treeList.size()!=0){
63. json.append(",\"children\":[");
64. for (Tree t : treeList) {
66. json.append("{\"id\":" +String.valueOf(t.getId()));
67. json.append(",\"text\":\"" +t.getText() + "\"");
68. json.append(",\"state\":\"open\"");
70. // 该节点有子节点
71. // 设置为关闭状态,而从构造异步加载tree
73. List<Tree> tList = treeService.getNodesById(t.getId());
74. if(tList!=null && tList.size()!=0){// 存在子节点
75. json.append(",\"children\":[");
76. json.append(dealJsonFormat(tList));// 存在子节点的都放在一个工具类里面处理了
77. json.append("]");
78. }
79. json.append("},");
80. }
81. str = json.toString();
82. str = str.substring(0, str.length()-1);
83. str+="]}]";
85. }
86. try {
88. System.out.println("输出json数据"+str);
89. response.getWriter().print(str);
90. } catch (IOException e) {
91. e.printStackTrace();
92. }
93. }
95. /**
96. * 添加新节点
97. * @param area 节点名称
98. * @param pid 父节点id
99. * @param request
100. * @param response
101. */
102. @RequestMapping(value="/addTreeNode")
103. public void addTreeNode(@RequestParam String area,String pid,HttpServletRequest request,HttpServletResponse response){
104. System.out.println("area="+area+",pid="+pid);
105. Tree tree = new Tree();
106. tree.setPid(Integer.parseInt(pid));
107. tree.setText(area);
108. tree.setAttributes("showAreaList.do?");
109. treeService.addTreeNode(tree);
110. try {
111. this.getNodesById(1, request, response);
112. } catch (IOException e) {
113. e.printStackTrace();
114. }
115. }
117. /**
118. * 修改节点名称
119. * @param area 节点名称
120. * @param id 节点id
121. * @param request
122. * @param response
123. */
124. @RequestMapping(value="/updTreeNode")
125. public void updTreeNode(@RequestParam String area,String id,HttpServletRequest request,HttpServletResponse response){
126. Tree tree = new Tree();
127. tree.setId(Integer.parseInt(id));
128. tree.setText(area);
129. treeService.updTreeNode(tree);
130. try {
131. this.getNodesById(1, request, response);
132. } catch (IOException e) {
133. e.printStackTrace();
134. }
136. }
138. /**
139. * 删除节点
140. * @param id 节点id
141. * @param pid
142. * @param request
143. * @param response
144. */
145. @RequestMapping(value="/delTreeNode")
146. public void delTreeNode(@RequestParam String id,HttpServletRequest request,HttpServletResponse response){
147. treeService.delTreeNode(Integer.parseInt(id));
148. try {
149. this.getNodesById(1, request, response);
150. } catch (IOException e) {
151. e.printStackTrace();
152. }
154. }
156. /**
157. * 处理数据集合，将数据集合转为符合格式的json
158. * @param tList 参数
159. * @return json字符串
160. */
161. public String dealJsonFormat(List<Tree> tList){
162. StringBuilder json = new StringBuilder();
163. for (Tree tree : tList) {
164. json.append("{\"id\":" +String.valueOf(tree.getId()));
165. json.append(",\"text\":\"" +tree.getText() + "\"");
166. json.append(",\"attributes\":\""+tree.getAttributes()+"\"");
167. json.append("},");
168. }
169. String str = json.toString();
170. str = str.substring(0, str.length()-1);
172. System.out.println("---------"+str);
173. return str;
174. }
177. public TreeService getTreeService() {
178. return treeService;
179. }
181. public void setTreeService(TreeService treeService) {
182. this.treeService = treeService;
183. }
185. }