使用递归函数将扁平数据转为树型结构，并渲染到页面

效果图：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>递归函数处理数据</title>

</head>

<body>

  <div class="nav" style="background-color: pink;">

  </div>

  <script>

    var data = [

      { id: 1, name: '衣服', pid: 0 },

      { id: 2, name: '裤子', pid: 0 },

      { id: 3, name: '外套', pid: 1 },

      { id: 4, name: '短裤', pid: 2 },

      { id: 5, name: '风衣', pid: 3 }

    ]

    function filterArray(data, parent){

      let temp = []

      for (let i = 0; i < data.length; i++) {

        if (data[i].pid === parent) {

          temp.push(data[i])

          data[i].children = filterArray(data, data[i].id) //返回值是一个数组，又赋值给data[i].children

        }

      }

      return temp

    }

    let tree=filterArray(data,0)

    let nav = document.querySelector('.nav');

    function setDomTree(data, node) {

      let ul

      for (let i = 0; i < data.length; i++) {

          ul = document.createElement('ul')

          let li = document.createElement('li')

          li.innerHTML = data[i].name

          node.appendChild(ul)

          ul.appendChild(li)

          if (data[i].children.length !== 0) {

              let element = setDomTree(data[i].children, ul)

              ul.appendChild(element)

          }

      }

      return ul

    }

    setDomTree(tree,nav)

  </script>

</body>

</html>

JavaScript：使用递归构建树型菜单的更多相关文章

  1. 下拉的DIV+CSS+JS二级树型菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JS树型菜单

    本树型菜单主要实现功能有:基本的树型菜单,可勾选进行多选项操作. 本树型菜单适合最初级的学者学习,涉及内容不难,下面看代码. 首先看View的代码,第一个<div>用来定义树显示的位置和i ...

  3. oracle使用connect by进行级联查询 树型菜单

    Oracle使用connect by进行级联查询 树型菜单(转) connect by可以用于级联查询,常用于对具有树状结构的记录查询某一节点的所有子孙节点或所有祖辈节点. 来看一个示例,现假设我们拥 ...

  4. 菜鸟笔记：node.js+mysql中将JSON数据构建为树（递归制作树状菜单数据接口）

    初学Web端开发,今天是第一次将所学做随笔记录,肯定存在多处欠妥,望大家海涵:若有不足,望大家批评指正. 进实验室后分配到的第一个项目,需要制作一个不确定层级树形菜单的数据接口,对于从来没实战编过程的 ...

  5. vuejs学习--递归组件(树型表格分享)

    前言 学习vue有一段时间了,最近使用vue做了一套后台管理系统,其中使用最多就是递归组件,也因为自己对官方文档的不熟悉使得自己踩了不少坑,今天写出来和大家一起分享. 递归组件 组件在它的模板内可以递 ...

  6. php实现无限级树型菜单（函数递归算法）

    首先到数据库取数据,放到一个数组,然后把数据转化为一个树型状的数组,最后把这个树型状的数组转为html代码.也可以将第二步和第三步合为一步. 详细如下:1.数据库设计:脚本如下:CREATE TABL ...

  7. php通用的树型类创建无限级树型菜单

    生成树型结构所需要的2维数组,var $arr = array()数组格式如下: array( 1 => array('id'=>'1','parentID'=>0,'name'=& ...

  8. SQL递归获取树型路径中文名称

    项目中遇到一个树型结构表要根据任意传入节点获取它从根节点一直到自身节点的全部路径的中文名称,并且用'>'与分隔. 我使用在sqlServer中写了一个解析函数方便开发调用. USE [RP_ER ...

  9. jQuery 树型菜单插件(Treeview)

    jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单.试用于一些菜单的导航,支持基于 cookie 的持久性菜单

随机推荐

  1. 什么是低代码（Low-Code）？

    阿里云 云原生应用研发平台EMAS 彭群(楚衡) 一.前言 如果选择用一个关键词来代表即将过去的2020年,我相信所有人都会认同是"新冠".疫情来得太快就像龙卷风,短短数月就阻断了 ...

  2. go-zero之web框架

    go-zero 是一个集成了各种工程实践的 web 和 rpc 框架,其中rest是web框架模块,基于Go语言原生的http包进行构建,是一个轻量的,高性能的,功能完整的,简单易用的web框架 服务 ...

  3. 不要再说不会Spring了！Spring第一天，学会进大厂！

    工作及面试的过程中,作为Java开发,Spring环绕在我们的身边,很多人都是一知半解,本次将用14天时间,针对容器中注解.组件.源码进行解读,AOP概念进行全方面360°无死角介绍,SpringMV ...

  4. ClickHouse数据库数据定义手记之数据类型

    前提 前边一篇文章详细分析了如何在Windows10系统下搭建ClickHouse的开发环境,接着需要详细学习一下此数据库的数据定义,包括数据类型.DDL和DML.ClickHouse作为一款完备的D ...

  5. 深度分析：Java并发编程之线程池技术，看完面试这个再也不慌了！

    线程池的好处 Java中的线程池是运用场景最多的并发框架,几乎所有需要异步或并发执行任务的程序都可以使用线程池.在开发过程中,合理地使用线程池,相对于单线程串行处理(Serial Processing ...

  6. FL Studio通道窗口和步进音序器知识讲解

    FL Studio中通道窗口是以样本为概念的音乐制作基础.通道窗口包含了步进音序器并结合了各种丰富的功能,可以通过通道窗口打开各通道的设置窗口.钢琴卷轴等.步进音序器在节奏制作方便表现出很好的优势,它 ...

  7. FLstudio 系列教程（七）：FL Studio五大常用按钮介绍

    我们打开FL Studio编曲软件会发现界面中有好多的菜单和窗口,这些窗口每个都有其单独的功能.今天小编主要给大家详细讲解下FL Studio水果软件的五大常用按钮. 1.首先我,我们双击桌面的水果图 ...

  8. The Balance POJ - 2142

    首先,可以知道题目要求解一个\(ax+by=c\)的方程,且\(x+y\)最小. 感性证明: 当\(a>b\)时,\(y\)取最小正整数解,\(b\)减的多,\(a\)增的少,此时\(x+y\) ...

  9. python3错误AttributeError: 'TestSequenceFunctions' object has no attribute 'seq'

    对比了两段代码发现,原来是setUp要用用大写才能被正确引用. 修改后,代码运行成功.

  10. Codeforces Round #674 (Div. 3) C、D 题解

    C.Increase and Copy #枚举 题目链接 题意 最初你有仅包含一个数字\(1\)的数组\(a\),一次操作中可对该数组进行两类操作: 从数组中选择一个元素,将该元素\(+1\): 从数 ...