js实现树级递归,通过js生成tree树形菜单(递归算法)

2024-09-05 20:48

本文主要是介绍js实现树级递归,通过js生成tree树形菜单(递归算法),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1、效果图

需求:首先这是一个数据集—js的类型,我们需要把生成一个tree形式的对象 :

var data = [
{ id: 1, name: "办公管理", pid: 0 },
{ id: 2, name: "请假申请", pid: 1 },
{ id: 3, name: "出差申请", pid: 1 },
{ id: 4, name: "请假记录", pid: 2 },
{ id: 5, name: "系统设置", pid: 0 },
{ id: 6, name: "权限管理", pid: 5 },
{ id: 7, name: "用户角色", pid: 6 },
{ id: 8, name: "菜单设置", pid: 6 },
];

 id,与pid之间的对应关系,当pid不存在,或pid:0的时候,这一项,应该为树的顶端,那么我们需要去重新建一次索引,怎么建呢,,,以原数据集的id的值,重新生成一个数据如下:

var data = [{id: 1, name: "办公管理", pid: 0 ,children:[{ id: 2, name: "请假申请", pid: 1,hildren:[{ id: 4, name: "请假记录", pid: 2 },],},{ id: 3, name: "出差申请", pid: 1},]},{id: 5, name: "系统设置", pid: 0 ,children:[{ id: 6, name: "权限管理", pid: 5,hildren:[{ id: 7, name: "用户角色", pid: 6 },{ id: 8, name: "菜单设置", pid: 6 },]},]},
];

js转换为上面数据集,实现数树级递归方法:

<script>function toTree(data) {// 删除 所有 children,以防止多次调用data.forEach(function (item) {delete item.children;});// 将数据存储为 以 id 为 KEY 的 map 索引数据列var map = {};data.forEach(function (item) {map[item.id] = item;});
//        console.log(map);var val = [];data.forEach(function (item) {// 以当前遍历项,的pid,去map对象中找到索引的idvar parent = map[item.pid];// 好绕啊,如果找到索引,那么说明此项不在顶级当中,那么需要把此项添加到,他对应的父级中if (parent) {(parent.children || ( parent.children = [] )).push(item);} else {//如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中,作为顶级val.push(item);}});return val;}console.log(toTree(data))
</script>

 

使用jquery,生成上述效果图的完整实例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="jquery-1.8.3.min.js"></script>
</head>
<body><script type="text/javascript">$(function () {var data = [{ id: 1, name: "办公管理", pid: 0 },{ id: 2, name: "请假申请", pid: 1 },{ id: 3, name: "出差申请", pid: 1 },{ id: 4, name: "请假记录", pid: 2 },{ id: 5, name: "系统设置", pid: 0 },{ id: 6, name: "权限管理", pid: 5 },{ id: 7, name: "用户角色", pid: 6 },{ id: 8, name: "菜单设置", pid: 6 },];GetData(0, data);$("body").append(menus);});//菜单列表htmlvar menus = '';//根据菜单主键id生成菜单列表html//id:菜单主键id//arry:菜单数组信息function GetData(id, arry) {var childArry = GetParentArry(id, arry);if (childArry.length > 0) {menus += '<ul>';for (var i in childArry) {menus += '<li>' + childArry[i].name;GetData(childArry[i].id, arry);menus += '</li>';}menus += '</ul>';}}//根据菜单主键id获取下级菜单//id:菜单主键id//arry:菜单数组信息function GetParentArry(id, arry) {var newArry = new Array();for (var i in arry) {if (arry[i].pid == id)newArry.push(arry[i]);}return newArry;}</script>
</body>
</html>

这篇关于js实现树级递归,通过js生成tree树形菜单(递归算法)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1140026

相关文章

Python xmltodict实现简化XML数据处理

《Pythonxmltodict实现简化XML数据处理》Python社区为提供了xmltodict库,它专为简化XML与Python数据结构的转换而设计,本文主要来为大家介绍一下如何使用xmltod... 目录一、引言二、XMLtodict介绍设计理念适用场景三、功能参数与属性1、parse函数2、unpa

C#实现获得某个枚举的所有名称

《C#实现获得某个枚举的所有名称》这篇文章主要为大家详细介绍了C#如何实现获得某个枚举的所有名称,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下... C#中获得某个枚举的所有名称using System;using System.Collections.Generic;usi

Go语言实现将中文转化为拼音功能

《Go语言实现将中文转化为拼音功能》这篇文章主要为大家详细介绍了Go语言中如何实现将中文转化为拼音功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 有这么一个需求:新用户入职 创建一系列账号比较麻烦,打算通过接口传入姓名进行初始化。想把姓名转化成拼音。因为有些账号即需要中文也需要英

C# 读写ini文件操作实现

《C#读写ini文件操作实现》本文主要介绍了C#读写ini文件操作实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录一、INI文件结构二、读取INI文件中的数据在C#应用程序中,常将INI文件作为配置文件,用于存储应用程序的

C#实现获取电脑中的端口号和硬件信息

《C#实现获取电脑中的端口号和硬件信息》这篇文章主要为大家详细介绍了C#实现获取电脑中的端口号和硬件信息的相关方法,文中的示例代码讲解详细,有需要的小伙伴可以参考一下... 我们经常在使用一个串口软件的时候,发现软件中的端口号并不是普通的COM1,而是带有硬件信息的。那么如果我们使用C#编写软件时候,如

Python使用qrcode库实现生成二维码的操作指南

《Python使用qrcode库实现生成二维码的操作指南》二维码是一种广泛使用的二维条码,因其高效的数据存储能力和易于扫描的特点,广泛应用于支付、身份验证、营销推广等领域,Pythonqrcode库是... 目录一、安装 python qrcode 库二、基本使用方法1. 生成简单二维码2. 生成带 Log

Go语言使用Buffer实现高性能处理字节和字符

《Go语言使用Buffer实现高性能处理字节和字符》在Go中,bytes.Buffer是一个非常高效的类型,用于处理字节数据的读写操作,本文将详细介绍一下如何使用Buffer实现高性能处理字节和... 目录1. bytes.Buffer 的基本用法1.1. 创建和初始化 Buffer1.2. 使用 Writ

基于WinForm+Halcon实现图像缩放与交互功能

《基于WinForm+Halcon实现图像缩放与交互功能》本文主要讲述在WinForm中结合Halcon实现图像缩放、平移及实时显示灰度值等交互功能,包括初始化窗口的不同方式,以及通过特定事件添加相应... 目录前言初始化窗口添加图像缩放功能添加图像平移功能添加实时显示灰度值功能示例代码总结最后前言本文将

Redis延迟队列的实现示例

《Redis延迟队列的实现示例》Redis延迟队列是一种使用Redis实现的消息队列,本文主要介绍了Redis延迟队列的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习... 目录一、什么是 Redis 延迟队列二、实现原理三、Java 代码示例四、注意事项五、使用 Redi

C#实现WinForm控件焦点的获取与失去

《C#实现WinForm控件焦点的获取与失去》在一个数据输入表单中,当用户从一个文本框切换到另一个文本框时,需要准确地判断焦点的转移,以便进行数据验证、提示信息显示等操作,本文将探讨Winform控件... 目录前言获取焦点改变TabIndex属性值调用Focus方法失去焦点总结最后前言在一个数据输入表单