• 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

  • 相关阅读:
    大屏展示功能
    单例模式/原型模式
    .net core ioc
    Log4net
    mvc 过滤器
    webservice
    页面传值 作用域
    Map使用方法
    java获取当前时间撮
    linux 下统计文本行数的各种方法(一)
  • 原文地址:https://www.cnblogs.com/silfox/p/11411680.html
Copyright © 2020-2023  润新知