Tree后台实现

最新推荐文章于 2022-06-08 15:12:19 发布

be honoured.IT

最新推荐文章于 2022-06-08 15:12:19 发布

阅读量97

点赞数

文章标签： html5 html javascript

本文链接：https://blog.csdn.net/qq_53601862/article/details/120275556

版权

这篇博客介绍如何使用HTML5和JavaScript实现动态数据显示在页面上的Tree效果。首先明确了目标，即从数据库获取数据并转化为父子结构。接着详细阐述了实现思路，包括创建实体类、引入MVC相关包、在DAO层处理数据转换，以及在Action层处理路径跳转。重点展示了关键代码段，利用Jackson库的writeValueAsString方法将数据转换为JSON并呈现出来。

摘要由CSDN通过智能技术生成

思维导图：

一、明确目标：

今天将要实现的是动态数据的效果，将数据库的数据展现在页面上。

效果：

二、具体思路以及代码实现：
一、思路：首先毋庸置疑的是取到数据，之后就是将数据从以前的平级结构变成父子结构，最后将效果展现出来。
1、首先建立好今天数据对应的实体类

2、要将之前学MVC时的各类包导进去

3、之后就到dao类中写方法，将数据库中的数据平级关系转换成包含关系将tree（Menu）转换成treevo（Menu）（也就是父子关系）

4、将MVC中的跳转路径处理好。

二、代码：

1.dao类：

public class MenuDao extends BaseDao<Menu> {
	public List<Menu> list(Menu menu, PageBean pageBean) throws Exception {
		return super.executeQuery("select * from t_easyui_menu ", Menu.class, pageBean);
	}
 
	public List<TreeVo<Menu>> tree(Menu menu, PageBean pageBean) throws Exception {
		List<Menu> list = this.list(menu, pageBean);
		List<TreeVo<Menu>> listvos = new ArrayList<TreeVo<Menu>>();
		for (Menu m : list) {
			TreeVo<Menu> vo = new TreeVo<>();
			vo.setId(m.getMenuid());
			vo.setText(m.getMenuname());
			vo.setParentId(m.getParentid());
			Map<String, Object> attributes = new HashMap<String, Object>();
			attributes.put("self", m);
			vo.setAttributes(attributes);
			listvos.add(vo);
		}
		return BuildTree.buildList(listvos, "000");
	}

在没有实现tree控件效果时（也就是说没有实现父子级别的效果）：

 {        "id": "004", 
        "text": "统一配置", 
        "state": null, 
        "checked": false, 
        "attributes": {
            "self": {
                "serialNo": "1C63DA57E65243F184D6789A88E137B9", 
                "menuid": "004", 
                "menuname": "统一配置", 
                "menuURL": null, 
                "parentid": "000"
            }
        },

2、MenuAction中的代码：

public class MenuAction extends ActionSupport implements ModelDriver<Menu> {
	Menu menu = new Menu();
	MenuDao md = new MenuDao();
 
	public Menu getModel() {
		return menu;
	}
 
	public String tree(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		try {
			List<TreeVo<Menu>> tree = md.tree(null, null);
			ResponseUtil.writeJson(resp, tree);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}

这里的代码将会实现分级效果，关键代码为：

List<TreeVo<Menu>> tree = md.tree(null, null);
			ResponseUtil.writeJson(resp, tree);

同时也要依据ResponseUtil去将效果展现出来：

	public static void writeJson(HttpServletResponse response,Object o)throws Exception{
	 ObjectMapper om=new ObjectMapper();
	 write(response,om.writeValueAsString(o));
	
	}

其中om.writeValueAsString(o)方法是将属性以及值一起展现出来的方法。

效果展示：