前言

昨天为大家分享的是关于Tree案例的后台实现过程，今天为大家分享前端是如何实现的！

接上一篇博文：

Tree案例的后台实现过程

以下这张图片呢就是昨天的最终结果啦！

1、注意要点

博主在实现这个最终结果的时候，出现了下面这种形式的乱码：

自己也去找了很多解决方案，也问了身边的小伙伴们，最终得到了以下结论：

记得在最开始新建项目的时候，配置好tomcat之后也一定要记得设置好字符编码

我出现上面乱码的原因是只设置了web中jsp页面的字符编码，而没有设置js、以及json格式的字符编码，所以使用js加载出来的数据会产生乱码！

web中jsp页面字符编码的设置：

1、Window->Preferences->Web->JSP Files 面板选择 UTF-8

2、Window->Preferences->General ->Content Type->Text->JSP 最下面设置为UTF-8 选择Text->Javascript，将下面的Default Encoding改为UTF-8；

3、 Window->Preferences->General->Workspace 面板Text file encoding 选择UTF-8；

接上一张图片：

2、案例演示

以结果为导向，以下这张图是最终运行结果：

以下这张图片是数据库表格：

1、需要导入的jar包依赖：

2、需要使用到的util工具类以及静态资源文件：

静态资源文件（固定不变的）：

3、新建entity、vo、dao包：

Menu实体类：

package com.wangqiuping.entity;

public class Menu {

private  String  serialNo;
private  String  menuid;
private  String  menuname;
private  String  menuURL;
private  String  parentid;

public String getserialNo() {
	return serialNo;
}
public void setserialNo(String serialNo) {
	this.serialNo = serialNo;
}
public String getMenuid() {
	return menuid;
}
public void setMenuid(String menuid) {
	this.menuid = menuid;
}
public String getMenuname() {
	return menuname;
}
public void setMenuname(String menuname) {
	this.menuname = menuname;
}
public String getMenuURL() {
	return menuURL;
}
public void setMenuURL(String menuURL) {
	this.menuURL = menuURL;
}
public String getParentid() {
	return parentid;
}
public void setParentid(String parentid) {
	this.parentid = parentid;
}
public Menu() {
	super();
}
public Menu(String serialNo, String menuid, String menuname, String menuURL, String parentid) {
	super();
	this.serialNo = serialNo;
	this.menuid = menuid;
	this.menuname = menuname;
	this.menuURL = menuURL;
	this.parentid = parentid;
}
public Menu(String menuid, String menuname, String menuURL, String parentid) {
	super();
	this.menuid = menuid;
	this.menuname = menuname;
	this.menuURL = menuURL;
	this.parentid = parentid;
}
@Override
public String toString() {
	return "Menu [serialNo=" + serialNo + ", menuid=" + menuid + ", menuname=" + menuname + ", menuURL=" + menuURL
			+ ", parentid=" + parentid + "]";
}
}

TreeVo类：

package com.wangqiuping.vo;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;


public class TreeVo<T> {
	
	private String id;

	private String text;

	private Map<String, Object> state;

	private boolean checked = false;

	private Map<String, Object> attributes;


	private List<TreeVo<T>> children = new ArrayList<TreeVo<T>>();

	
	private String parentId;

	private boolean hasParent = false;

