简单的前端树形数据整理

简单树形结构数据处理

<script type="text/javascript">

    // 1. 准备数据: 系统->我的面板,内容管理->(个人信息,文件管理)(统计分析)
        var nodes = [
                {
                    'id':'1',
                    'name':'系统',
                    'pid' : '0'
                },
                {
                    'id':'2',
                    'name':'我的面板',
                    'pid' : '1'
                },
                {
                    'id':'3',
                    'name':'内容管理',
                    'pid' : '1'
                },
                {
                    'id':'4',
                    'name':'个人信息',
                    'pid' : '2'
                },
                {
                    'id':'5',
                    'name':'文件管理',
                    'pid' : '2'
                },
                {
                    'id' : '6',
                    'name' : '统计分析',
                    'pid' : '3'
                }
            ];

    var tree = new Node(0, null);   // 首先准备一个数的头
    // 处理数据,整理成树,这里适应的环境是必须要父节点排在前面(无法保证这个情况的话,可以采用循环排除的方式处理;或者其他方法处理)
    for (var i = 0;i < nodes.length; i++)
    {
        // 1. 查询父节点
        var node = tree.find(nodes[i].pid);
        if (typeof(node) == undefined) { continue; }
        node.append(new Node(nodes[i].id,nodes[i]));
    }
    console.log(tree);

    // 树结点
    function Node(id,data)
    {
        this.id = id;
        this.data = data;
        this.parent = null;
        this.children = [];

        this.find = function (id) {
            // 这里使用递归的方式进行id这个结点的查找
            if (id == this.id) return this;
            for (var i = 0;i < this.children.length; i++)
            {
                var node = this.children[i].find(id);
                if (node != null) return node;
            }
        }

        this.append = function (node) {
            this.children.push(node);   // 向父结点中添加子节点
            node.parent = this;         // 设置子结点的父亲
        }
    }
</script>

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值