15-EasyUI尚硅谷 - tree（增删改查和后台同步，实际开发中要修改一下细节）

在前一节的基础上操作：

效果：

 

新增

 

修改

 

删除

     

代码：

ResourceServlet.java：

package sxt.easyui.servlet;

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import sxt.easyui.model.Resource;
import sxt.easyui.model.TreeDTO;
import sxt.easyui.util.DBHelper;

// 资源Servlet
@SuppressWarnings("serial")
public class ResourceServlet extends HttpServlet {
	
	private Connection conn = null;
	private PreparedStatement ps = null;
	private ResultSet rs = null;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		this.doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		String method = req.getParameter("method");
		if ("loadTree".equals(method)) {
			this.loadTree(req, resp);
		} else if ("changeNode".equals(method)) {
			this.changeNode(req, resp);
		} else if ("addResource".equals(method)) {
			this.addResource(req, resp);
		} else if ("editResource".equals(method)) {
			this.editResource(req, resp);
		} else if ("deleteResource".equals(method)) {
			try {
				this.deleteResourcesById(req, resp);
			} catch (Exception e) {
				e.printStackTrace();
			}
		} else {
			try {
				throw new Exception("请求失败！");
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
	}

	// 根据id删除node
	private void deleteResourcesById(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		// 要删除的节点id
		String id = req.getParameter("id");
		int nodeId = id==null ? -1 : Integer.parseInt(id);
		
		if (nodeId > 0) {
			deleteResourceById(req, resp, nodeId);
			// 输出
			String result = "{\"status\":\"操作成功！\"}";		
			resp.setContentType("text/html;charset=utf-8");
			resp.getWriter().write(result);
		} else {
			// 删除失败
			String result = "{\"status\":\"操作失败！\"}";			
			resp.setContentType("text/html;charset=utf-8");
			resp.getWriter().write(result);
		}
	}
	
	// 递归删除所有子节点
	public void deleteResourceById(HttpServletRequest req, HttpServletResponse resp, int id) throws Exception {
		List<Resource> resources = this.getChildrenByParentId(id);
		for (Resource cNode : resources) {
			int cid = cNode.getId();
			this.delete(cid);	// 删了当前的孩子
			// 继续查看当前被删的孩子还有没有孩子，有就继续删除
			deleteResourceById(req, resp, cid);
		}
		this.delete(id);		// 没有孩子，就把它自己删了
	}
	
	// 执行删除操作
	public void delete(int id) throws Exception {
		String sql = "DELETE FROM resource WHERE id=?";
		conn = DBHelper.getConn();
		ps = DBHelper.prepare(conn, sql);
		ps.setInt(1, id);
		ps.executeUpdate();
	}

	// 编辑权限
	private void editResource(HttpServletRequest req, HttpServletResponse resp) {
		String id = req.getParameter("id");
		String name = req.getParameter("name");
		String url = req.getParameter("url");
		
		String result = "{\"status\":\"提示信息\", \"message\":\"操作失败！\"}";		
		try {
			String sql = "UPDATE resource SET name=?, url=? WHERE id=?";
			conn = DBHelper.getConn();
			ps = DBHelper.prepare(conn, sql);
			ps.setString(1, name);
			ps.setString(2, url);
			ps.setString(3, id);
			int count = ps.executeUpdate();
			if (count == 1) {
				result = "{\"status\":\"提示信息\", \"message\":\"操作成功！\"}";		
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				resp.setContentType("text/html;charset=utf-8");
				resp.getWriter().write(result);
				
				DBHelper.close(ps);
				DBHelper.close(conn);
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
	}

	// 新增权限
	private void addResource(HttpServletRequest req, HttpServletResponse resp) {
		
		String name = req.getParameter("name");
		String url = req.getParameter("url");
		String parentId = req.getParameter("parentId");
		
		// {"status":"提示信息", "message":"操作失败！"}
		String result = "{\"status\":\"提示信息\", \"message\":\"操作失败！\"}";		
		try {
			String sql = "INSERT INTO resource(name,url,parent_id) VALUES(?,?,?)";
			conn = DBHelper.getConn();
			ps = DBHelper.prepare(conn, sql);
			ps.setString(1, name);
			ps.setString(2, url);
			ps.setString(3, parentId);
			int count = ps.executeUpdate();
			if (count == 1) {
				result = "{\"status\":\"提示信息\", \"message\":\"操作成功！\"}";		
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				resp.setContentType("text/html;charset=utf-8");
				resp.getWriter().write(result);
				
				DBHelper.close(ps);
				DBHelper.close(conn);
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
	}

	// 节点拖拽
	private void changeNode(HttpServletRequest req, HttpServletResponse resp) {
		String targetId = req.getParameter("targetId");
		String sourceId = req.getParameter("sourceId");
		
		String result = "{\"status\":\"success\"}";
		try {
			String sql = "UPDATE resource SET parent_id=? WHERE id=?";
			conn = DBHelper.getConn();
			ps = DBHelper.prepare(conn, sql);
			ps.setString(1, targetId);
			ps.setString(2, sourceId);
			int count = ps.executeUpdate();
			
			if (count != 1) {	// 操作失败
				result = "{\"status\":\"error\"}";
			}
			
			resp.setContentType("text/html;charset=utf-8");
			resp.getWriter().write(result);
			
		} catch (Exception e) {
			result = "{\"status\":\"error\"}";
			resp.setContentType("text/html;charset=utf-8");
			try {
				resp.getWriter().write(result);
			} catch (IOException e1) {
				e1.printStackTrace();
			}
			e.printStackTrace();
		} finally {
			DBHelper.close(ps);
			DBHelper.close(conn);
		}
	}

	// 根据id获取子节点
	private void loadTree(HttpServletRequest req, HttpServletResponse resp) {
		// 获取当前展开的节点id
		String id = req.getParameter("id");
		// 判断id
		if (id == null || "".equals(id)) {
			id = "999999";	// 对应数据库的根节点id
		} 
		try {
			List<TreeDTO> tList = this.getChildrenByParentId(id);
			resp.setContentType("text/html;charset=utf-8");
			resp.getWriter().write(JSONArray.fromObject(tList).toString());
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

	// 根据父节点id获取所有子节点
	private List<TreeDTO> getChildrenByParentId(String id) {
		List<TreeDTO> tList = new ArrayList<TreeDTO>();
		List<Resource> rList = new ArrayList<Resource>();
		try {
			String sql = "SELECT * FROM resource WHERE parent_id=?";
			conn = DBHelper.getConn();
			ps = DBHelper.prepare(conn, sql);
			ps.setString(1, id);
			rs = ps.executeQuery();
			while (rs.next()) {
				Resource resource = new Resource();
				resource.setId(rs.getInt("id"));
				resource.setName(rs.getString("name"));
				resource.setChecked(rs.getInt("checked"));
				resource.setIcon(rs.getString("icon"));
				resource.setUrl(rs.getString("url"));
				resource.setParentId(rs.getInt("parent_id"));
				
				rList.add(resource);
			}
			if (rList != null && rList.size() > 0) {
				for (Resource resource : rList) {
					TreeDTO treeDTO = new TreeDTO();
					
					treeDTO.setId(resource.getId());
					treeDTO.setText(resource.getName());
					treeDTO.setChecked(resource.getChecked());
					treeDTO.setIconCls(resource.getIcon());
					
					Map<String, Object> map = new HashMap<String, Object>();
					map.put("url", resource.getUrl());
					treeDTO.setAttributes(map);
					
					// 有孩子节点就关闭（closed），否则就打开（open）
					List<Resource> resources = this.getChildrenByParentId(resource.getId());
					if (resources.size() > 0) {
						treeDTO.setState("closed");
					} else {
						treeDTO.setState("open");
					}
					
					tList.add(treeDTO);
				}
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBHelper.close(rs);
			DBHelper.close(ps);
			DBHelper.close(conn);
		}
		return tList;
	}

	// 获取所有孩子节点（其实和getChildrenById方法一样）
	private List<Resource> getChildrenByParentId(int parentId) {
		List<Resource> resources = new ArrayList<Resource>();
		try {
			conn = DBHelper.getConn();
			String sql = "SELECT * FROM resource WHERE parent_id=?";
			ps = DBHelper.prepare(conn, sql);
			ps.setInt(1, parentId);
			rs = ps.executeQuery();
			while (rs.next()) {
				Resource resource = new Resource();
				resource.setId(rs.getInt("id"));
				resource.setName(rs.getString("name"));
				resource.setChecked(rs.getInt("checked"));
				resource.setIcon(rs.getString("icon"));
				resource.setUrl(rs.getString("url"));
				resource.setParentId(rs.getInt("parent_id"));
				
				resources.add(resource);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return resources;
	}
}

014_tree_curd.jsp.java：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>Tree_CRUD</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css">
<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript">

	var flag;	// 编辑还是保存

	$(function() {
		$("#t2").tree({
			url: "ResourceServlet?method=loadTree",
			//animate: true,
			checkbox: true,
			dnd: true,
			// 拖拽，后台同步, target:要把节点拖拽到那个节点里,是DOM元素;source：被拖拽的节点，是js对象;point：操作范方式，append，top，bottom
			onDrop: function(target, source, point) {	
				var target = $("#t2").tree("getNode", target);		// 把DOM元素转换成js对象
				var targetId = target.id;		// 目标节点id
				var sourceId = source.id;		// 被拖拽的节点id
				
				var url = "ResourceServlet?method=changeNode";
				var args = {"time": new Date(), "targetId": targetId, "sourceId": sourceId};
				$.post(url, args, function(result) {
					// 如果错误就提示，成功就什么也不做, 失败：{"status":"error"}
					var jsonObj = $.parseJSON(result);
					if (jsonObj.status == "error") {
						$.messager.alert("提示信息", "操作失败！", "error", function() {
							// 恢复数据到操作前
						});
					} else {
						$.messager.show({
							title: "提示信息",
							msg: "操作成功！"
						});
					}
				});
			},
			// 菜单事件, e: 右键的事件对象, node: 被右键的节点元素(DOM)
			onContextMenu: function(e, node) {	
				e.preventDefault();		// 阻止浏览器右键的菜单事件
				$(this).tree("select", node.target);	// 右键时选中该节点
				$("#menu").menu("show", {
					left: e.pageX,		// 菜单出现在右键的位置上
					top: e.pageY
				});
			}
		});
		// 新增权限窗口
		$("#resourceDiv").dialog({
			title: "设置权限",
			width: 330,
			height: 190,
			closed: true,
			modal: true,
			draggable: false
		});
		// 表单数据校验
		$("#resourceTable input=[name='name']").validatebox({
			required: true,
			missingMessage: "权限名称必填！"
		});
		$("#resourceTable input=[name='url']").validatebox({
			required: true,
			missingMessage: "权限URL必填！"
		});
		// 新增权限提交
		$("#saveBtn").click(function() {
			resourceFormSubmit();
		});
		// 回车提交表单
        $("#resourceForm").find("input").on("keyup", function(event) { 
            if (event.keyCode == 13) {
            	resourceFormSubmit();
            }
        });
		// 关闭新增权限窗口
		$("#cancelBtn").click(function() {
			// 关闭窗口
			$("#resourceDiv").dialog("close");
		});
	});
	// 菜单事件
	function append() {
		flag = "add";
		// 清空表单
		$("#resourceForm").find("input").val("");
		// 打开新增权限窗口
		$("#resourceDiv").dialog("open");
		$("#resourceTable input[name='name']").focus();
	}
	function edit() {
		flag = "edit";
		// 清空表单
		$("#resourceForm").form("clear");
		// 重新加载表单数据
		var node = $("#t2").tree("getSelected");
		$("#resourceForm").form("load", {
			id: node.id,
			name: node.text,
			url: node.attributes.url
		});
		// 打开编辑窗口
		$("#resourceDiv").dialog("open");
	}
	function remove() {
		$.messager.confirm("提示信息", "<center>确定删除吗？<br/><font color='red'>（若有子节点，也将删除其所有子节点）</font></center>", function(r) {
			if (r) {	// 删除
				// 前台删除
				var node = $("#t2").tree("getSelected");
				var id = node.id;
				$("#t2").tree("remove", node.target);
				
				// 后台删除
				var url = "ResourceServlet?method=deleteResource";
				var args = {"time": new Date(), "id": id};
				$.post(url, args, function(result) {
					var jsonObj = $.parseJSON(result);
					$.messager.show({	// {"status": "操作成功！"}、{"status": "操作失败！"}
						title: "提示信息",
						msg: jsonObj.status
					});
				});
			} 
		});
	}
	// 提交新增权限表单
	function resourceFormSubmit() {
		// 获取被右键的节点id，将其作为即将添加的节点的父id
		var node = $("#t2").tree("getSelected");
		
		if (flag == "add") {	// 新增
			if ($("#resourceForm").form("validate")) {
				// 前台更新
				$("#t2").tree("append", {	// 调用tree的append方法更新前台数据，相当于刷新
					parent: node.target,
					data: [{
						text: $("#resourceForm input[name='name']").val(),
						attributes: {
							url: $("#resourceForm input[name='url']").val()
						}
					}]
				});
				
				// 后台更新
				$.ajax({
					type: "post",
					url: "ResourceServlet?method=addResource",
					data: {
						"parentId": node.id,
						"name": $("#resourceForm input[name='name']").val(),
						"url": $("#resourceForm input[name='url']").val()
					},
					dataType: "text",
					cache: false,
					success: function(result) {		// {"status":"提示信息", "message":"操作成功！"}
						$("#resourceDiv").dialog("close");	// 关闭窗口
						
						// 刷新节点 （如果这里不更新节点，新增加的节点就不会有id，当再次在新添加的节点上添加新的节点时就会没有parentId，后台报错，数据库插不进数据）
						var parent = $("#t2").tree("getParent" , node.target);
						$("#t2").tree("reload", parent.target);
						
						var result = $.parseJSON(result);
						$.messager.show({
						    title: result.status,
						    msg: result.message
						});
					},
					error: function(result) {		// {"status":"提示信息", "message":"操作失败！"}
						var result = $.parseJSON(result);
						$.messager.show({
						    title: result.status,
						    msg: result.message
						});
					}
				});
			} else {	
				$.messager.show({
					title: "提示信息",
					msg: "校验没有通过，不能提交表单！"
				});
				return false;	// 阻止表单提交
			}
		} else {	// 修改
			if ($("#resourceForm").form("validate")) {
				// 后台更新
				$.ajax({
					type: "post",
					url: "ResourceServlet?method=editResource",
					data: {
						"id": node.id,
						"name": $("#resourceForm input[name='name']").val(),
						"url": $("#resourceForm input[name='url']").val()
					},
					dataType: "text",
					cache: false,
					success: function(result) {		// {"status":"提示信息", "message":"操作成功！"}
						$("#resourceDiv").dialog("close");	// 关闭窗口
						
						// 刷新节点 （如果这里不更新节点，新增加的节点就不会有id，当再次在新添加的节点上添加新的节点时就会没有parentId，后台报错，数据库插不进数据）
						var parent = $("#t2").tree("getParent" , node.target);
						$("#t2").tree("reload", parent.target);
						
						var result = $.parseJSON(result);
						$.messager.show({
						    title: result.status,
						    msg: result.message
						});
					},
					error: function(result) {		// {"status":"提示信息", "message":"操作失败！"}
						var result = $.parseJSON(result);
						$.messager.show({
						    title: result.status,
						    msg: result.message
						});
					}
				});
			} else {
				$.messager.show({
					title: "提示信息",
					msg: "校验没有通过，不能提交表单！"
				});
				return false;	// 阻止表单提交
			}
		}
		
	}
</script>
</head>

<body>
	<ul id="t2"></ul>
	<!-- 右键菜单 -->
	<dir id="menu" class="easyui-menu" style="width: 150px;">
		<div onclick="append();" iconCls="icon-add">Append</div>
		<div onclick="edit();" iconCls="icon-edit">Edit</div>
		<div onclick="remove();" iconCls="icon-remove">Remove</div>
	</dir>
	<!-- append菜单 -->
	<div id="resourceDiv" class="easyui-dialog">
		<form id="resourceForm" action="" method="post">
			<input type="hidden" name="id"/>
			<table id="resourceTable" cellspacing="7px;" style="padding: 15px;">
				<tr>
					<td>权限名称：</td>
					<td><input type="text" name="name" style="width: 180px;"/></td>
				</tr>
				<tr>
					<td>权限地址：</td>
					<td><input type="text" name="url" style="width: 180px;"/></td>
				</tr>
				<tr>
					<td colspan="2" align="right">
						<a id="saveBtn" class="easyui-linkbutton" style="margin-top: 10px;">确定</a>
						<a id="cancelBtn" class="easyui-linkbutton" style="margin-top: 10px;">取消</a>
					</td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>