	private boolean hasChildren = false;

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}

	public Map<String, Object> getState() {
		return state;
	}

	public void setState(Map<String, Object> state) {
		this.state = state;
	}

	public boolean isChecked() {
		return checked;
	}

	public void setChecked(boolean checked) {
		this.checked = checked;
	}

	public Map<String, Object> getAttributes() {
		return attributes;
	}

	public void setAttributes(Map<String, Object> attributes) {
		this.attributes = attributes;
	}

	public List<TreeVo<T>> getChildren() {
		return children;
	}

	public void setChildren(List<TreeVo<T>> children) {
		this.children = children;
	}

	public boolean isHasParent() {
		return hasParent;
	}

	public void setHasParent(boolean isParent) {
		this.hasParent = isParent;
	}

	public boolean isHasChildren() {
		return hasChildren;
	}

	public void setChildren(boolean isChildren) {
		this.hasChildren = isChildren;
	}

	public String getParentId() {
		return parentId;
	}

	public void setParentId(String parentId) {
		this.parentId = parentId;
	}

	public TreeVo(String id, String text, Map<String, Object> state, boolean checked, Map<String, Object> attributes,
                  List<TreeVo<T>> children, boolean isParent, boolean isChildren, String parentID) {
		super();
		this.id = id;
		this.text = text;
		this.state = state;
		this.checked = checked;
		this.attributes = attributes;
		this.children = children;
		this.hasParent = isParent;
		this.hasChildren = isChildren;
		this.parentId = parentID;
	}

	public TreeVo() {
		super();
	}
}

MenuDao类：

package com.wangqiuping.dao;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.wangqiuping.entity.Menu;
import com.wangqiuping.entity.Permission;
import com.wangqiuping.util.BaseDao;
import com.wangqiuping.util.BuildTree;
import com.wangqiuping.util.PageBean;
import com.wangqiuping.vo.TreeVo;

public class MenuDao extends BaseDao<Menu>{

public  List<Menu> list(Menu menu,PageBean  pageBean) throws InstantiationException, IllegalAccessException, SQLException{
	
	String  sql="select * from t_easyui_menu";
	return  super.executeQuery(sql,Menu.class,pageBean);
}

public List<TreeVo<Menu>> topNode(Menu menu,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
	List<Menu> list = this.list(menu, pageBean);
	
	List<TreeVo<Menu>> nodes = new ArrayList<TreeVo<Menu>>();
	
	TreeVo treeVo = null;
	for (Menu p : list) {
		treeVo = new TreeVo<>();
		treeVo.setId(p.getMenuid()+"");
		treeVo.setText(p.getMenuname());
		treeVo.setParentId(p.getParentid()+"");
		Map<String, Object> attributes = new HashMap<String, Object>();
    	attributes.put("self", p);
	    treeVo.setAttributes(attributes);
		nodes.add(treeVo);
	}
	return BuildTree.buildList(nodes,"-1");
}



public static void main(String[] args) throws InstantiationException, IllegalAccessException, SQLException {
	MenuDao  menuDao=new MenuDao();
	List<Menu> list = menuDao.list(null,null);
	for (Menu m : list) {
		System.out.println(m);
	}
}	
}

4、BuildTree类：

package com.wangqiuping.util;


import com.wangqiuping.vo.TreeVo;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class BuildTree {

	/**
	 * 默认-1为顶级节点
	 * @param nodes
	 * @param <T>
	 * @return
	 */
	public static <T> TreeVo<T> build(List<TreeVo<T>> nodes) {

		if (nodes == null) {
			return null;
		}
		List<TreeVo<T>> topNodes = new ArrayList<TreeVo<T>>();

		for (TreeVo<T> children : nodes) {
			String pid = children.getParentId();
			if (pid == null || "-1".equals(pid)) {
				topNodes.add(children);

				continue;
			}

			for (TreeVo<T> parent : nodes) {
				String id = parent.getId();
				if (id != null && id.equals(pid)) {
					parent.getChildren().add(children);
					children.setHasParent(true);
					parent.setChildren(true);
					continue;
				}
			}

		}

		TreeVo<T> root = new TreeVo<T>();
		if (topNodes.size() == 1) {
			root = topNodes.get(0);
		} else {
			root.setId("000");
			root.setParentId("0");
			root.setHasParent(false);
			root.setChildren(true);
			root.setChecked(true);
			root.setChildren(topNodes);
			root.setText("顶级节点");
			Map<String, Object> state = new HashMap<>(16);
			state.put("opened", true);
			root.setState(state);
		}

		return root;
	}

	/**
	 * 指定idparam为顶级节点
	 * @param nodes
	 * @param idParam
	 * @param <T>
	 * @return
	 */
	public static <T> List<TreeVo<T>> buildList(List<TreeVo<T>> nodes, String idParam) {
		if (nodes == null) {
			return null;
		}
		List<TreeVo<T>> topNodes = new ArrayList<TreeVo<T>>();

		for (TreeVo<T> children : nodes) {

			String pid = children.getParentId();
			if (pid == null || idParam.equals(pid)) {
				topNodes.add(children);

				continue;
			}

			for (TreeVo<T> parent : nodes) {
				String id = parent.getId();
				if (id != null && id.equals(pid)) {
					parent.getChildren().add(children);
					children.setHasParent(true);
					parent.setChildren(true);

					continue;
				}
			}

		}
		return topNodes;
	}
}

