js将后台数组转化为通用的tree结构

一、项目说明

实现目标：前端通过js实现后台数据转化为tree树结构

二、后台数据结构

[{
	"icon": "fa fa-cog",
	"list": null,
	"menuId": 1,
	"name": "系统管理",
	"open": null,
	"orderNum": 0,
	"parentId": 0,
	"parentName": null,
	"perms": null,
	"type": 0,
	"url": null
}, {
	"icon": "",
	"list": null,
	"menuId": 31,
	"name": "订单管理",
	"open": null,
	"orderNum": 0,
	"parentId": 0,
	"parentName": null,
	"perms": "",
	"type": 0,
	"url": ""
}, {
	"icon": "fa fa-user",
	"list": null,
	"menuId": 2,
	"name": "管理员列表",
	"open": null,
	"orderNum": 1,
	"parentId": 1,
	"parentName": null,
	"perms": null,
	"type": 1,
	"url": "sys/user.html"
}, {
	"icon": "fa fa-user-secret",
	"list": null,
	"menuId": 3,
	"name": "角色管理",
	"open": null,
	"orderNum": 2,
	"parentId": 1,
	"parentName": null,
	"perms": null,
	"type": 1,
	"url": "sys/role.html"
}, {
	"icon": "fa fa-th-list",
	"list": null,
	"menuId": 4,
	"name": "菜单管理",
	"open": null,
	"orderNum": 3,
	"parentId": 1,
	"parentName": null,
	"perms": null,
	"type": 1,
	"url": "sys/menu.html"
}, {
	"icon": "fa fa-bug",
	"list": null,
	"menuId": 5,
	"name": "SQL监控",
	"open": null,
	"orderNum": 4,
	"parentId": 1,
	"parentName": null,
	"perms": null,
	"type": 1,
	"url": "druid/sql.html"
}, {
	"icon": "fa fa-tasks",
	"list": null,
	"menuId": 6,
	"name": "定时任务",
	"open": null,
	"orderNum": 5,
	"parentId": 1,
	"parentName": null,
	"perms": null,
	"type": 1,
	"url": "sys/schedule.html"
}, {
	"icon": "fa fa-sun-o",
	"list": null,
	"menuId": 27,
	"name": "参数管理",
	"open": null,
	"orderNum": 6,
	"parentId": 1,
	"parentName": null,
	"perms": "sys:config:list,sys:config:info,sys:config:save,sys:config:update,sys:config:delete",
	"type": 1,
	"url": "sys/config.html"
}, {
	"icon": "fa fa-rocket",
	"list": null,
	"menuId": 28,
	"name": "代码生成器",
	"open": null,
	"orderNum": 7,
	"parentId": 1,
	"parentName": null,
	"perms": "sys:generator:list,sys:generator:code",
	"type": 1,
	"url": "sys/generator.html"
}, {
	"icon": null,
	"list": null,
	"menuId": 0,
	"name": "一级菜单",
	"open": true,
	"orderNum": null,
	"parentId": -1,
	"parentName": null,
	"perms": null,
	"type": null,
	"url": null
}]

三、js转化方法

     注：调用方法时parentId为顶层节点的父id，这里为-1

/*递归格式化树方法*/
doFormateTreeFun: function(data, parentId){
    var t = this;
    var tree = [];
    var temp;
    for (var i = 0; i < data.length; i++) {
        if (data[i].parentId == parentId) {
            var obj = data[i];
            temp = t.doFormateTreeFun(data, data[i].menuId);
            if (temp.length > 0) {
                obj.children = temp;
            }
            tree.push(obj);
        }
    }
    console.log(tree);
    return tree;
}

四、转化后的数据结构

[{
	"icon": null,
	"list": null,
	"menuId": 0,
	"name": "一级菜单",
	"open": true,
	"orderNum": null,
	"parentId": -1,
	"parentName": null,
	"perms": null,
	"type": null,
	"url": null,
	"children": [{
		"icon": "fa fa-cog",
		"list": null,
		"menuId": 1,
		"name": "系统管理",
		"open": null,
		"orderNum": 0,
		"parentId": 0,
		"parentName": null,
		"perms": null,
		"type": 0,
		"url": null,
		"children": [{
			"icon": "fa fa-user",
			"list": null,
			"menuId": 2,
			"name": "管理员列表",
			"open": null,
			"orderNum": 1,
			"parentId": 1,
			"parentName": null,
			"perms": null,
			"type": 1,
			"url": "sys/user.html"
		}, {
			"icon": "fa fa-user-secret",
			"list": null,
			"menuId": 3,
			"name": "角色管理",
			"open": null,
			"orderNum": 2,
			"parentId": 1,
			"parentName": null,
			"perms": null,
			"type": 1,
			"url": "sys/role.html"
		}, {
			"icon": "fa fa-th-list",
			"list": null,
			"menuId": 4,
			"name": "菜单管理",
			"open": null,
			"orderNum": 3,
			"parentId": 1,
			"parentName": null,
			"perms": null,
			"type": 1,
			"url": "sys/menu.html"
		}, {
			"icon": "fa fa-bug",
			"list": null,
			"menuId": 5,
			"name": "SQL监控",
			"open": null,
			"orderNum": 4,
			"parentId": 1,
			"parentName": null,
			"perms": null,
			"type": 1,
			"url": "druid/sql.html"
		}, {
			"icon": "fa fa-tasks",
			"list": null,
			"menuId": 6,
			"name": "定时任务",
			"open": null,
			"orderNum": 5,
			"parentId": 1,
			"parentName": null,
			"perms": null,
			"type": 1,
			"url": "sys/schedule.html"
		}, {
			"icon": "fa fa-sun-o",
			"list": null,
			"menuId": 27,
			"name": "参数管理",
			"open": null,
			"orderNum": 6,
			"parentId": 1,
			"parentName": null,
			"perms": "sys:config:list,sys:config:info,sys:config:save,sys:config:update,sys:config:delete",
			"type": 1,
			"url": "sys/config.html"
		}, {
			"icon": "fa fa-rocket",
			"list": null,
			"menuId": 28,
			"name": "代码生成器",
			"open": null,
			"orderNum": 7,
			"parentId": 1,
			"parentName": null,
			"perms": "sys:generator:list,sys:generator:code",
			"type": 1,
			"url": "sys/generator.html"
		}]
	}, {
		"icon": "",
		"list": null,
		"menuId": 31,
		"name": "订单管理",
		"open": null,
		"orderNum": 0,
		"parentId": 0,
		"parentName": null,
		"perms": "",
		"type": 0,
		"url": ""
	}]
}]

 

转载于:https://my.oschina.net/tij/blog/2999693