LayUI系列（二）之树形菜单的实现-阿里云开发者社区

前言

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

一. 树形菜单是什么？

在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;
  }
  @Override
  public 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 block
      e.printStackTrace();
    }
  }
  @Override
  public 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>

运行结果如下：

五. TreeVo工具类作用

TreeVo（Tree Value Object）就是一种用于封装树状数据的工具类，它的作用是简化对树状数据的操作和处理。

TreeVo通过将树状数据封装为一个带有特定属性的对象，方便开发者对树状结构进行遍历、操作、展示等操作。通常，TreeVo类会包含以下属性：

id：节点的唯一标识符，用于标识树节点
parentId：父节点的唯一标识符，用于建立父子关系
children：子节点列表，包含当前节点的所有子节点
otherAttributes：其他自定义的属性，可以根据实际需求灵活添加

今天的分享就到这了，希望可以帮助到你！🙂

LayUI系列（二）之树形菜单的实现

前言

一. 树形菜单是什么？

二. 树形菜单的应用场景

三. 树形菜单的交互功能

四. 代码实现【模拟】

实体类【Permission】

dao层【PermissionDao】

工具类【TreeVo】

后端Action【PermissionAction】

前端jsp界面【main.jsp】

五. TreeVo工具类作用

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

LayUI系列（二）之树形菜单的实现

前言

一. 树形菜单是什么？

二. 树形菜单的应用场景

三. 树形菜单的交互功能

四. 代码实现【模拟】

实体类【Permission】

dao层【PermissionDao】

工具类【TreeVo】

后端Action【PermissionAction】

前端jsp界面【main.jsp】

五. TreeVo工具类作用

热门文章

最新文章

相关电子书