原生js实现树级递归,通过js生成tree树形菜单(递归算法)

时间: 2017-12-11阅读: 8472标签: 递归

1、效果图


需求:首先这是一个数据集—js的类型,我们需要把生成一个tree形式的对象 :

var data = [
{ id: 1, name: "办公管理", pid: 0 },
{ id: 2, name: "请假申请", pid: 1 },
{ id: 3, name: "出差申请", pid: 1 },
{ id: 4, name: "请假记录", pid: 2 },
{ id: 5, name: "系统设置", pid: 0 },
{ id: 6, name: "权限管理", pid: 5 },
{ id: 7, name: "用户角色", pid: 6 },
{ id: 8, name: "菜单设置", pid: 6 },
];

 id,与pid之间的对应关系,当pid不存在,或pid:0的时候,这一项,应该为树的顶端,那么我们需要去重新建一次索引,怎么建呢,,,以原数据集的id的值,重新生成一个数据如下:

var data = [
	{id: 1, name: "办公管理", pid: 0 ,
		children:[
			{ id: 2, name: "请假申请", pid: 1,
				hildren:[
					{ id: 4, name: "请假记录", pid: 2 },
				],
			},
			{ id: 3, name: "出差申请", pid: 1},
		]
    },
	{id: 5, name: "系统设置", pid: 0 ,
		children:[
			{ id: 6, name: "权限管理", pid: 5,
				hildren:[
					{ id: 7, name: "用户角色", pid: 6 },
					{ id: 8, name: "菜单设置", pid: 6 },
				]
			},
		]
	},
];

js转换为上面数据集,实现数树级递归方法:

<script>
    function toTree(data) {
        // 删除 所有 children,以防止多次调用
        data.forEach(function (item) {
            delete item.children;
        });

        // 将数据存储为 以 id 为 KEY 的 map 索引数据列
        var map = {};
        data.forEach(function (item) {
            map[item.id] = item;
        });
//        console.log(map);
        var val = [];
        data.forEach(function (item) {
            // 以当前遍历项,的pid,去map对象中找到索引的id
            var parent = map[item.pid];
            // 好绕啊,如果找到索引,那么说明此项不在顶级当中,那么需要把此项添加到,他对应的父级中
            if (parent) {
                (parent.children || ( parent.children = [] )).push(item);
            } else {
                //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中,作为顶级
                val.push(item);
            }
        });
        return val;
    }
    console.log(toTree(data))
</script>


使用jquery,生成上述效果图的完整实例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery-1.8.3.min.js"></script>
</head>
<body>
 
    <script type="text/JavaScript">
        $(function () {
            var data = [
            { id: 1, name: "办公管理", pid: 0 },
            { id: 2, name: "请假申请", pid: 1 },
            { id: 3, name: "出差申请", pid: 1 },
            { id: 4, name: "请假记录", pid: 2 },
            { id: 5, name: "系统设置", pid: 0 },
            { id: 6, name: "权限管理", pid: 5 },
            { id: 7, name: "用户角色", pid: 6 },
            { id: 8, name: "菜单设置", pid: 6 },
            ];

            GetData(0, data);
            $("body").append(menus);
        });
 
        //菜单列表html
        var menus = '';
 
        //根据菜单主键id生成菜单列表html
        //id:菜单主键id
        //arry:菜单数组信息
        function GetData(id, arry) {
            var childArry = GetParentArry(id, arry);
            if (childArry.length > 0) {
                menus += '<ul>';
                for (var i in childArry) {
                    menus += '<li>' + childArry[i].name;
                    GetData(childArry[i].id, arry);
                    menus += '</li>';
                }
                menus += '</ul>';
            }
        }
 
        //根据菜单主键id获取下级菜单
        //id:菜单主键id
        //arry:菜单数组信息
        function GetParentArry(id, arry) {
            var newArry = new Array();
            for (var i in arry) {
                if (arry[i].pid == id)
                    newArry.push(arry[i]);
            }
            return newArry;
        }
    </script>
</body>
</html>



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/237

关闭

Vue一个案例引发的递归组件的使用

什么是递归组件?简单来说就是在组件中内使用组件本身,下面我们就来看看如何在项目中使用递归组件去解决我们上面问题。类似与信息分类的展示在我们的项目中是非常常见的形式,我们利用递归组件可以很好的去解决问题

Js递归

传统的递归思想:自已调用自已,但是调用栈里面的执行上下文会越来越多,容易暴栈。采用尾递归可以规避这个问题:每次入栈出栈再入栈

浅谈javascript中的递归和闭包

递归和闭包作为js中很重要的一环,几乎在前端的面试中都会涉及,特别闭包。今天前端组的组长冷不丁的问了我一下,粗略的回答了一下,感觉不太满足,于是重新学习了一下,写下本篇。

js递归实现方式

递归函数就是在函数体内调用本函数;递归函数的使用要注意函数终止条件避免死循环;递归实现形式:1.声明一个具名函数,通过函数名调用,2. 使用arguments.callee代替函数名

Vue 和递归组件

有人说递归很难理解,也有人不这么认为。递归函数简单的定义是:一个自调用函数,这意味着它将在执行的某个时刻调用自己。从理论上讲,递归是一种需要两个属性的行为:

递归思想与实战

递归算法对于一个程序员应该算是最经典的算法之一,而且它越想越乱,很多复杂算法的实现也都用到了递归,例如深度优先搜索,二叉树遍历等。面试中常常会问递归相关的内容(深拷贝,对象格式化,数组拍平,走台阶问题等)

AngularJS templates 递归循环

使用 ng-include 进行递归循环;在指令内,可以使用这样的结构;可以使用 ng-init 重命名子级变量名称

JavaScript 中匿名函数的递归调用

不管是什么编程语言,相信稍微写过几行代码的同学,对递归都不会陌生。 以一个简单的阶乘计算为例,我们可以看出,递归就是在函数内部调用对自身的调用。

Js中的递归

递归函数是在一个函数通过名字调用自身的情况下构成的,这种写法在函数有名字,而且名字以后也不会变的情况下是没有问题的。但是函数的执行与函数名factorial紧紧耦合在了一起

JS递归及二叉搜索树的移除节点

递归含义:在某时某刻某个条件下调用包含自己的函数;注意点:⑴递归过程中一定要加限制条件,要不然会陷入死循环:递归有个过程,不是一步到位的,这一点尤其重要

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!