前言

继续上一篇博客的内容，在原来代码的基础上实现树形菜单功能

一. 树形菜单是什么？

在layui中，树形菜单是通过 Tree 组件实现的。Tree 组件提供了一种树形结构展示数据的方式，常用于显示层级结构的菜单、目录等。开发者可以通过配置项和方法对树形菜单进行定制和操作。
树形菜单是一种常见的UI组件，用于呈现层级结构的导航菜单、目录结构或树状数据。它通过递归的方式展示数据，每个节点可以拥有子节点，形成层级关系。

二. 树形菜单的应用场景

导航菜单：树形菜单可以用于构建具有多级层次的导航菜单。用户可以通过点击菜单项进行导航或展开/折叠子菜单。

目录结构：树形菜单常用于展示文件系统或目录结构，使用户可以方便地浏览和管理文件或文件夹。

组织架构：树形菜单可以展示组织机构的层级结构，例如公司的部门、团队或分支机构，方便用户了解组织的层级关系。

分类标签：树形菜单可以用于展示分类或标签的层级关系，使用户能够选择或筛选特定的分类或标签。

三. 树形菜单的交互功能

展开/折叠：用户可以点击节点来展开或折叠其子节点，以显示或隐藏更深层次的菜单项。
点击事件：用户可以通过点击节点触发相关的事件或动作，如导航到特定页面、展开/折叠子菜单、选择分类等。
右键菜单：某些树形菜单支持右键操作，可以弹出上下文菜单，提供更多的操作选项。

四. 代码实现【模拟】

实体类【Permission】

package com.zking.entity;public class Permission {private long id;private String name;private String description;private String url;private long pid;private int ismenu;//控制当前系统的权限是菜单还是按钮private long displayno;public Permission() {// TODO Auto-generated constructor stub}public long getId() {return id;}public void setId(long id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getDescription() {return description;}public void setDescription(String description) {this.description = description;}public String getUrl() {return url;}public void setUrl(String url) {this.url = url;}public long getPid() {return pid;}public void setPid(long pid) {this.pid = pid;}public int getIsmenu() {return ismenu;}public void setIsmenu(int ismenu) {this.ismenu = ismenu;}public long getDisplayno() {return displayno;}public void setDisplayno(long displayno) {this.displayno = displayno;}public Permission(long id, String name, String description, String url, long pid, int ismenu, long displayno) {super();this.id = id;this.name = name;this.description = description;this.url = url;this.pid = pid;this.ismenu = ismenu;this.displayno = displayno;}@Overridepublic String toString() {return "Permission [id=" + id + ", name=" + name + ", description=" + description + ", url=" + url + ", pid="+ pid + ", ismenu=" + ismenu + ", displayno=" + displayno + "]";}}

dao层【PermissionDao】

package com.zking.dao;import java.util.ArrayList;
import java.util.List;import com.zking.entity.Permission;
import com.zking.util.BaseDao;
import com.zking.util.BuildTree;
import com.zking.util.PageBean;
import com.zking.util.TreeVo;public class PermissionDao extends BaseDao<Permission> {public List<Permission> list(Permission permission, PageBean pageBean) throws Exception {String sql = "select *from t_easyui_permission";return super.executeQuery(sql, Permission.class, pageBean);}//	将数据库查询出的平级数据，转换成父子关系的数据public List<TreeVo<Permission>> menus(Permission permission, PageBean pageBean) throws Exception{List<TreeVo<Permission>> lst = new ArrayList<TreeVo<Permission>>();List<Permission> list = this.list(permission, pageBean);for (Permission p : list) {TreeVo<Permission> vo = new TreeVo<>();vo.setId(p.getId()+"");vo.setText(p.getName());vo.setParentId(p.getPid()+"");lst.add(vo);}return BuildTree.buildList(lst, "0");}
}

工具类【TreeVo】

package com.zking.util;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();}}

后端Action【PermissionAction】

package com.zking.web;import java.util.List;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.zking.dao.PermissionDao;
import com.zking.entity.Permission;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
import com.zking.util.TreeVo;public class PermissionAction extends ActionSupport implements ModelDriver<Permission> {private Permission permission = new Permission();private PermissionDao pd = new PermissionDao();public void menus(HttpServletRequest req, HttpServletResponse resp) {try {List<TreeVo<Permission>> menus = pd.menus(null, null);ResponseUtil.writeJson(resp, menus);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}@Overridepublic Permission getModel() {return permission;}}

前端jsp界面【main.jsp】

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div><!-- 头部区域（可配合layui 已有的水平导航） --><ul class="layui-nav layui-layout-left"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li><!-- Top导航栏 --><li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li><li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li><li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li><li class="layui-nav-item"><a href="javascript:;">nav groups</a><dl class="layui-nav-child"><dd><a href="">menu 11</a></dd><dd><a href="">menu 22</a></dd><dd><a href="">menu 33</a></dd></dl></li></ul><!-- 个人头像及账号操作 --><ul class="layui-nav layui-layout-right"><li class="layui-nav-item layui-hide layui-show-md-inline-block"><a href="javascript:;"><img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">tester</a><dl class="layui-nav-child"><dd><a href="">Your Profile</a></dd><dd><a href="">Settings</a></dd><dd><a href="login.jsp">Sign out</a></dd></dl></li><li class="layui-nav-item" lay-header-event="menuRight" lay-unselect><a href="javascript:;"><i class="layui-icon layui-icon-more-vertical"></i></a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">menu group 1</a><dl class="layui-nav-child"><dd><a href="javascript:;">menu 1</a></dd><dd><a href="javascript:;">menu 2</a></dd><dd><a href="javascript:;">menu 3</a></dd><dd><a href="">the links</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">menu group 2</a><dl class="layui-nav-child"><dd><a href="javascript:;">list 1</a></dd><dd><a href="javascript:;">list 2</a></dd><dd><a href="">超链接</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">click menu item</a></li><li class="layui-nav-item"><a href="">the links</a></li> </ul></div></div><div class="layui-body"><!-- 内容主体区域 --><div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div></div><div class="layui-footer"><!-- 底部固定区域 -->底部固定区域</div>
</div>
<script>
//JS 
layui.use(['element', 'layer', 'util'], function(){var element = layui.element,layer = layui.layer,util = layui.util,$ = layui.$;$.ajax({url:'${pageContext.request.contextPath }/permission.action?methodName=menus',dataType:'json',success:function(data){console.log(data)var htmlStr = '';$.each(data,function(i,n){htmlStr +='<li class="layui-nav-item layui-nav-itemed">';htmlStr +='<a class="" href="javascript:;">'+n.text+'</a>';if(n.hasChildren){var children=n.children;htmlStr +='<dl class="layui-nav-child">';$.each(children,function(index,node){htmlStr +='<dd><a href="javascript:;">'+node.text+'</a></dd>';})htmlStr +='</dl>';}htmlStr +='</li>';})$("#menu").html(htmlStr);element.render('menu');} });
});
</script>
</body>
</html>

运行结果如下：

在这里插入图片描述