JS - 递归实现无限分类
<!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>
<script>
window.onload = function () {
console.log(deeploop(0));
}; /**
* 根据 id 查询到数据并将数据存储到数组 返回
*/
var findById = function (id) {
let child = [];
arr.forEach((value) => {
if (value.pid == id) {
child.push(value);
}
});
return child;
}; /**
* 递归查询 到数据并将数据存储到数组 返回
*/
var deeploop = function (id) {
let dataArr = findById(id);
if (dataArr.length <= 0) {
return null;
} else {
dataArr.forEach((value) => {
if (deeploop(value.id) != null) {
value["children"] = deeploop(value.id);
}
});
}
return dataArr;
}; /**
* 每一个分类都有记录它的父级id (pid 意为 parent id)
* 当为顶级分类时，它的父级id为0
*/
var arr = [
{ id: 1, name: "计算机专业", pid: 0 },
{ id: 2, name: "软件专业", pid: 1 },
{ id: 3, name: "前端", pid: 2 },
{ id: 33, name: "html", pid: 3 },
{ id: 34, name: "css", pid: 3 },
{ id: 4, name: "后端", pid: 2 },
{ id: 41, name: "php", pid: 4 },
{ id: 42, name: "java", pid: 4 },
{ id: 5, name: "动漫专业", pid: 0 },
{ id: 51, name: "2d动漫", pid: 5 },
{ id: 511, name: "插画设计", pid: 51 },
{ id: 52, name: "3d动漫", pid: 5 },
];
</script>
</body>
</html>
JS - 递归实现无限分类的更多相关文章
- TreeView递归绑定无限分类数据
TreeView递归绑定无限分类数据 实现一个动态绑定,无限级分类数据时,需要将数据绑定到TreeView控件,分类表的结构是这样的: 字段 类型 Id int ParentId int Name N ...
- php不用递归完成无限分类，从表设计入手完整演示过程
无限分类是什么就不废话了,可以用递归实现,但是递归从数据库取东西用递归效率偏低,如果从表设计入手,就很容易做到网站导航的实现,下面是某论坛导航,如下图 网上无限分类大多不全面,今天我会从设计表开始, ...
- java递归、js递归，无限极分类菜单表
java-json import com.alibaba.fastjson.JSONObject; import java.util.ArrayList; import java.util.List; ...
- JS当中的无限分类递归树
列表转换成树形结构方法定义: //javascript 树形结构 function toTree(data) { // 删除 所有 children,以防止多次调用 data.forEach(func ...
- php递归获取无限分类菜单
从数据库获取所有菜单信息,需要根据id,pid字段获取主菜单及其子菜单,以及子菜单下的子菜单,可以通过函数递归来实现. <?php class Menu { public $menu = arr ...
- 后台树状菜单，js实现递归无限分类
//新闻类别管理 public function new_classify() { $arr = M('news_classify')->where("fid = 0")-& ...
- Think PHP递归重新排序无限极子分类数组（递归无限极分类）
Think PHP递归重新排序无限极子分类数组 // 递归重新排序无限极子分类数组 function recursive($array,$pid=0,$level=0){ $arr = array() ...
- php不使用递归实现无限极分类
无限极分类常用的是递归,但是比较不好理解,其实可以用数据库path,pid两个字段的设计来实现无限分类的功能 1.数据库设计 通过上图可以看出pid就是该栏目的父id,而path = 父path+pi ...
- php递归无限分类、根据子类获取所有顶类
//递归无限分类树 public static function diGui($data, $pid) { $arr = collect([]); if (empty($data)) { return ...
- MySql无限分类数据结构--预排序遍历树算法
MySql无限分类数据结构--预排序遍历树算法 无限分类是我们开发中非常常见的应用,像论坛的的版块,CMS的类别,应用的地方特别多. 我们最常见最简单的方法就是在MySql里ID ,parentID, ...
随机推荐
- Python 实现 PDF 到 Word 文档的高效转换（DOC、DOCX）
PDF(Portable Document Format)已成为一种广泛使用的电子文档格式.PDF的主要优势是跨平台,可以在不同设备上呈现一致的外观.然而,当我们需要对文件内容进行编辑或修改,直接编辑 ...
- pacman下载时经常出现Operation too slow. Less than 1 bytes/sec transferred the last 10 seconds
问题 我在manjaro系统上使用pacman下载软件的时候,经常出现以下报错: 错误:无法从 mirrors.tuna.tsinghua.edu.cn : Operation too slow. L ...
- MySQL面试题：一条SQL语句在MySQL中执行过程全解析
一 .MySQL 基础架构分析 介绍一下下图涉及的一些组件的基本作用帮助大家理解这幅图. 连接/线程处理(连接器): 身份认证和权限相关(如连接处理.授权认证.安全等等). 查询缓存: 执行查询语句的 ...
- shiro基于角色URL进行鉴权
前言 shiro基于URL进行鉴权,网上有很多,但是多数都是copy不排版,眼睛都看花了,还不如自己看看源码. 2021年1月14日21:23:49最新的shiro是1.7,使用时发现了首次访问的一个 ...
- [极客大挑战 2019]Havefun 1
[极客大挑战 2019]Havefun 1 一,审题,观察题目信息和知识点 观察题目,没发现有效信息 F12打开源代码,发现有一个GET传输. 知识点 GET方法的数据传输是通过URL传输的, ...
- 8、Flutter Paddiing组件
Padding组件处理容器与子元素之间的间距. class MyApp extends StatelessWidget { const MyApp({super.key}); @override Wi ...
- Spark Streaming快速入门
Spark Streaming快速入门 一.简介 Spark Streaming 是构建在 Spark Core 基础之上的流处理框架(但实际上是微批次处理框架),是 Spark 非常重要的组成部分. ...
- Llama2-Chinese项目：5-推理加速
随着大模型参数规模的不断增长,在有限的算力资源下,提升模型的推理速度逐渐变为一个重要的研究方向.常用的推理加速框架包含lmdeploy.FasterTransformer和vLLM等. 一.lmd ...
- Proxy下的Prepare透传，让GaussDB(for MySQL)更稳固，性能更卓越
本文分享自华为云社区<Proxy下的Prepare透传,让GaussDB(for MySQL)更稳固,性能更卓越>,作者: GaussDB 数据库 . 1.引言 在很多业务场景下,数据库应 ...
- 前端面试常考题：JS垃圾回收机制
摘要:众所周知,应用程序在运行过程中需要占用一定的内存空间,且在运行过后就必须将不再用到的内存释放掉,否则就会出现下图中内存的占用持续升高的情况,一方面会影响程序的运行速度,另一方面严重的话则会导致整 ...