列表转换成树形结构方法定义:

//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当中的无限分类递归树的更多相关文章

  1. 关于无限分类的树状输出(id,name,pid)类型的

    首先创建无限分类的数据表,我这里采用的是id.name.pid这种类型(当然还有很多种无限分类的方式了,比如:id.name.pid.path.left.right左右节点的形式) CREATE TA ...

  2. javascript当中的无限分类

    var data = [ {id:100000, name :"1", pid :0}, {id:100100, name :"1-1", pid :10000 ...

  3. php递归方法实现无限分类实例

    数组:  代码如下 复制代码 $items = array( array('id' => 1, 'pid' => 0, 'name' => '一级11' ), array('id' ...

  4. PHP实现无限分类

    PHP实现无限分类 无限分类 递归 无限级分类是一种设计技巧,在开发中经常使用,例如:网站目录.部门结构.文章分类.笔者觉得它在对于设计表的层级结构上面发挥很大的作用,比如大家在一些平台上面,填写邀请 ...

  5. 后台树状菜单,js实现递归无限分类

    //新闻类别管理 public function new_classify() { $arr = M('news_classify')->where("fid = 0")-& ...

  6. php递归无限分类、根据子类获取所有顶类

    //递归无限分类树 public static function diGui($data, $pid) { $arr = collect([]); if (empty($data)) { return ...

  7. TreeView递归绑定无限分类数据

    TreeView递归绑定无限分类数据 实现一个动态绑定,无限级分类数据时,需要将数据绑定到TreeView控件,分类表的结构是这样的: 字段 类型 Id int ParentId int Name N ...

  8. php不用递归完成无限分类,从表设计入手完整演示过程

    无限分类是什么就不废话了,可以用递归实现,但是递归从数据库取东西用递归效率偏低,如果从表设计入手,就很容易做到网站导航的实现,下面是某论坛导航,如下图 网上无限分类大多不全面,今天我会从设计表开始, ...

  9. 【整理】iview Tree数据格式问题,无限递归树处理数据

    iview Tree数据格式问题,无限递归树处理数据 https://juejin.im/post/5b51a8a4e51d455d6825be20

随机推荐

  1. MySQL 1130错误,无法远程连接

    错误:ERROR 1130: Host '192.168.1.3' is not allowed to connect to thisMySQL serve 错误1130:主机192.168.1.3” ...

  2. < 利用Python进行数据分析 - 第2版 > 第五章 pandas入门 读书笔记

    <利用Python进行数据分析·第2版>第五章 pandas入门--基础对象.操作.规则 python引用.浅拷贝.深拷贝 / 视图.副本 视图=引用 副本=浅拷贝/深拷贝 浅拷贝/深拷贝 ...

  3. Node.js实战6:定时器,使用timer延迟执行。

    setTimeout 在nodejs中,通过setTimeout函数可以达到延迟执行的效果,这个函数也常被称为定时器. 一个简单的例子: console.log( (new Date()).getSe ...

  4. [暑假集训Day1T3]新的开始

    新建一个虚拟节点后直接跑最小生成树即可,从虚拟节点往每个节点连的边权为每个点建发电站的代价,许多人的考场贪心策略是:先构建原图的最小生成树后找一个花费最小的地方建发电厂.但是这样做不对的地方在于:如果 ...

  5. codeforces hack

    对某一题,首先你自己要先过TEST. 然后回到比赛的PROBLEM列表,把这题后面的锁锁上(锁上了就不能再提交了,所以没把握就别锁了), 然后到ROOM里面,你就可以看别人代码了,下面有HACK按钮, ...

  6. P4553 80人环游世界(上下界费用流)

    P4553 80人环游世界 emm......先从上下界网络流(转)开始 再到现在的上下界费用流 因为有上下界,我们需要记下每个点的流量差$ex[i]$,用于调整 $ins(x,y,l,r,v)=li ...

  7. java绘制带姓的圆

    public class ImageGenerator { private static final Color[] colors = new Color[] { new Color(129, 198 ...

  8. http响应代码解释

    200:成功响应 302:找到,但是请求的资源在另外一个不同的url中. 400:错误请求.这个请求不能被服务器所理解,客户端必须修改请求. 401:未认证,这个请求需要用户认证. 404:未找到.服 ...

  9. PCA算法和实例

    PCA算法 算法步骤: 假设有m条n维数据. 1. 将原始数据按列组成n行m列矩阵X 2. 将X的每一行(代表一个属性字段)进行零均值化,即减去这一行的均值 3. 求出协方差矩阵C=1/mXXT 4. ...

  10. react native 打包至iphone设备

    1.新建bundle 在自己项目的ios文件夹下新建一个文件夹取名bundle PS:ios文件夹和node_modules文件夹在同一级目录下,这个bundle文件夹名称随意取,后面要用到,但是记得 ...