EasyUI加Tree组件实现
前言
前篇博客介绍了EasyUI的作用，今天使用Tree组件实现个树形功能
先来看效果图
首先我们来看官网的介绍
Tree（树）的简介
树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。
树控件数据格式化
每个节点都具备以下属性：
| 属性 | 解释 |
|---|---|
| id： | 节点ID，对加载远程数据很重要。 |
| text： | 显示节点文本。 |
| state： | 节点状态，‘open’ 或 ‘closed’，默认：‘open’。如果为’closed’的时候，将不自动展开该节点。 |
| checked： | 表示该节点是否被选中。 |
| attributes: | 被添加到节点的自定义属性。 |
| children: | 一个节点数组声明了若干节点。 |
我们在jsp界面实现树形菜单时，按照以前学过的知识需要大量c:if，c:feach嵌套遍历。降低了开发效率，所以我们可以使用EasyUI提供的一种更为便捷的方式实现：
我们在页面上写一个空ul标签
然后在static/js中建一个动态的index.js文件
index界面中引用index.js
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script>
官网对应结构节点实体类（TreeVo）：
package com.liuchunming.vo;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
public class TreeVo<T> {
/**
* 节点ID
*/
private String id;
/**
* 显示节点文本
*/
private String text;
/**
* 节点状态，open closed
*/
private Map<String, Object> state;
/**
* 节点是否被选中 true false
*/
private boolean checked = false;
/**
* 节点属性
*/
private Map<String, Object> attributes;
/**
* 节点的子节点
*/
private List<TreeVo<T>> children = new ArrayList<TreeVo<T>>();
/**
* 父ID
*/
private String parentId;
/**
* 是否有父节点
*/
private boolean hasParent = false;
/**
* 是否有子节点
*/
private boolean hasChildren = false;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public Map<String, Object> getState() {
return state;
}
public void setState(Map<String, Object> state) {
this.state = state;
}
public boolean isChecked() {
return checked;
}
public void setChecked(boolean checked) {
this.checked = checked;
}
public Map<String, Object> getAttributes() {
return attributes;
}
public void setAttributes(Map<String, Object> attributes) {
this.attributes = attributes;
}
public List<TreeVo<T>> getChildren() {
return children;
}
public void setChildren(List<TreeVo<T>> children) {
this.children = children;
}
public boolean isHasParent() {
return hasParent;
}
public void setHasParent(boolean isParent) {
this.hasParent = isParent;
}
public boolean isHasChildren() {
return hasChildren;
}
public void setChildren(boolean isChildren) {
this.hasChildren = isChildren;
}
public String getParentId() {
return parentId;
}
public void setParentId(String parentId) {
this.parentId = parentId;
}
public TreeVo(String id, String text, Map<String, Object> state, boolean checked, Map<String, Object> attributes,
List<TreeVo<T>> children, boolean isParent, boolean isChildren, String parentID) {
super();
this.id = id;
this.text = text;
this.state = state;
this.checked = checked;
this.attributes = attributes;
this.children = children;
this.hasParent = isParent;
this.hasChildren = isChildren;
this.parentId = parentID;
}
public TreeVo() {
super();
}
}
数据库表：
节点存储以及构造Tree结构生产类（BulidTree）：
package com.liuchunming.util;
import com.liuchunming.vo.TreeVo;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class BuildTree {
/**
* 默认-1为顶级节点
* @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 || "-1".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;
}
}
通过数据库查询到结果集，转换为节点后，再转换为json字符串
public static void main(String[] args) throws InstantiationException, IllegalAccessException, SQLException, JsonProcessingException {
MenuDao menuDao =new MenuDao();
List<Menu> list = menuDao.list(null, null);
//通过工具类完成指定格式输出
List<TreeVo<Menu>> nodes =new ArrayList<TreeVo<Menu>>();
//Premission的格式是不瞒足easyUI的tree组件的展现的数据格式的
//目的：将List<Permission>转换成List<TreeVo<T>>
//实现：将List<Permission>得到的单个Permission转成TreeVo，将TreeVo加入到nodes
TreeVo treeVo =null;
for (Menu m : list) {
treeVo =new TreeVo<>();
treeVo.setId(m.getMenuid());
treeVo.setText(m.getMenuname());
treeVo.setParentId(m.getParentid());
Map<String, Object> attributes =new HashMap<>();
attributes.put("self", m);
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);
}
打印后输出结果
{"id":"000","text":"菜单管理","state":null,"checked":false,"attributes":{"self":{"menuid":"000","menuname":"菜单管理","parentid":"-1"}},"children":[{"id":"004","text":"统一配置","state":null,"checked":false,"attributes":{"self":{"menuid":"004","menuname":"统一配置","parentid":"000"}},"children":[{"id":"004004","text":"人员管理","state":null,"checked":false,"attributes":{"self":{"menuid":"004004","menuname":"人员管理","parentid":"004"}},"children":[{"id":"004004001","text":"角色维护","state":null,"checked":false,"attributes":{"self":{"menuid":"004004001","menuname":"角色维护","parentid":"004004"}},"children":[],"parentId":"004004","hasParent":true,"hasChildren":false},{"id":"004004004","text":"权限信息维护","state":null,"checked":false,"attributes":{"self":{"menuid":"004004004","menuname":"权限信息维护","parentid":"004004"}},"children":[],"parentId":"004004","hasParent":true,"hasChildren":false},{"id":"004004003","text":"人员信息维护","state":null,"checked":false,"attributes":{"self":{"menuid":"004004003","menuname":"人员信息维护","parentid":"004004"}},"children":[],"parentId":"004004","hasParent":true,"hasChildren":false},{"id":"004004002","text":"工作组维护","state":null,"checked":false,"attributes":{"self":{"menuid":"004004002","menuname":"工作组维护","parentid":"004004"}},"children":[],"parentId":"004004","hasParent":true,"hasChildren":false}],"parentId":"004","hasParent":true,"hasChildren":true},{"id":"004001","text":"数据字典","state":null,"checked":false,"attributes":{"self":{"menuid":"004001","menuname":"数据字典","parentid":"004"}},"children":[],"parentId":"004","hasParent":true,"hasChildren":false},{"id":"004003","text":"权限管理","state":null,"checked":false,"attributes":{"self":{"menuid":"004003","menuname":"权限管理","parentid":"004"}},"children":[{"id":"004003003","text":"用户权限管理","state":null,"checked":false,"attributes":{"self":{"menuid":"004003003","menuname":"用户权限管理","parentid":"004003"}},"children":[],"parentId":"004003","hasParent":true,"hasChildren":false},{"id":"004003002","text":"组权限管理","state":null,"checked":false,"attributes":{"self":{"menuid":"004003002","menuname":"组权限管理","parentid":"004003"}},"children":[],"parentId":"004003","hasParent":true,"hasChildren":false},{"id":"004003001","text":"角色权限管理","state":null,"checked":false,"attributes":{"self":{"menuid":"004003001","menuname":"角色权限管理","parentid":"004003"}},"children":[],"parentId":"004003","hasParent":true,"hasChildren":false}],"parentId":"004","hasParent":true,"hasChildren":true},{"id":"004002","text":"系统参数配置","state":null,"checked":false,"attributes":{"self":{"menuid":"004002","menuname":"系统参数配置","parentid":"004"}},"children":[],"parentId":"004","hasParent":true,"hasChildren":false}],"parentId":"000","hasParent":true,"hasChildren":true},{"id":"002","text":"后勤管理","state":null,"checked":false,"attributes":{"self":{"menuid":"002","menuname":"后勤管理","parentid":"000"}},"children":[{"id":"002004","text":"宿舍日常报销","state":null,"checked":false,"attributes":{"self":{"menuid":"002004","menuname":"宿舍日常报销","parentid":"002"}},"children":[{"id":"002004002","text":"大件购置","state":null,"checked":false,"attributes":{"self":{"menuid":"002004002","menuname":"大件购置","parentid":"002004"}},"children":[],"parentId":"002004","hasParent":true,"hasChildren":false},{"id":"002004001","text":"维修","state":null,"checked":false,"attributes":{"self":{"menuid":"002004001","menuname":"维修","parentid":"002004"}},"children":[],"parentId":"002004","hasParent":true,"hasChildren":false}],"parentId":"002","hasParent":true,"hasChildren":true},{"id":"002001","text":"宿舍管理","state":null,"checked":false,"attributes":{"self":{"menuid":"002001","menuname":"宿舍管理","parentid":"002"}},"children":[],"parentId":"002","hasParent":true,"hasChildren":false},{"id":"002005","text":"后勤统计","state":null,"checked":false,"attributes":{"self":{"menuid":"002005","menuname":"后勤统计","parentid":"002"}},"children":[],"parentId":"002","hasParent":true,"hasChildren":false},{"id":"002002","text":"水电费","state":null,"checked":false,"attributes":{"self":{"menuid":"002002","menuname":"水电费","parentid":"002"}},"children":[],"parentId":"002","hasParent":true,"hasChildren":false},{"id":"002003","text":"房屋租金","state":null,"checked":false,"attributes":{"self":{"menuid":"002003","menuname":"房屋租金","parentid":"002"}},"children":[{"id":"002003002","text":"租金信息","state":null,"checked":false,"attributes":{"self":{"menuid":"002003002","menuname":"租金信息","parentid":"002003"}},"children":[],"parentId":"002003","hasParent":true,"hasChildren":false},{"id":"002003001","text":"租房合同","state":null,"checked":false,"attributes":{"self":{"menuid":"002003001","menuname":"租房合同","parentid":"002003"}},"children":[],"parentId":"002003","hasParent":true,"hasChildren":false}],"parentId":"002","hasParent":true,"hasChildren":true}],"parentId":"000","hasParent":true,"hasChildren":true},{"id":"003","text":"财务","state":null,"checked":false,"attributes":{"self":{"menuid":"003","menuname":"财务","parentid":"000"}},"children":[{"id":"003003","text":"住宿费","state":null,"checked":false,"attributes":{"self":{"menuid":"003003","menuname":"住宿费","parentid":"003"}},"children":[{"id":"003003002","text":"水电费","state":null,"checked":false,"attributes":{"self":{"menuid":"003003002","menuname":"水电费","parentid":"003003"}},"children":[],"parentId":"003003","hasParent":true,"hasChildren":false},{"id":"003003001","text":"租金","state":null,"checked":false,"attributes":{"self":{"menuid":"003003001","menuname":"租金","parentid":"003003"}},"children":[],"parentId":"003003","hasParent":true,"hasChildren":false}],"parentId":"003","hasParent":true,"hasChildren":true},{"id":"003002","text":"成考费","state":null,"checked":false,"attributes":{"self":{"menuid":"003002","menuname":"成考费","parentid":"003"}},"children":[],"parentId":"003","hasParent":true,"hasChildren":false},{"id":"003001","text":"学费","state":null,"checked":false,"attributes":{"self":{"menuid":"003001","menuname":"学费","parentid":"003"}},"children":[{"id":"003001002","text":"升学学费","state":null,"checked":false,"attributes":{"self":{"menuid":"003001002","menuname":"升学学费","parentid":"003001"}},"children":[],"parentId":"003001","hasParent":true,"hasChildren":false},{"id":"003001001","text":"开学学费","state":null,"checked":false,"attributes":{"self":{"menuid":"003001001","menuname":"开学学费","parentid":"003001"}},"children":[],"parentId":"003001","hasParent":true,"hasChildren":false}],"parentId":"003","hasParent":true,"hasChildren":true}],"parentId":"000","hasParent":true,"hasChildren":true},{"id":"001","text":"学生管理","state":null,"checked":false,"attributes":{"self":{"menuid":"001","menuname":"学生管理","parentid":"000"}},"children":[{"id":"001005","text":"就业信息","state":null,"checked":false,"attributes":{"self":{"menuid":"001005","menuname":"就业信息","parentid":"001"}},"children":[],"parentId":"001","hasParent":true,"hasChildren":false},{"id":"001003","text":"缴费信息","state":null,"checked":false,"attributes":{"self":{"menuid":"001003","menuname":"缴费信息","parentid":"001"}},"children":[],"parentId":"001","hasParent":true,"hasChildren":false},{"id":"001001","text":"学生相关信息","state":null,"checked":false,"attributes":{"self":{"menuid":"001001","menuname":"学生相关信息","parentid":"001"}},"children":[],"parentId":"001","hasParent":true,"hasChildren":false},{"id":"001004","text":"表现相关信息","state":null,"checked":false,"attributes":{"self":{"menuid":"001004","menuname":"表现相关信息","parentid":"001"}},"children":[],"parentId":"001","hasParent":true,"hasChildren":false},{"id":"001002","text":"班级相关信息","state":null,"checked":false,"attributes":{"self":{"menuid":"001002","menuname":"班级相关信息","parentid":"001"}},"children":[],"parentId":"001","hasParent":true,"hasChildren":false}],"parentId":"000","hasParent":true,"hasChildren":true}],"parentId":"-1","hasParent":false,"hasChildren":true}
拿到结果去json在线解析工具中转一下json格式https://www.sojson.com/.
然后覆盖到项目中的json中
这里遇到个乱码问题：
解决方案：
选中json文件右键点Properties或者使用快捷键Alt+Enter，进入Resource界面
然后打开json文件会发现再次乱码
重新拿到结果集到json在线转换工具类转换一下格式。并替换就行了。
总结
今天就到这里了如果有什么不对的地方欢迎大家在评论区留言交流改进！！
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
