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, ...
随机推荐
- 『Flutter』开篇
什么是 Flutter Flutter 是由 Google 开发的开源框架 Flutter 用于构建跨平台的移动应用程序 Flutter 它允许开发者使用同一套代码来同时为 IOS 和 Android ...
- 珍藏网站-关于路由器、WIFI协议等
路由器详解:为什么不要买AX3000路由器 https://zhuanlan.zhihu.com/p/403855533 包含以下专业名词和相关话题: RX/TX和MU-MIMO 20MHz/40MH ...
- Ubuntu 命令使用方法
apt-get 用作于deb包 yum作用于tar包(也可以运作于rpm包) 首先用yum list wget检查一下你的虚拟机有没有安装wget,如果安装了下面图中会显示 @dvd ,我的没有安装所 ...
- 2023-08-26：请用go语言编写。开心一下的智力题： 有一个村庄，一共250人， 每一个村民要么一定说谎，要么只说真话， 村里有A、B、C、D四个球队，且每个村民只会喜欢其中的一支球队， 但是说
2023-08-26:请用go语言编写.开心一下的智力题: 有一个村庄,一共250人, 每一个村民要么一定说谎,要么只说真话, 村里有A.B.C.D四个球队,且每个村民只会喜欢其中的一支球队, 但是说 ...
- Boost程序库完全开发指南：1-开发环境和构建工具
Boost官方于2019年12月发布的1.72版编写,共包含160余个库/组件,涵盖字符串与文本处理.容器.迭代器.算法.图像处理.模板元编程.并发编程等多个领域,使用Boost,将大大增强C++ ...
- 4种Python中基于字段的不使用元类的ORM实现方法
本文分享自华为云社区<Python中基于字段的不使用元类的ORM实现>,作者: 柠檬味拥抱 . 不使用元类的简单ORM实现 在 Python 中,ORM(Object-Relational ...
- 4大焕新，华为云CCE带你感受容器化上云体验
本文分享自华为云社区<华为云CCE邀您共同打造最佳容器化上云体验>,作者:云容器大未来 . 在容器化日益成为中大型企业上云主流选择的情况下,容器服务如何能帮助用户更简单快捷的上云.高效可信 ...
- 创新 = 颠覆？AI创新如何做大蛋糕
本文分享自华为云社区<创新 = 颠覆?AI创新如何做大蛋糕>,作者: 华为云PaaS服务小智 . 最近随着AI的风靡,各行各业都充斥着近乎疯狂的言论,"AI必将替代一切" ...
- 加快脑动脉瘤检测，AI来了
摘要:华为云EI创新孵化Lab联合华中科技大学电信学院.华中科技大学同济医学院附属协和医院放射科在放射学领域的国际顶级期刊Radiology(<放射学>)上共同发表了最新研究成果. 日前, ...
- 自从安上了“AI”，这些商务经理天天按时下班了
摘要:能不能用AI来提升合同管理的效率呢?华为公司用自己的AI实践提交了一份教科书级别的答卷. 对于企业的商务精英而言,什么事情令他们既"煎熬"又"开心",既& ...