Layui之动态树(树形菜单)详解

已于 2023-07-12 12:35:43 修改
阅读量3k 收藏
点赞数 2
分类专栏： Layui 文章标签： layui java 前端
于 2023-07-12 12:21:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73320743/article/details/131678821
版权

目录

一.什么是树形菜单

概述：

 实际应用：

二.效果展示

三.详细步骤

1.左侧选项卡实体类

2.通过dao方法获取数据

3.编写后台获取数据传输到前台

4.前端代码

 5.实现思路

一.什么是树形菜单

概述：

Layui是一个基于JavaScript的前端框架，它提供了许多UI组件和工具，方便开发者快速构建Web应用程序。

树形菜单是Layui中的一个UI组件，用于显示层级结构的树形列表菜单。它常用于展示具有父子关系的数据，比如文件夹结构、部门组织等。树形菜单一般由层级结构的节点组成，每个节点都可以展开和折叠，同时可以包含子节点。

在Layui中，使用树形菜单组件需要先引入相关的CSS和JavaScript文件，然后在HTML页面中定义一个容器元素，通过JavaScript代码初始化树形菜单，并将数据绑定到菜单上。可以通过配置项来设置菜单的样式、展示效果、点击事件等。

通过使用Layui的树形菜单组件，开发者可以方便地展示和操作层级结构的数据，并实现一些常见的功能，如展开、折叠、选中等。

 实际应用：

树形菜单在实际应用中有广泛的用途。以下是一些常见的实际应用场景：

  1. 文件夹结构：树形菜单可以用于展示文件系统中的文件夹结构，允许用户通过展开和折叠节点来查看和管理文件和文件夹。

  2. 组织结构：树形菜单适用于展示公司或组织的层级结构，例如部门组织结构图，方便用户查看和导航不同的部门和成员之间的关系。

  3. 导航菜单：树形菜单可以作为网站或应用程序的导航菜单，提供多级菜单的嵌套结构，方便用户浏览和选择不同的页面或功能。

  4. 分类目录：树形菜单可以用于展示商品分类目录，让用户浏览和选择不同的商品类别，实现快速导航和筛选。

  5. 权限管理：树形菜单可以用于权限管理系统，展示用户的权限层级结构，用户可以根据自己的权限设置来展开或折叠对应的功能模块。

这些只是树形菜单的一些常见应用场景，实际上树形菜单的应用范围非常广泛，只要有层级结构的数据需要展示和操作，都可以考虑使用树形菜单来实现。

二.效果展示

 

三.详细步骤

1.左侧选项卡实体类

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 + "]";
	}

2.通过dao方法获取数据

1.1 通过permissiondao获取数据库表中所有菜单栏数据

public List<Permission> list(Permission permission, PageBean pageBean) throws Exception {
		String sql = "select * from t_oa_permission";
		return super.executeQuery(sql, Permission.class, pageBean);
	}

1.2 将获取到的平级数据转换成父子关系的数据

//将数据库查询出来的平级数据转换成父子关系的数据
	public List<TreeVo<Permission>> menu(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, "-1");
	}

3.编写后台获取数据传输到前台

package com.YU.web;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.YU.dao.PermissionDao;
import com.YU.entity.Permission;
import com.YU.framework.ActionSupport;
import com.YU.framework.ModelDriver;
import com.YU.util.ResponseUtil;
import com.YU.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) throws Exception {
		List<TreeVo<Permission>> menus = pd.menu(null, null);
		ResponseUtil.writeJson(resp, menus);
	}
	@Override
	public Permission getModel() {
		return null;
	}
	
}

注：需要到XML文件中进行配置

<action path="/permission" type="com.zking.web.PermissionAction">
	</action>

4.前端代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>
<%@include file="/common/header.jsp" %>
</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>
        </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",
	  data:"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(idx, child) { // 使用 children 进行遍历
			      htmlStr += '<dd><a href="javascript:;">' + child.text + '</a></dd>'; // 生成子节点的HTML字符串
			    });
			    htmlStr += '</dl>'; // 注意闭合 <dl> 标签位置
			  }
			  htmlStr += '</li>'; // 注意闭合 <li> 标签位置
			});

		  $("#menu").html(htmlStr);
			element.render('menu');
	  }
  })
  
});
</script>
</body>
</html>

 5.实现思路

