EasyUI中Tree的前端实现

前言

前面一篇使用一张表实现了数据后端的输出（点击这里），这篇我们使用另一张表实现前端的展示

实现效果及使用表

使用的表数据:

案例

Menudao: 把List 得到的单个Menu转换为treevo，在将treevo加入到nodes

package com.shegx.dao;

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

import com.fasterxml.jackson.databind.ObjectMapper;
import com.shegx.entity.Menu;
import com.shegx.entity.Permission;
import com.shegx.util.BaseDao;
import com.shegx.util.BuildTree;
import com.shegx.util.PageBean;
import com.shegx.vo.TreeVo;

public class MenuDao extends BaseDao<Menu>{

	public List<Menu> list(Menu menu,PageBean pageBean) throws Exception {
		String sql="select * from t_easyui_menu where true";
		return super.executeQuery(sql, Menu.class, pageBean);
	}
	
	
	public List<TreeVo<Menu>> topNode(Menu menu,PageBean pageBean) throws Exception {
		
		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 Exception {
		MenuDao md = new MenuDao();
		List<Menu> list = md.list(null, null);
		
//		通锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟街革拷锟斤拷锟绞斤拷锟斤拷锟斤拷
		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);
		}
		
		TreeVo<Menu> parent = BuildTree.build(nodes);
		ObjectMapper om = new ObjectMapper();
		String jsonstr = om.writeValueAsString(parent);
		System.out.println(jsonstr);
		
		
		
	}
	
}

工具类：ResponseUtil

把传过来的对象转换为json格式

package com.shegx.util;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;

public class ResponseUtil {

	public static void write(HttpServletResponse response,Object o)throws Exception{
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out=response.getWriter();
		out.println(o.toString());
		out.flush();
		out.close();
	}
	
	public static void writeJson(HttpServletResponse response,Object o)throws Exception{
		response.setContentType("text/html;charset=utf-8");
		ObjectMapper om = new ObjectMapper();
		String jsonstr = om.writeValueAsString(o);
		PrintWriter out=response.getWriter();
		out.println(jsonstr.toString());
		out.flush();
		out.close();
	}
}

MenuAction

package com.shegx.web;

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

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

public class MenuAction extends ActionSupport implements ModelDriven<Menu> {

	private  Menu menu = new Menu();
	private  MenuDao md =   new MenuDao();

	@Override
	public Menu getModel() {
		// TODO Auto-generated method stub
		return menu;
	}
	
	
	public String menuTree(HttpServletRequest req,HttpServletResponse resp) {
		try {
//			TreeVo<Permission> topNode = this.pd.topNode(null, null);
//			List<TreeVo<Permission>> list = new ArrayList<TreeVo<Permission>>();
//			list.add(topNode);
			ResponseUtil.writeJson(resp, this.md.topNode(null, null));
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}

}

mvc.xml配置文件

<action path="/menu" type="com.shegx.web.MenuAction">

	</action>

js跳转

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

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/black/easyui.css">   
<!-- 定义图标 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/black/easyui.css">   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<!-- 主键库源码的JS文件 -->
<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">xxx管理系统
	 </div>
	<div data-options="region:'west',split:true,title:'West'"
	 style="width:150px;padding:10px;">
		<ul id="tt"></ul>  
	 </div>
	<div data-options="region:'east',split:true,collapsed:true,title:'East'"
	 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:'Center'"></div>
	
</body>
</html>