5、mvc.xml配置文件：

<?xml version="1.0" encoding="UTF-8"?>
<config>	
<action path="/menu" type="com.wangqiuping.action.MenuAction">
	</action>
</config>

6、index.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 写全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<!-- 定义图标的样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<!--组件库源文件的js文件  -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script>   

<title>登录后的主界面</title>
</head>
<!--获取项目名  -->
<input type="hidden" id="ctx" value="${pageContext.request.contextPath}"/>
<body class="easyui-layout">
		<div data-options="region:'north',border:false" 
			style="height:60px;background:#B3DFDA;padding:10px">管理系统</div>
		<div data-options="region:'west',split:true,title:'目录'" 
			style="width:150px;padding:10px;">
        <ul id="tt"></ul>  
		</div>
		<div data-options="region:'east',split:true,collapsed:true,title:'右边'" 
			style="width:100px;padding:10px;">east region</div>
		<div data-options="region:'south',border:false" 
			style="height:50px;background:#A9FACD;padding:10px;">底部版权</div>
		<div data-options="region:'center',title:'内容'"></div>
</body>
</html>

index.js:

$(function(){
	$('#tt').tree({    
	    url:$("#ctx").val()+'/menu.action?methodName=menuTree'   
	});  
})

7、新建action包、放MenuAction类：

package com.wangqiuping.action;

import java.sql.SQLException;

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

import com.wangqiuping.dao.MenuDao;
import com.wangqiuping.entity.Menu;
import com.wangqiuping.framework.ActionSupport;
import com.wangqiuping.framework.ModelDriven;
import com.wangqiuping.util.ResponseUtil;

public class MenuAction extends ActionSupport implements ModelDriven<Menu> {

	private Menu  menu=new Menu();
	private MenuDao  menuDao=new MenuDao();
	
	@Override
	public Menu getModel() {
		// TODO Auto-generated method stub
		return null;
	}

	public  String  menuTree(HttpServletRequest req,HttpServletResponse resp) {
		try {
//	    TreeVo<Permission> topNode = this.permissionDao.topNode(null,null);
//	    List<TreeVo<Permission>> list=new ArrayList<TreeVo<Permission>>();
//	    list.add(topNode);
	    ResponseUtil.writeJson(resp,this.menuDao.topNode(null,null));
		}catch (InstantiationException e) {
			e.printStackTrace();
		}catch (IllegalAccessException e) {
			e.printStackTrace();
		}catch (SQLException e) {
			e.printStackTrace();
		} catch (Exception e) {
			e.printStackTrace();
		}
		//配置结果码的目的就是为了在mvc.xml中寻找到底是重定向还是转发
		return null;
	}
}

总结

Tree简介包括前端和后台两种方式，后台的话主要是利用解析出来json.字符串去动态加载数据库中的数据，而前端的话主要是利用ResponseUtil去将对象解析成json格式的字符串，然后通过Treevo实体类中节点的相关属性，搭配工具类实现效果！