13-EasyUI尚硅谷 - tree（加载数据：结合后台）

效果：

数据表：

CREATE TABLE `resource` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '权限节点id',
  `name` varchar(20) NOT NULL COMMENT '权限名称',
  `url` varchar(50) DEFAULT NULL COMMENT '权限的URL',
  `checked` int(1) DEFAULT '0' COMMENT '状态，0是收缩，1是展开',
  `icon` varchar(20) DEFAULT NULL COMMENT '图标',
  `parent_id` int(10) DEFAULT NULL COMMENT '父节点id',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8;

 数据：

创建POJO：Resource.java

// 权限POJO
public class Resource {
	
	private int id;
	private String name;
	private String url;
	private int checked;
	private String icon;
	private int parentId;

查看jquery-easyui的api，树的数据格式：

所以原来的POJO不能满足要求，要另外创建一个VO，字段和树的数据格式要求一致：

TreeDTO.java:

package sxt.easyui.model;

import java.util.HashMap;
import java.util.Map;

// 属性和easyui的tree数据格式要求一致
public class TreeDTO {
	
	private int id;				// 节点id
	private String text;		// 节点文本
	private String state;		// 节点状态，展开：open，收缩：closed
	private int checked;		// 是否选中或勾中，1：选中/勾中，0：不选中/不勾中
	private Map<String, Object> attributes = new HashMap<String, Object>();		// 树的自定义属性写在Map集合中
	private String iconCls;		// 图标
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public String getState() {
		return state;
	}
	public void setState(String state) {
		this.state = state;
	}
	public int getChecked() {
		return checked;
	}
	public void setChecked(int checked) {
		this.checked = checked;
	}
	public Map<String, Object> getAttributes() {
		return attributes;
	}
	public void setAttributes(Map<String, Object> attributes) {
		this.attributes = attributes;
	}
	public String getIconCls() {
		return iconCls;
	}
	public void setIconCls(String iconCls) {
		this.iconCls = iconCls;
	}
	public TreeDTO(int id, String text, String state, int checked,
			Map<String, Object> attributes, String iconCls) {
		super();
		this.id = id;
		this.text = text;
		this.state = state;
		this.checked = checked;
		this.attributes = attributes;
		this.iconCls = iconCls;
	}
	public TreeDTO() {
		super();
	}
	
}

 web.xml：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
	id="WebApp_ID" version="3.0">
	
	<display-name>Easyui</display-name>
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.htm</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.htm</welcome-file>
		<welcome-file>default.jsp</welcome-file>
	</welcome-file-list>

	<servlet>
		<servlet-name>ResourceServlet</servlet-name>
		<servlet-class>sxt.easyui.servlet.ResourceServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>ResourceServlet</servlet-name>
		<url-pattern>/ResourceServlet</url-pattern>
	</servlet-mapping>
}

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

	// 根据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;
	}
}

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
		});
	});
</script>
</head>

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