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——第二章：字典（dictionary）以及 添、删、改、查
首先, 字典是以键值对的形式进行存储数据的,必须有键[key],有值[value] 字典的表示方式: {key:value, key2:value, key3:value} 举例: dic = {&q ...
- struts2 Filter中无法转发请求
struts2 Filter中无法转发请求 项目升级struts2版本为最新以修复漏洞,由于一些历史原因,部分访问在升级后访问404,直接对历史代码改造代价太大. 于是使用拦截器对其转发.重定向,但是 ...
- 监控cpu高的进程shell
#!/bin/bash while [ 1 ]do ps aux|awk '{if($3>10){print $3" => "$0}}' sleep 0.5sdone
- xpath语法与lxml库详解
xpath语法与lxml库 摘要:本文详细介绍了xpath语法,lxml库的使用以及两者的结合使用 注:平常爬虫运用的Xpath不是来自element中通过Chrome插件XPath Helper写出 ...
- 详解数据库SQL中的三个语句：DROP、TRUNCATE 、DELETE
本文分享自华为云社区<GaussDB数据库SQL系列-DROP & TRUNCATE & DELETE>,作者:Gauss松鼠会小助手2 . 一.前言 在数据库中,SQL作 ...
- 光大银行刘淼：基于华为云GaussDB(DWS) 数据仓库创新实践
摘要:面向未来数据平台3.0要做架构减法,平台由N->1,华为云GaussDB(DWS)未来作为数据仓库唯一平台,数据链路实现从数据湖直接到华为云GaussDB(DWS)数据仓库. 日前,华为举 ...
- 超详细教程：SpringBoot整合MybatisPlus
摘要:本文为大家带来SpringBoot整合MybatisPlus的教程,实现SpringBoot项目中依赖数据模块进行数据操作,并进行简单测试. 本文分享自华为云社区<SpringBoot整合 ...
- AI为啥能读懂说话人的情感？
摘要:本文介绍了语音情感识别领域的发展现状,挑战,重点介绍了处理标注数据缺乏的问题. 本文分享自华为云社区<语音情感识别的应用和挑战>,作者:SSIL_SZT_ZS. 情感在人与人的交流中 ...
- 火山引擎A/B测试在消费行业的案例实践
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 近日,火山引擎数智平台举办了"走进火山-全链路增长:数据飞轮转动消费新生力"的活动,其中火山引 ...
- PLS-00103: 出现符号 ")"在需要下列之一时
执行 Oracle 存储过程时,出现 "PLS-00103: 出现符号 ")"在需要下列之一时:", Cause: java.sql.SQLException: ...