根据子级中的rid对应的父级id确定级别关系

例：

上图中的 id对应下图的表示的父级id 

 

在遍历父级目录时，遍历子级目录寻找对应的id

ChatYU.
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JS树形菜单组件Bootstrap TreeView使用方法详解
10-20
主要为大家详细介绍了js组件Bootstrap TreeView使用方法，本文一部分针对于bootstrap的treeview的实践，另一部分是介绍自己写的树形菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
layui树形菜单动态遍历的例子
10-16
今天小编就为大家分享一篇layui树形菜单动态遍历的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
LayUi+MVC 树形组件tree 实现懒加载模式，展开父节点时异步加载子节点数据
ab17171313的博客
07-27 1727
LayUi 树形组件tree 实现懒加载模式，展开父节点时异步加载子节点数据
LayUI—tree树形结构的使用，java三年经验面试题
最新发布
2401_83946545的博客
03-30 664
checked | 节点是否初始为选中状态（如果开启复选框的话），默认 false | Boolean | true || id | 节点唯一索引，用于对指定节点进行各类操作 | String/Number | 任意唯一的字符或数字 || accordion | 是否开启手风琴模式，默认 false | Boolean | false |默认 false | Boolean | false || spread | 节点是否初始展开，默认 false | Boolean | true |
layui-tree树形组件改写，可编辑、上移、下移、拖拽修改
04-13
将文件直接复制到layui/lay/modules目录下，会覆盖layui原有的tree.js，调用方法与layui树形组件的适应方式一致，新增的方法可在文件中查看
jquery树形插件zTree高级使用详解
12-09
使用高级zTree进行对属性结构进行操作的时候，做好的方式是参考官网的API文档。 本文简单介绍下如何通过后台传递过来一个树形结构的树，并且通过页面进行加载。 【与后台交互步骤】1、编写页面，引入zTree相关插件；2、编写js脚本，设定树形结构的基本属性；3、编写zTree的PO对象；4、编写返回属性结构的方法（json格式返回）；5、页面请求树。 1、引入zTree相关的插件： [removed]/resources/js/jquery-1.9.1.min.js"></scr
LayUI—tree树形结构的使用
热门推荐
小马同学
09-01 10万+
树形结构在实际开发中很长用到，比如部门管理，权限菜单等。因为用树形结构来展示会显的很清晰明了。最近写了一个个人博客小项目中用到了LayUI的树形结构，之后写了一个小案例整理一下。 官网地址：https://www.layui.com/v1/doc/modules/tree.html 先看一下显示的效果图。 点击节点右面会显示对应部门的详情信息，可以修改。可以自定义按钮添加部门，也可以直接...
Layui----动态树
m0_74934282的博客
07-12 1096
LayUI的动态树（Dynamic Tree）是LayUI框架中提供的一种功能强大且易于使用的组件，用于在网页中展示具有层级结构的数据，LayUI是一款基于jQuery的前端开发框架，动态树是LayUI框架中提供的一个组件，用于在网页中展示具有层级结构的数据，如树形菜单。动态树组件可以实现数据的展开和折叠、节点的选中和取消选中等功能，并提供了丰富的事件和方法，方便开发者对树节点进行操作和控制。通过动态树组件，开发者可以方便地实现树状结构的数据展示和交互操作，提升用户体验。
LayUI中的内置模块之 树形组件文档 - layui.tree
daimeijin的博客
08-14 7470
前言 最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。 树形组件文档 在一段漫长的雪藏后，我们在 layui 2.5.0 的版本中重新创作了 tree，以便它能够更加适用于绝大多数业务场景，而风格依然遵循 layui 独有的极简和清爽。需要提醒的是，如果
layui框架学习（30：树形模块）
gc_2299的博客
06-29 1460
学习并记录layui框架中内置模块的树形模块的函数、参数设置方式。
LayUi之树形结构的详解（附有全案例代码）
m0_74315688的博客
07-12 2669
怎么灵活的使用LayUi?怎么用LayUi完成树形结构中的数据交互？一篇全部解决，手把手教学！！
layui添加动态菜单与选项卡
10-16
主要为大家详细介绍了layui添加动态菜单与选项卡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
详解layui中的树形关于取值传值问题
08-28
本篇文章主要介绍了详解layui中的树形关于取值传值问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
javascript制作 树形菜单.zip
03-20
js制作 树形菜单.zip
layui菜单管理（树结构）
01-09
layui菜单页面，用火狐浏览器打开index.html可以查看演示，非常好用的
thinkphp转layui树形组件
09-22
由于layui树形组件格式的特殊性，可能从mysql查出数据组装成layui属性组件所需的数据格式这一点会让你头痛； 在该文件中完整的展示了如何利用tp的模型从mysql取得数据，并进行无限分类，最终转换成layui树形组件所需正确格式，当然也添加了一些layui所需的自定义属性（例如：title、spread等），几乎每一行都有注释，也表明了如何将无限分数据转为layui属性组件的要点总结，希望可以帮助到你。
Bootstrap树形菜单插件TreeView.js使用方法详解
10-21
主要为大家详细介绍了Bootstrap树形菜单插件TreeView.js使用方法,一款非常酷的基于bootstrap的jQuery多级列表树插件，具有一定的实用性，感兴趣的小伙伴们可以参考一下
BootStrap实现树形目录组件代码详解
09-02
主要介绍了BootStrap实现树形目录组件代码详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
Layui组件Tree的使用技巧
天涯芳草
07-17 6884
场景一：@RequestBody 接收Json数组对象及对象参数中有数组参数，如下图，我们希望后台接收一个包含json对象的数据，数据格式如下: ） （上图获取到的数据如下:） [ {"id":1,"title":"一级1","filed":null,"checked":true,"spread":true,"href":null,"children":[{"id":3,"title":"二级1-1 可允许跳转","filed":null,"che...
matlab生成决策树详解
07-25
在MATLAB中，可以使用fitctree函数生成决策树模型。下面是一个详细的步骤说明： 1. 准备数据：将训练数据保存在一个m×n的矩阵中，其中m是样本数量，n是特征数量。将每个样本的标签保存在一个m维的向量中，表示每个样本的类别。 2. 构建决策树模型：使用fitctree函数来构建决策树模型。该函数的基本语法如下： ```matlab tree = fitctree(data, labels); ``` 这里，data是训练数据矩阵，labels是对应的标签向量。fitctree函数会自动根据训练数据和标签构建出一棵决策树，并返回一个分类器对象tree。 3. 可选：设置决策树模型的参数：fitctree函数支持一些可选参数，可以根据需要进行设置。例如，可以设置最大深度、最小叶子数、分裂准则等。例如： ```matlab tree = fitctree(data, labels, 'MaxDepth', 5, 'MinLeafSize', 10); ``` 4. 可选：使用交叉验证选择最优参数：如果需要选择最优的参数设置，可以使用交叉验证。可以通过创建一个模板，然后使用fitcecoc函数进行交叉验证选择最佳参数。例如： ```matlab t = templateTree('MaxNumSplits', 'all'); tree = fitcecoc(data, labels, 'Learners', t, 'CrossVal', 'on'); ``` 5. 可选：绘制决策树图形：可以使用view函数来可视化生成的决策树模型。例如： ```matlab view(tree, 'Mode', 'graph'); ``` 6. 使用训练好的决策树模型进行预测：将测试数据保存在一个p×n的矩阵中，其中p是测试样本数量，n是特征数量。使用predict函数对测试数据进行分类预测，得到预测结果。例如： ```matlab predictions = predict(tree, testData); ``` 这里，tree是训练好的决策树模型，testData是测试数据矩阵。 通过以上步骤，你可以在MATLAB中生成决策树模型，并用于分类任务。根据具体需求，可以调整参数和参数设置来优化决策树模型的性能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ChatYU.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值