Tree简介前端实现

最新推荐文章于 2022-07-19 06:00:00 发布

秃头程序汪

最新推荐文章于 2022-07-19 06:00:00 发布

阅读量267

点赞数

分类专栏： easyui 文章标签： easyui

本文链接：https://blog.csdn.net/qq_45464930/article/details/106909818

版权

这篇博客介绍了前端实现Tree的过程，重点讨论了字符编码问题及其解决方案，并给出了案例演示，包括所需的jar包、util工具类、entity、vo、dao、mvc配置、jsp和js文件的详细步骤。

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

Tree简介前端实现

前言

前言

昨天为大家分享的是关于Tree案例的后台实现过程，今天为大家分享前端是如何实现的！

接上一篇博文：

Tree案例的后台实现过程

以下这张图片呢就是昨天的最终结果啦！

在这里插入图片描述

1、注意要点

博主在实现这个最终结果的时候，出现了下面这种形式的乱码：
在这里插入图片描述
自己也去找了很多解决方案，也问了身边的小伙伴们，最终得到了以下结论：

记得在最开始新建项目的时候，配置好tomcat之后也一定要记得设置好字符编码

我出现上面乱码的原因是只设置了web中jsp页面的字符编码，而没有设置js、以及json格式的字符编码，所以使用js加载出来的数据会产生乱码！

web中jsp页面字符编码的设置：

1、Window->Preferences->Web->JSP Files 面板选择 UTF-8
在这里插入图片描述
2、Window->Preferences->General ->Content Type->Text->JSP 最下面设置为UTF-8 选择Text->Javascript，将下面的Default Encoding改为UTF-8；

在这里插入图片描述

3、 Window->Preferences->General->Workspace 面板Text file encoding 选择UTF-8；

在这里插入图片描述
接上一张图片：

在这里插入图片描述

2、案例演示

以结果为导向，以下这张图是最终运行结果：

在这里插入图片描述

以下这张图片是数据库表格：

在这里插入图片描述

1、需要导入的jar包依赖：
在这里插入图片描述
2、需要使用到的util工具类以及静态资源文件：

在这里插入图片描述

静态资源文件（固定不变的）：

在这里插入图片描述
3、新建entity、vo、dao包：

Menu实体类：

package com.wangqiuping.entity;

public class Menu {
   

private  String  serialNo;
private  String  menuid;
private  String  menuname;
private  String  menuURL;
private  String  parentid;

public String getserialNo() {
   
	return serialNo;
}
public void setserialNo(String serialNo) {
   
	this.serialNo = serialNo;
}
public String getMenuid() {
   
	return menuid;
}
public void setMenuid(String menuid) {
   
	this.menuid = menuid;
}
public String getMenuname() {
   
	return menuname;
}
public void setMenuname(String menuname) {
   
	this.menuname = menuname;
}
public String getMenuURL() {
   
	return menuURL;
}
public void setMenuURL(String menuURL) {
   
	this.menuURL = menuURL;
}
public String getParentid() {
   
	return parentid;
}
public void setParentid(String parentid) {
   
	this.parentid = parentid;
}
public Menu() {
   
	super();
}
public Menu(String serialNo, String menuid, String menuname, String menuURL, String parentid) {
   
	super();
	this.serialNo = serialNo;
	this.menuid = menuid;
	this.menuname = menuname;
	this.menuURL = menuURL;
	this.parentid = parentid;
}
public Menu(String menuid, String menuname, String menuURL, String parentid) {
   
	super();
	this.menuid = menuid;
	this.menuname = menuname;
	this.menuURL = menuURL;
	this.parentid = parentid;
}
@Override
public String toString() {
   
	return "Menu [serialNo=" + serialNo + ", menuid=" + menuid + ", menuname=" + menuname + ", menuURL=" + menuURL
			+ ", parentid=" + parentid + "]";
}
}

TreeVo类：

package com.wangqiuping.vo;

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


public class TreeVo<T> {
   
	
	private String id;

	private String text;

	private Map<String, Object> state;

	private boolean checked = false;

	private Map<String, Object> attributes;


	private List<TreeVo<T>> children = new ArrayList<TreeVo<T>>();

	
	private String parentId;

	private boolean hasParent = false;

	private boolean has