easyui tree前端编写

接上篇博客： easyui tree后端编写

一、web层代码编写

package com.chendongyang.web;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

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

import com.chendongyang.dao.PermissionDao;
import com.chendongyang.entity.Permission;
import com.chendongyang.framework.ActionSupport;
import com.chendongyang.framework.ModelDriven;
import com.chendongyang.util.ResponseUtil;
import com.chendongyang.vo.TreeVo;

public class PermissionAction extends ActionSupport implements ModelDriven<Permission> {
	private Permission permission=new Permission();
	private PermissionDao permissionDao=new PermissionDao();
	@Override
	public Permission getModel() {
		return permission;
	}
	
	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.write(resp, list);*/
			ResponseUtil.writeJson(resp, list);
		} catch (SQLException e) {
			e.printStackTrace();
		} catch (Exception e) {
			e.printStackTrace();
		}
//		结果码的配置就是为了，在mvc.xml中寻找到底是重定向还是转发
		return null;
	}
	
}

二、页面tree组件展示

1、dao层代码编写

package com.chendongyang.dao;

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

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

public class PermissionDao extends BaseDao<Permission> {
	/**
	 * 是直接从数据库获取到的数据
	 * @param permission
	 * @param pageBean
	 * @return
	 * @throws SQLException
	 * @throws Exception
	 */
	public List<Permission> list(Permission permission,PageBean pageBean) throws SQLException, Exception{
		String sql="select * from t_easyui_permission";
		return super.executeQuery(sql, Permission.class, pageBean);
	}
	/**
	 * 能够将数据库中的数据：体现成树形结构
	 * @param permission
	 * @param pageBean
	 * @return
	 * @throws SQLException
	 * @throws Exception
	 */
	public TreeVo<Permission> topNode(Permission permission,PageBean pageBean) throws SQLException, Exception{
		List<Permission> list = this.list(permission, pageBean);
		List<TreeVo<Permission>> nodes=new ArrayList<TreeVo<Permission>>();
		TreeVo treeVo=null;
		for (Permission p : list) {
			treeVo = new TreeVo<>();
			treeVo.setId(p.getId()+"");
			treeVo.setText(p.getName());
			treeVo.setParentId(p.getPid()+"");
			Map<String, Object> attributes=new HashMap<String, Object>();
			attributes.put("self", p);
			treeVo.setAttributes(attributes);
			nodes.add(treeVo);
		}
		return BuildTree.build(nodes);
	}
	
	public static void main(String[] args) throws SQLException, Exception {
		PermissionDao permissionDao=new PermissionDao();
		List<Permission> list = permissionDao.list(null, null);
//		通过工具类完成制定格式的输出
		List<TreeVo<Permission>> nodes=new ArrayList<TreeVo<Permission>>();
		// Permission 的格式不满足easyui的tree组件的展示的数据格式的
//		目的：将list<Permission>转换成List<TreeVo<T>
//		实现：将list<Permission>得到的单个permission转换成TreeVo，将TreeVo加入到nodes
		TreeVo treeVo=null;
		for (Permission p : list) {
			treeVo = new TreeVo<>();
			treeVo.setId(p.getId()+"");
			treeVo.setText(p.getName());
			treeVo.setParentId(p.getPid()+"");
	/*		Map<String, Object> attributes=new HashMap<String, Object>();
			attributes.put("self", p);
			treeVo.setAttributes(attributes);*/
			nodes.add(treeVo);
		}
		TreeVo<Permission> parent=BuildTree.build(nodes);
		ObjectMapper om=new ObjectMapper();
		String jsonstr = om.writeValueAsString(parent);
		System.out.println(jsonstr);
	}
}

2、mvc.xml 配置

<?xml version="1.0" encoding="UTF-8"?>
<config>
	<action path="/permission" type="com.chendongyang.web.PermissionAction">
	</action>
</config>

3、index.js 修改

（1）、这里记得在index.jsp界面head标签后添加一个隐藏域

<input type="hidden" id="ctx"
	value="${pageContext.request.contextPath }">

（2）、将之前的index.js 里面的js代码修改

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

三 、结果图

四、总结

这次主要给大家分享的是mvc实现web层的编写，下篇博客将给大家分享tabs选项卡的编写。