本文主要是介绍js实现树级递归，通过js生成tree树形菜单(递归算法)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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对象中找到索引的idvar 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);});//菜单列表htmlvar 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>这篇关于js实现树级递归，通过js生成tree树形菜单(递归算法)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
