JS当中的无限分类递归树
列表转换成树形结构方法定义:
//javascript 树形结构
function toTree(data) {
// 删除 所有 children,以防止多次调用
data.forEach(function(item) {
delete item.children;
}); // 将数据存储为 以 id 为 KEY 的 map 索引数据列
var map = {};
data.forEach(function(item) {
// 在该方法中可以给每个元素增加其他属性
item.text = item.name;
map[item.id] = item;
});
// console.log(map); var val = [];
data.forEach(function(item) { // 以当前遍历项,的pid,去map对象中找到索引的id
var parent = map[item.pid]; // 好绕啊,如果找到索引,那么说明此项不在顶级当中,那么需要把此项添加到,他对应的父级中
if (parent) {
// 可以给每个父节点添加属性
parent.iconCls = "i-folder";
// 添加到父节点的子节点属性中
(parent.children || (parent.children = [])).push(item); } else {
//如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中,作为顶级
val.push(item);
}
});
return val;
}
树形结构数据:
var data = [
{
id:1,
name :"一级分类:1",
pid :0,
},
{
id:2,
name :"二级分类:1",
pid :1,
},
{
id:3,
name :"三级分类:3",
pid :2,
},
{
id:4,
name :"一级分类:2",
pid :0,
},
{
id:7,
name :"f级分类:2",
pid :4,
},
{
id:10,
name :"f级分类:2",
pid :7,
},
{
id:9,
name :"f级分类:2",
pid :10,
},
{
id:12,
name :"f级分类:2",
pid :9,
},
{
id:15,
name :"f级分类:2",
pid :12,
},
{
id:13,
name :"f级分类:2",
pid :15,
},
]
版权声明:本文为CSDN博主「花村大地主」的原创文章,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/jayhkw/article/details/68945087
JS当中的无限分类递归树的更多相关文章
- 关于无限分类的树状输出(id,name,pid)类型的
首先创建无限分类的数据表,我这里采用的是id.name.pid这种类型(当然还有很多种无限分类的方式了,比如:id.name.pid.path.left.right左右节点的形式) CREATE TA ...
- javascript当中的无限分类
var data = [ {id:100000, name :"1", pid :0}, {id:100100, name :"1-1", pid :10000 ...
- php递归方法实现无限分类实例
数组: 代码如下 复制代码 $items = array( array('id' => 1, 'pid' => 0, 'name' => '一级11' ), array('id' ...
- PHP实现无限分类
PHP实现无限分类 无限分类 递归 无限级分类是一种设计技巧,在开发中经常使用,例如:网站目录.部门结构.文章分类.笔者觉得它在对于设计表的层级结构上面发挥很大的作用,比如大家在一些平台上面,填写邀请 ...
- 后台树状菜单,js实现递归无限分类
//新闻类别管理 public function new_classify() { $arr = M('news_classify')->where("fid = 0")-& ...
- php递归无限分类、根据子类获取所有顶类
//递归无限分类树 public static function diGui($data, $pid) { $arr = collect([]); if (empty($data)) { return ...
- TreeView递归绑定无限分类数据
TreeView递归绑定无限分类数据 实现一个动态绑定,无限级分类数据时,需要将数据绑定到TreeView控件,分类表的结构是这样的: 字段 类型 Id int ParentId int Name N ...
- php不用递归完成无限分类,从表设计入手完整演示过程
无限分类是什么就不废话了,可以用递归实现,但是递归从数据库取东西用递归效率偏低,如果从表设计入手,就很容易做到网站导航的实现,下面是某论坛导航,如下图 网上无限分类大多不全面,今天我会从设计表开始, ...
- 【整理】iview Tree数据格式问题,无限递归树处理数据
iview Tree数据格式问题,无限递归树处理数据 https://juejin.im/post/5b51a8a4e51d455d6825be20
随机推荐
- 凸包模板——Graham扫描法
凸包模板--Graham扫描法 First 标签: 数学方法--计算几何 题目:洛谷P2742[模板]二维凸包/[USACO5.1]圈奶牛Fencing the Cows yyb的讲解:https:/ ...
- 2019牛客暑期多校训练营(第一场) - E - ABBA - 贪心 - dp - 组合
https://ac.nowcoder.com/acm/contest/881/E 从dp的角度来看是比较正常的.无后效性来源于前面只要的合法的方案分配,那么对后面造成的影响就只有A,B的数目. 从贪 ...
- Spark链接hive时 “HikariCP” 问题
IDE本地调试和spark-shell调试报错: Caused by: org.datanucleus.exceptions.NucleusUserException: The connection ...
- P4036 [JSOI2008]火星人(splay+hash+二分)
P4036 [JSOI2008]火星人 Splay维护hash,查询二分 $a[x].vl=a[lc].vl*ha[a[rc].sz+1]+a[x].w*ha[a[rc].sz]+a[rc].vl$ ...
- JVM(3) 之 内存分配与回收策略
开发十年,就只剩下这套架构体系了! >>> 之前讲过虚拟机中的堆,他是整个内存模型中占用最大的一部分,而且不是连续的.当有需要分配内存的时候,一般有两个方法分配,指针碰撞和空闲列 ...
- OS库的使用
Python中有关OS库的使用 路径操作 os.path.abspath(path) 返回path在当前系统中的绝对路径 os.path.normpath(path) 归一化path的表示形式,统一用 ...
- shell变量的声明和使用
- Linux ssh黄金参数
Linux ssh黄金参数 命令: -o ConnectionAttempts= -o PasswordAuthentication=no -o StrictHostKeyChecking=no cp ...
- (解决某些疑难杂症)Ubuntu16.04 + NVIDIA显卡驱动 + cuda10 + cudnn 安装教程
一.NVIDIA显卡驱动 打开终端,输入: sudo nautilus 在新打开的文件夹中,进入以下路径(不要用命令行): 左下角点计算机,lib,modules 这时会有几个文件夹,对每个文件夹都进 ...
- Excption与Error包结构。OOM你遇到过哪些情况,SOF你遇到过哪些情况
Java语言把异常当做对象来处理,并定义了一个基类(java.util.Throwable)作为所有异常的父类.异常分为Error和Exception两大类. Error 不可恢复的异常. 程序中不推 ...