easyui的tree前端效果实现

前言

在我们了解tree前端效果实现之前，先来看看tree后端的代码实现吧
https://blog.csdn.net/qq_46964039/article/details/106898525
当看完了后端的再来看看，前端的效果是怎么出来的

一、tree前端效果实现步骤

1、导入需要的jar包和工具类

导入其他的包类前我们先做一件这样的事

再导入前端需要的jar包mvc.xml

工具类
最开始导入这个工具类是的代码

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 class ResponseUtil {
/**
 * 用于设置字符格式和关闭流
 * @param response
 * @param o
 * @throws Exception
 */
	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();
	}
}

2、开始写dao方法

先看一下dao方法的代码

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 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) {
			System.out.println(p);
			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,"-1");
	}
	
	
	public static void main(String[] args) throws InstantiationException, IllegalAccessException, SQLException, JsonProcessingException {
		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) {
			System.out.println(p);
			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);
	}
}

也就是因为写了这一个方法所以action类中就会简便一些代码

public class PermissionAction extends ActionSupport implements ModelDriven<Permission>{

	private Permission permission=new Permission();
	private PermissionDao permissionDao=new PermissionDao();
	@Override
	public Permission getModel() {
		// TODO Auto-generated method stub
		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, this.permissionDao.topNode(null, null));
		} catch (InstantiationException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		//结果码的配置就是为了在mvc.xml中寻找重定向还是转发
		return null;
	}
	
}

解说：

TreeVo<Permission> topNode = this.permissionDao.topNode(null, null);
			List<TreeVo<Permission>> list=new ArrayList<TreeVo<Permission>>();
			list.add(topNode);
			
			这些代码可以不用直接用下面的一行代码

ResponseUtil.writeJson(resp, this.permissionDao.topNode(null, null));

最后呈现的效果图

三、补充知识点

怎么样排查bug

解决bug呢我们要先分析到底是前端的错误还是后端的错误

1、我们先看是不是缓存问题，如果是缓存问题就 ctrl+shift+f 去除浏览器的缓存问题 2、如果不是缓存问题，那么就按F12 ，看F12控制台中有没有爆红，如果爆红那么就表示你的js代码中的地址错，如果没有出现爆红的现象，那么就要开始排查后端的代码 3、首先要根据经验找到对应会执行的方法，打上断点，如果凭经验打的断点没有执行，那么就看控制台提示的错误点

总结：不足之处，欢迎评论区逛街！！！！