14-EasyUI尚硅谷 - tree（拖拽效果和后台同步）

将任意节点拖拽到任意节点里面，同时改变前台、后台和数据库，数据表同上一节

（还有一个参数：point，取值可能是：append，bottom，top，这里暂时不讨论）

操作之前：

  

后台：

 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 {
			try {
				throw new Exception("请求失败！");
			} 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);
		}
	}
}

 013_tree_dataLoad.jsp：

<%@ 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</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">
	$(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: "操作成功！"
						});
					}
				});
			}
		});
	});
</script>
</head>

<body>
	<ul id="t2"></ul>
</body>
</html>

操作之后：

  

 

posted @ 2017-08-03 17:48  半生戎马，共话桑麻、  阅读(209)  评论(0)    收藏  举报
levels of contents