1：数据库设计

数据库环境：MySQL数据库

数据库名：temp

表名：tree

/*
Navicat MySQL Data Transfer

Source Server         : MySQL
Source Server Version : 50517
Source Host           : localhost:3306
Source Database       : temp

Target Server Type    : MYSQL
Target Server Version : 50517
File Encoding         : 65001

Date: 2012-12-21 20:28:15
*/

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for `tree`
-- ----------------------------
DROP TABLE IF EXISTS `tree`;
CREATE TABLE `tree` (
  `NodeId` int(11) NOT NULL AUTO_INCREMENT,
  `NodeName` varchar(8) DEFAULT NULL,
  `ParentNodeId` int(11) NOT NULL,
  PRIMARY KEY (`NodeId`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of tree
-- ----------------------------
INSERT INTO `tree` VALUES ('1', 'A', '-1');
INSERT INTO `tree` VALUES ('2', 'B', '-1');
INSERT INTO `tree` VALUES ('3', 'E', '2');
INSERT INTO `tree` VALUES ('4', 'K', '1');
INSERT INTO `tree` VALUES ('5', 'E', '4');
INSERT INTO `tree` VALUES ('8', 'F', '5');
INSERT INTO `tree` VALUES ('9', 'K', '3');

2：开发环境

MyEclipse+Tomcat

3：项目工程：Web Project

需要导入的包：

mysql-connector-java-5.1.22.jar

struts2-dojo-plugin-2.1.8.1.jar

struts2-core-2.1.8.1.jar

xwork-core-2.1.6.jar

ognl-2.7.3.jar

freemarker-2.3.15.jar

commons-logging-1.0.4.jar

commons-fileupload-1.2.1.jar

4：源码

（1）Node.java

package com.entity;

public class Node {
	private int nodeId;
	private String nodeName;
	private int parentNodeId;
	private Node[] children;
	
	public int getNodeId() {
		return nodeId;
	}
	public void setNodeId(int nodeId) {
		this.nodeId = nodeId;
	}
	public String getNodeName() {
		return nodeName;
	}
	public void setNodeName(String nodeName) {
		this.nodeName = nodeName;
	}
	public int getParentNodeId() {
		return parentNodeId;
	}
	public void setParentNodeId(int parentNodeId) {
		this.parentNodeId = parentNodeId;
	}
	public Node[] getChildren() {
		return children;
	}
	public void setChildren(Node[] children) {
		this.children = children;
	}
}

（2）DBConnection.java

package com.entity;

public class Node {
	private int nodeId;
	private String nodeName;
	private int parentNodeId;
	private Node[] children;
	
	public int getNodeId() {
		return nodeId;
	}
	public void setNodeId(int nodeId) {
		this.nodeId = nodeId;
	}
	public String getNodeName() {
		return nodeName;
	}
	public void setNodeName(String nodeName) {
		this.nodeName = nodeName;
	}
	public int getParentNodeId() {
		return parentNodeId;
	}
	public void setParentNodeId(int parentNodeId) {
		this.parentNodeId = parentNodeId;
	}
	public Node[] getChildren() {
		return children;
	}
	public void setChildren(Node[] children) {
		this.children = children;
	}
}

（3）TreeService.java

package com.entity;

public class Node {
	private int nodeId;
	private String nodeName;
	private int parentNodeId;
	private Node[] children;
	
	public int getNodeId() {
		return nodeId;
	}
	public void setNodeId(int nodeId) {
		this.nodeId = nodeId;
	}
	public String getNodeName() {
		return nodeName;
	}
	public void setNodeName(String nodeName) {
		this.nodeName = nodeName;
	}
	public int getParentNodeId() {
		return parentNodeId;
	}
	public void setParentNodeId(int parentNodeId) {
		this.parentNodeId = parentNodeId;
	}
	public Node[] getChildren() {
		return children;
	}
	public void setChildren(Node[] children) {
		this.children = children;
	}
}

（4）TreeAction.java

package com.entity;

public class Node {
	private int nodeId;
	private String nodeName;
	private int parentNodeId;
	private Node[] children;
	
	public int getNodeId() {
		return nodeId;
	}
	public void setNodeId(int nodeId) {
		this.nodeId = nodeId;
	}
	public String getNodeName() {
		return nodeName;
	}
	public void setNodeName(String nodeName) {
		this.nodeName = nodeName;
	}
	public int getParentNodeId() {
		return parentNodeId;
	}
	public void setParentNodeId(int parentNodeId) {
		this.parentNodeId = parentNodeId;
	}
	public Node[] getChildren() {
		return children;
	}
	public void setChildren(Node[] children) {
		this.children = children;
	}
}

（5）db.properties

driver=com.mysql.jdbc.Driver
url=jdbc\:mysql\://localhost\:3306/temp
username=root
password=123456

（6）struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
	<package name="default" namespace="/" extends="struts-default">
		<action name="DisplayTree" class="com.action.TreeAction"
			method="displayTree">
			<result>tree.jsp</result>
		</action>
		
		<action name="DisplayNode" class="com.action.TreeAction"
			method="displayNode">
			<result>node.jsp</result>
		</action>
		
		<action name="UpdateNode" class="com.action.TreeAction"
			method="updateNode">
			<result type="redirect">DisplayTree.action</result>
		</action>
		
		<action name="AddChild" class="com.action.TreeAction"
			method="addChild">
			<result>child.jsp</result>
		</action>
		
		<action name="SaveTreeNode" class="com.action.TreeAction"
			method="saveTreeNode">
			<result name="input">child.jsp</result>
			<result type="redirect">DisplayTree.action</result>
		</action>
		
		<action name="DeleteNode" class="com.action.TreeAction"
			method="deleteNode">
			<result type="redirect">DisplayTree.action</result>
		</action>
	</package>
</struts>

（7）tree.jsp

View Code 
  1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2 <%
  3 String path = request.getContextPath();
  4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5 %>
  6 <%@ taglib prefix="s" uri="/struts-tags" %>
  7 <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
  8 
  9 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 10 <html>
 11 <head>
 12 <base href="<%=basePath%>">
 13 
 14 <title>Tree</title>
 15 <meta http-equiv="pragma" content="no-cache">
 16 <meta http-equiv="cache-control" content="no-cache">
 17 <meta http-equiv="expires" content="0">
 18 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 19 <meta http-equiv="description" content="This is my page">
 20 <sx:head />
 21 
 22 <script language="JavaScript" type="text/javascript">
 23     
 24     var req;
 25     function createXMLHttpRequest() {
 26         if (window.ActiveXObject) {
 27             req = new ActiveXObject("Microsoft.XMLHTTP");
 28         } else if (window.XMLHttpRequest) {
 29             req = new XMLHttpRequest();
 30         }
 31     }
 32 
 33     function updateButton() {
 34         var nodeNameText = node.nodeName;
 35         nodeNameText.readOnly = false;
 36         nodeNameText.focus();
 37         var btn1 = node.update;
 38         var btn2 = node.executeUpdate;
 39         var btn3 = node.addChild;
 40         var btn4 = node.deleteNode;
 41         btn1.style.display = "none";
 42         btn2.style.display = "block";
 43         btn3.style.display = "none";
 44         btn4.style.display = "none";
 45     }
 46     function updateNode() {
 47         var nodeIdText = node.nodeId;
 48         var nodeNameText = node.nodeName;
 49         var nodeParentIdText = node.parentNodeId;
 50         nodeNameText.readOnly = true;
 51         var btn1 = node.update;
 52         var btn2 = node.executeUpdate;
 53         var btn3 = node.addChild;
 54         var btn4 = node.deleteNode;
 55         btn1.style.display = "block";
 56         btn2.style.display = "none";
 57         btn3.style.display = "block";
 58         btn4.style.display = "block";
 59 
 60         window.location.href = "UpdateNode.action?nodeId=" + nodeIdText.value + "&nodeName=" + nodeNameText.value + "&parentNodeId=" + nodeParentIdText.value;
 61     }
 62     function add(){
 63         var nodeIdText = node.nodeId;
 64         createXMLHttpRequest();
 65         var url = "AddChild.action?nodeId=" + nodeIdText.value;
 66         req.onreadystatechange = callbackfunc;
 67         req.open("GET", url, true);
 68         req.send(null);
 69     }
 70     function callbackfunc(){
 71         if(req.readyState == 4){
 72             if(req.status == 200){
 73                 var resultStr = req.responseText;
 74                 var divDisplay = document.getElementById("showDiv");
 75                 divDisplay.innerHTML = "";
 76                 divDisplay.innerHTML = resultStr;
 77             }
 78         }
 79     }
 80     function deletefunc(){
 81         if(confirm("确认要删除该节点？")==1){
 82             var nodeIdText = node.nodeId;
 83             window.location.href = "DeleteNode.action?nodeId=" + nodeIdText.value;
 84         }
 85         else{
 86             return false;
 87         }
 88     }
 89 </script>
 90 </head>
 91 
 92 <body>
 93     <script language="JavaScript">
 94         function treeNodeSelected(node){
 95             //如果有子节点则展开
 96             if(node.node.children.length > 0){
 97                 node.node.expand();
 98             }
 99             //绑定节点的动作，以及处理请求返回的结果数据data
100             dojo.io.bind({
101                 url : "<s:url value='DisplayNode.action'/>?nodeId="
102                     + node.node.widgetId,
103                 load : function(type, data, evt) {
104                         var divDisplay = dojo.byId("showDiv");
105                         divDisplay.innerHTML = "";
106                         divDisplay.innerHTML = data;
107                     },
108                 mimeType : "text/html"
109             });
110         }
111         /*订阅选择节点后发布的主题*/
112         dojo.event.topic.subscribe("treeSelected", treeNodeSelected);
113     </script>
114     <fieldset style="height:500px; overflow:auto;" width="50%">
115         <legend>动态树展示</legend>
116         <div style="float:left; margin-right:50px;">
117             <sx:tree id="treeId" rootNode="root" 
118                 childCollectionProperty="children" 
119                 nodeIdProperty="nodeId"
120                 nodeTitleProperty="nodeName"
121                 treeSelectedTopic="treeSelected">
122             </sx:tree>
123         </div>
124         <!--用于回显返回的页面-->
125         <div style="float: left" id="showDiv"></div>    
126     </fieldset>
127 </body>
128 </html>

 

（8）node.jsp

View Code 
  1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2 <%
  3 String path = request.getContextPath();
  4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5 %>
  6 <%@ taglib prefix="s" uri="/struts-tags" %>
  7 <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
  8 
  9 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 10 <html>
 11 <head>
 12 <base href="<%=basePath%>">
 13 
 14 <title>Tree</title>
 15 <meta http-equiv="pragma" content="no-cache">
 16 <meta http-equiv="cache-control" content="no-cache">
 17 <meta http-equiv="expires" content="0">
 18 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 19 <meta http-equiv="description" content="This is my page">
 20 <sx:head />
 21 
 22 <script language="JavaScript" type="text/javascript">
 23     
 24     var req;
 25     function createXMLHttpRequest() {
 26         if (window.ActiveXObject) {
 27             req = new ActiveXObject("Microsoft.XMLHTTP");
 28         } else if (window.XMLHttpRequest) {
 29             req = new XMLHttpRequest();
 30         }
 31     }
 32 
 33     function updateButton() {
 34         var nodeNameText = node.nodeName;
 35         nodeNameText.readOnly = false;
 36         nodeNameText.focus();
 37         var btn1 = node.update;
 38         var btn2 = node.executeUpdate;
 39         var btn3 = node.addChild;
 40         var btn4 = node.deleteNode;
 41         btn1.style.display = "none";
 42         btn2.style.display = "block";
 43         btn3.style.display = "none";
 44         btn4.style.display = "none";
 45     }
 46     function updateNode() {
 47         var nodeIdText = node.nodeId;
 48         var nodeNameText = node.nodeName;
 49         var nodeParentIdText = node.parentNodeId;
 50         nodeNameText.readOnly = true;
 51         var btn1 = node.update;
 52         var btn2 = node.executeUpdate;
 53         var btn3 = node.addChild;
 54         var btn4 = node.deleteNode;
 55         btn1.style.display = "block";
 56         btn2.style.display = "none";
 57         btn3.style.display = "block";
 58         btn4.style.display = "block";
 59 
 60         window.location.href = "UpdateNode.action?nodeId=" + nodeIdText.value + "&nodeName=" + nodeNameText.value + "&parentNodeId=" + nodeParentIdText.value;
 61     }
 62     function add(){
 63         var nodeIdText = node.nodeId;
 64         createXMLHttpRequest();
 65         var url = "AddChild.action?nodeId=" + nodeIdText.value;
 66         req.onreadystatechange = callbackfunc;
 67         req.open("GET", url, true);
 68         req.send(null);
 69     }
 70     function callbackfunc(){
 71         if(req.readyState == 4){
 72             if(req.status == 200){
 73                 var resultStr = req.responseText;
 74                 var divDisplay = document.getElementById("showDiv");
 75                 divDisplay.innerHTML = "";
 76                 divDisplay.innerHTML = resultStr;
 77             }
 78         }
 79     }
 80     function deletefunc(){
 81         if(confirm("确认要删除该节点？")==1){
 82             var nodeIdText = node.nodeId;
 83             window.location.href = "DeleteNode.action?nodeId=" + nodeIdText.value;
 84         }
 85         else{
 86             return false;
 87         }
 88     }
 89 </script>
 90 </head>
 91 
 92 <body>
 93     <script language="JavaScript">
 94         function treeNodeSelected(node){
 95             //如果有子节点则展开
 96             if(node.node.children.length > 0){
 97                 node.node.expand();
 98             }
 99             //绑定节点的动作，以及处理请求返回的结果数据data
100             dojo.io.bind({
101                 url : "<s:url value='DisplayNode.action'/>?nodeId="
102                     + node.node.widgetId,
103                 load : function(type, data, evt) {
104                         var divDisplay = dojo.byId("showDiv");
105                         divDisplay.innerHTML = "";
106                         divDisplay.innerHTML = data;
107                     },
108                 mimeType : "text/html"
109             });
110         }
111         /*订阅选择节点后发布的主题*/
112         dojo.event.topic.subscribe("treeSelected", treeNodeSelected);
113     </script>
114     <fieldset style="height:500px; overflow:auto;" width="50%">
115         <legend>动态树展示</legend>
116         <div style="float:left; margin-right:50px;">
117             <sx:tree id="treeId" rootNode="root" 
118                 childCollectionProperty="children" 
119                 nodeIdProperty="nodeId"
120                 nodeTitleProperty="nodeName"
121                 treeSelectedTopic="treeSelected">
122             </sx:tree>
123         </div>
124         <!--用于回显返回的页面-->
125         <div style="float: left" id="showDiv"></div>    
126     </fieldset>
127 </body>
128 </html>

 

 

（9）child.jsp

View Code 
  1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2 <%
  3 String path = request.getContextPath();
  4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5 %>
  6 <%@ taglib prefix="s" uri="/struts-tags" %>
  7 <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
  8 
  9 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 10 <html>
 11 <head>
 12 <base href="<%=basePath%>">
 13 
 14 <title>Tree</title>
 15 <meta http-equiv="pragma" content="no-cache">
 16 <meta http-equiv="cache-control" content="no-cache">
 17 <meta http-equiv="expires" content="0">
 18 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 19 <meta http-equiv="description" content="This is my page">
 20 <sx:head />
 21 
 22 <script language="JavaScript" type="text/javascript">
 23     
 24     var req;
 25     function createXMLHttpRequest() {
 26         if (window.ActiveXObject) {
 27             req = new ActiveXObject("Microsoft.XMLHTTP");
 28         } else if (window.XMLHttpRequest) {
 29             req = new XMLHttpRequest();
 30         }
 31     }
 32 
 33     function updateButton() {
 34         var nodeNameText = node.nodeName;
 35         nodeNameText.readOnly = false;
 36         nodeNameText.focus();
 37         var btn1 = node.update;
 38         var btn2 = node.executeUpdate;
 39         var btn3 = node.addChild;
 40         var btn4 = node.deleteNode;
 41         btn1.style.display = "none";
 42         btn2.style.display = "block";
 43         btn3.style.display = "none";
 44         btn4.style.display = "none";
 45     }
 46     function updateNode() {
 47         var nodeIdText = node.nodeId;
 48         var nodeNameText = node.nodeName;
 49         var nodeParentIdText = node.parentNodeId;
 50         nodeNameText.readOnly = true;
 51         var btn1 = node.update;
 52         var btn2 = node.executeUpdate;
 53         var btn3 = node.addChild;
 54         var btn4 = node.deleteNode;
 55         btn1.style.display = "block";
 56         btn2.style.display = "none";
 57         btn3.style.display = "block";
 58         btn4.style.display = "block";
 59 
 60         window.location.href = "UpdateNode.action?nodeId=" + nodeIdText.value + "&nodeName=" + nodeNameText.value + "&parentNodeId=" + nodeParentIdText.value;
 61     }
 62     function add(){
 63         var nodeIdText = node.nodeId;
 64         createXMLHttpRequest();
 65         var url = "AddChild.action?nodeId=" + nodeIdText.value;
 66         req.onreadystatechange = callbackfunc;
 67         req.open("GET", url, true);
 68         req.send(null);
 69     }
 70     function callbackfunc(){
 71         if(req.readyState == 4){
 72             if(req.status == 200){
 73                 var resultStr = req.responseText;
 74                 var divDisplay = document.getElementById("showDiv");
 75                 divDisplay.innerHTML = "";
 76                 divDisplay.innerHTML = resultStr;
 77             }
 78         }
 79     }
 80     function deletefunc(){
 81         if(confirm("确认要删除该节点？")==1){
 82             var nodeIdText = node.nodeId;
 83             window.location.href = "DeleteNode.action?nodeId=" + nodeIdText.value;
 84         }
 85         else{
 86             return false;
 87         }
 88     }
 89 </script>
 90 </head>
 91 
 92 <body>
 93     <script language="JavaScript">
 94         function treeNodeSelected(node){
 95             //如果有子节点则展开
 96             if(node.node.children.length > 0){
 97                 node.node.expand();
 98             }
 99             //绑定节点的动作，以及处理请求返回的结果数据data
100             dojo.io.bind({
101                 url : "<s:url value='DisplayNode.action'/>?nodeId="
102                     + node.node.widgetId,
103                 load : function(type, data, evt) {
104                         var divDisplay = dojo.byId("showDiv");
105                         divDisplay.innerHTML = "";
106                         divDisplay.innerHTML = data;
107                     },
108                 mimeType : "text/html"
109             });
110         }
111         /*订阅选择节点后发布的主题*/
112         dojo.event.topic.subscribe("treeSelected", treeNodeSelected);
113     </script>
114     <fieldset style="height:500px; overflow:auto;" width="50%">
115         <legend>动态树展示</legend>
116         <div style="float:left; margin-right:50px;">
117             <sx:tree id="treeId" rootNode="root" 
118                 childCollectionProperty="children" 
119                 nodeIdProperty="nodeId"
120                 nodeTitleProperty="nodeName"
121                 treeSelectedTopic="treeSelected">
122             </sx:tree>
123         </div>
124         <!--用于回显返回的页面-->
125         <div style="float: left" id="showDiv"></div>    
126     </fieldset>
127 </body>
128 </html>

 

 

5：项目下载地址

http://115.com/file/ckxha3c0

6：项目目录图