easyUI之tree组件实现思路之前端实现效果

本文介绍如何利用easyUI的tree组件,结合从MySQL数据库获取的json数据,实现前端展示。首先回顾了从数据库获取json数据的方法,接着详细展示了实现tree组件的代码流程,包括关键代码片段。最后,作者强调在编程过程中应保持思维灵活性,随着学习深入,理解也会更加透彻。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

将MySQL中的数据传入tree组件实现思路之前端实现效果

前言

前面我已经讲过了后台获取MySQL数据库中的对应json格式的数据,今天我们来把它做成tree!

指路:
获取MySQL数据库中的对应json格式的数据

实现

实现效果:
在这里插入图片描述
注:我这次用的表和上一篇博客不一样!
这次的表:
在这里插入图片描述

实现思路:
在这里插入图片描述

实现流程:
在这里插入图片描述
实现流程代码1:

上面是一个默认的顶级节点为0的是上一篇博客中使用到循环方法
下面是一个传递指定顶级节点的方法
package com.zengjing.vo;


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

public class BuildTree {

	/**
	 * 默认0为顶级节点
	 * @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 || "0".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("-1");
			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;
	}

}

实现流程代码2:

返回json格式数据的方法
package com.zengjing.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.zengjing.entity.Menu;
import com.zengjing.util.BaseDao;
import com.zengjing.util.PageBean;
import com.zengjing.vo.BuildTree;
import com.zengjing.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>> toNode(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);
		
		
		
	}
	
}

实现流程代码3:

调用工具类输出json格式的文件
package com.zengjing.action;

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

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


public class MenuAction extends ActionSupport implements ModelDriven<Menu> {

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

	@Override
	public Menu getModel() {
		return menu;
	}
	
	
	public String menuTree(HttpServletRequest req,HttpServletResponse resp) {
		try {
			ResponseUtil.writeJson(resp, this.md.toNode(null, null));
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}

}

涉及到的ResponseUtil:

package com.zengjing.util;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;

public class ResponseUtil {
	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();
	}
}

总结

在写代码中我们的思维需要更加灵活,不能太过于死板的像写作文一样噼里啪啦写下去!越学习到后面理解越深!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值