easyui的tree前端实现

最新推荐文章于 2021-09-13 21:42:55 发布

原创最新推荐文章于 2021-09-13 21:42:55 发布 · 261 阅读

CC 4.0 BY-SA版权

本文介绍如何从前端实现Tree组件，通过导入mvc.jar包并利用Java资源进行响应处理，展示如何使用自定义的ResponseUtil类进行数据响应，以及PermissionDao类中实现的两种方法来构建具有父子结构的TreeVo数据，最终在PermissionAction类中调用这些方法生成树状数据。

tree前端实现

接着上一次的tree后端实现所的到的代码把它在界面上实现出来
在lib中在导入一个mvc.jar的jar包在这里插入图片描述
在java Resources 的src，同一级的conf 中有一些新的改变
ResponseUtil

package com.tang.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();
	}
	
}

PermissionDao

package com.tang.dao;

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

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

public class PermissionDao extends BaseDao<Permission> {
	
	/**
	 * 是直接从数据库中获取到数据
	 * @param permission
	 * @param pageBean
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public List<Permission> list(Permission permission,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql = "select * from t_easyui_Permission";
		return super.executeQuery(sql, Permission.class, pageBean);		
	}
	
	/**
	 * 能够将数据库中的数据，体现父子结构
	 * @param permission
	 * @param pageBean
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	//第一种方法
//	public TreeVo<Permission> topNode(Permission permission,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
//		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 List<TreeVo<Permission>> topNode(Permission permission,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		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.buildList(nodes,"0");						
	}
	
	
}

PermissionAction

package com.tang.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.fasterxml.jackson.databind.ObjectMapper;
import com.tang.dao.PermissionDao;
import com.tang.entity.Permission;
import com.tang.util.ResponseUtil;
import com.tang.vo.TreeVo;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriven;

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.writeJson(resp, list);
//	} catch (InstantiationException e) {
//		e.printStackTrace();
//	} catch (IllegalAccessException e) {
//		e.printStackTrace();
//	} catch (SQLException e) {
//		e.printStackTrace();
//	} catch (Exception e) {
//		e.printStackTrace();
//	}
////	  结果码的配置就是为了，在mvc.xml中寻找到底是重定向还是转发
//	return null;	  
//  }
	
	//第二种方法
	 public String menuTree(HttpServletRequest req,HttpServletResponse resp) {
		  try {
			ResponseUtil.writeJson(resp, this.permissionDao.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;	  
	  }
	
	
	
}

mvc.xml
配置

<?xml version="1.0" encoding="UTF-8"?>
<config>	
	<action path="/permission" type="com.tang.web.PermissionAction">
		<!-- <forward name="index" path="/index.jsp" redirect="false" /> -->
	</action>
</config>

在WebContent 中的static文件夹中的js文件夹中的index.js有些改变在这里插入图片描述
index.js

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

index.jsp界面的代码没有改变，最后的界面结果是：
在这里插入图片描述