1、前言

在我们实现菜单管理页面的时候,有时候我们需要默认展开所有的菜单列表,但是因为后端有时候没有返回所有菜单ids数组。

而且我们也不容易获取到所有菜单ids,比如如果我们通过角色id查询到所有菜单ids数组,但是如果这个角色后面有一个菜单给它不关联了怎么办?如果说后面这个角色删除了怎么办?这样就不能通过角色id查询到所有的ids数组。

2、代码实现

util.js

//返回菜单树中所有的菜单ids
export function getAllMenuIds(menuTree, ids = []) {
for (let i = 0; i < menuTree.length; i++) {
const item = menuTree[i];
ids.push(item.id);
if (item.children && item.children.length > 0) {
getAllMenuIds(item.children, ids);
}
}
return ids;
}

遍历菜单树得到所有菜单ids的更多相关文章

  1. React + Antd Menu组件实现菜单树

    准备好两个变量,一个用来保存平级菜单列表,一个用来保存遍历后的菜单树. 推荐后端返回平级菜单树,假如菜单比较多,可以直接结合find方法找到菜单,做搜索功能很省事. const [menuList, ...

  2. vue中组件之间的相互调用,及通用后台管理系统左侧菜单树的迭代生成

    由于本人近期开始学习使用vue搭建一个后端管理系统的前端项目,在左侧生成菜单树的时候遇到了一些问题.在这里记录下 分析:由于本人设定的菜单可以使多级结构,直接使用vue的v-for 遍历并不是很方便. ...

  3. bootstrap treeview实现菜单树

    本博客,介绍通过Bootstrap的treeview插件实现菜单树的功能. treeview链接:http://www.htmleaf.com/Demo/201502141380.html ORM框架 ...

  4. java生成多级菜单树

    使用java实现一个多级菜单树结构 先上数据库 ps_pid字段很重要,是父级菜单的id Menu类 Menu类要新增一个字段,用来存放子菜单 /** * 子菜单列表 */ private List& ...

  5. 蓝桥杯Web:【功能实现】菜单树检索

    [功能实现]菜单树检索 背景介绍 实际工作中很多前端攻城狮都会遇到这样一个需求:在多级菜单树中模糊搜索匹配的菜单项,并显示出来. 本题需要在已提供的基础项目中使用 Vue.js 知识,实现对已提供的二 ...

  6. java实现的可以无限级别添加子节点的菜单树

    网上大部分菜单树,都是单独用js代码来实现的,这样做的缺点是:用户无法动态的设置菜单项,比如,超级管理员可能需要根据每个用户的权限,赋予他们不同的系统功能,不同的功能对应着不同数量的菜单项. 对于此问 ...

  7. 以正确的姿势实现一棵JavaScript菜单树

    菜单树是常见的前端特效, 一般长下面这样 还有各种形态的变种, 有长这样的 也有长这样的 尽管这些菜单的相貌都不尽相同, 在功能实现的本质上却都是相同的.实现程序的大致流程如下 读取服务器端的菜单数据 ...

  8. Mybatis通过colliection属性递归获取菜单树

    1.现有商品分类数据表category结构如下,三个字段都为varchar类型 2.创建商品分类对应的数据Bean /** * */ package com.xdw.dao; import java. ...

  9. DWZ SSH2 菜单树--使用Struts2 标签(iterator/set/if 组合使用)

    最近在研究DWZ框架,然后要写一个菜单树,后台我使用了SSH2,然后想把菜单通过后台传过来的对象展示出来. 但是,发现应用样式的时候,如果子菜单在子循环中为空的话,会多出一对空标签“<ul> ...

  10. java从数据库读取菜单,递归生成菜单树

    首先看一下菜单的样子 根据这个样子我们定义菜单类 public class Menu { // 菜单id private String id; // 菜单名称 private String name; ...

随机推荐

  1. Docker系列——Docker-Compose、Docker网络扩展

    目录 一 Docker Compose 简介 1.1 Docker Compose介绍 1.2 Docker Compose 工作原理 1.3 Docker Compose安装 1.4 Docker ...

  2. Java编程之道:巧妙解决Excel公式迭代计算难题

    本文由葡萄城技术团队原创并首发.转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 什么是迭代计算 迭代计算其实是在 Excel 中,一种公式的循环引用,对于了 ...

  3. ABP中关于Swagger的一些配置

    Abp 集成 Swagger 官方文档, 请参考 Swagger Integration AspNetCore 配置 Swagger, 请参考 Swashbuckle.AspNetCore 本文的项目 ...

  4. tunm, 一种对标JSON的二进制数据协议

    Tunm simple binary proto 一种对标JSON的二进制数据协议 支持的数据类型 基本支持的类型 "u8", "i8", "u16& ...

  5. ELK-日志收集-Kibana WEB安全认证

    1.ELK收集MYSQL日志实战: 日志收集存放目录位置: /usr/local/logstash/config/etc/   1)日志采集-存入redis缓存数据库:mysql-redis.conf ...

  6. 如何去掉桌面快捷方式左下角的小箭头(Win11)

    在对系统重命名之后,在快捷方式的左下角莫名的出现了小图标 如果想要去掉这个小图标 (1)首先在桌面上创建一个txt文件 (2)打开后输入指令 reg add "HKEY_LOCAL_MACH ...

  7. 如何避免JavaScript中的内存泄漏?

    前言 过去,我们浏览静态网站时无须过多关注内存管理,因为加载新页面时,之前的页面信息会从内存中删除. 然而,随着单页Web应用(SPA)的兴起,应用程序消耗的内存越来越多,这不仅会降低浏览器性能,甚至 ...

  8. 如何系统学习Python?

    学习 Python 可以通过以下系统性的步骤进行: 1. 设定学习目标 确定你学习 Python 的主要目的,是为了编写脚本.数据分析.Web 开发.机器学习还是其他应用?理解这个目标可以帮助你更有针 ...

  9. python 数据可视化:直方图、核密度估计图、箱线图、累积分布函数图

    本文使用数据来源自2023年数学建模国赛C题,以附件1.附件2数据为基础,通过excel的数据透视表等功能重新汇总了一份新的数据表,从中截取了一部分数据为例用于绘制图表.绘制的图表包括一维直方图.一维 ...

  10. XOR加密

    coding=utf-8 md5算法 import hashlib h_md5 = hashlib.md5() x = input("输入需要加密的数据:") print( &qu ...