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

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

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.休闲娱乐: 网页游戏  直播/交友   H5游戏

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

浅谈javascript中的递归和闭包

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

递归思想与实战

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

js递归实现方式

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

递归算法的理解

所谓递归,就是既有传递,又有回归,与其说是传递与回归,初学不如理解是一种 “循序递进”与“规律约束”。为什么这样说,因为递归算法相比较于循环在代码结构方面个人认为更加简洁清晰,清晰易懂,递归注重的是一种有序的规律

js利用递归与promise 按顺序请求数据

项目中有一个需求,一个tabBar下面如果没有内容就不让该tabBar显示,当然至于有没有内容,需要我们通过请求的来判断,但是由于请求是异步的,如何让请求按照tabBar的顺序进行?

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

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

递归获取页面元素的真实offsetLeft和offsetTop

由于父元素的定位属性, 导致子元素及其孙元素等的offsetLeft和offsetTop变得和预期不一致(预期上都是到屏幕左边和上边的位置), 由于需要做鼠标拖动旋转和鼠标框选

递归与循环的区别

递归:你打开面前这扇门,看到屋里面还有一扇门(这门可能跟前面打开的门一样大小(静),也可能门小了些(动)),你走过去,发现手中的钥匙还可以打开它,你推开门,发现里面还有一扇门,你继续打开

Js中的递归

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

js 用迭代器模式优雅的处理递归问题

循环数组或对象内每一项值,在 js 里原生已经提供了一个迭代器。凡是需要用到递归的函数参考迭代器模式,能写出更优雅,可读性更高的代码。

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

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全