Today, I was working on a permission system, and I came across a tree menu. When I saw this article, I would like to sort it out:

The returned data format is as follows:

Requirement: First this is a dataset – js type, we need to generate a tree form of the object:

var data = [
{ id: 1, name: "User Management", pid: 0 },
{ id: 2, name: "Menu Request", pid: 1 },
{ id: 3, name: "Request for information", pid: 1 },
{ id: 4, name: "Module Record", pid: 2 },
{ id: 5, name: "System Settings", pid: 0 },
{ id: 6, name: "Rights Management", pid: 5 },
{ id: 7, name: "User roles", pid: 6 },
{ id: 8, name: "Menu Settings", pid: 6 },
];Copy the code

If pid does not exist, or PID :0, this item should be the top of the tree, so we need to rebuild the index, how to build, with the original data set ID value, generate a new data as follows:

var data = [
	{id: 1, name: "Office Management", pid: 0 ,
		children:[
			{ id: 2, name: "Application for Leave", pid: 1,
				hildren:[
					{ id: 4, name: "Leave Record", pid: 2 },
				],
			},
			{ id: 3, name: "Travel Application", pid: 1},
		]
    },
	{id: 5, name: "System Settings", pid: 0 ,
		children:[
			{ id: 6, name: "Rights Management", pid: 5,
				hildren:[
					{ id: 7, name: "User roles", pid: 6 },
					{ id: 8, name: "Menu Settings", pid: 6 },
				]
			},
		]
	},
];Copy the code

Js converts to the above data set to implement the number tree level recursive method:

<script>
    functionToTree (data) {// Delete all children to prevent multiple calls to data.foreach (function(item) { delete item.children; }); Var map = {}; var map = {}; data.forEach(function (item) {
            map[item.id] = item;
        });
//        console.log(map);
        var val = [];
        data.forEach(functionVar parent = map[item.pid]; var parent = map[item.pid]; // If the index is found, then the item is not in the top level, so we need to add the item to its parentif (parent) {
                (parent.children || ( parent.children = [] )).push(item);
            } else{// If no index ID is found in the map, add the current item directly to the val result set as the top-level val.push(item); }});return val;
    }
    console.log(toTree(data))
</script>Copy the code

Use jquery to achieve this effect

<! DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title> Recursive algorithm implementation </title> <script SRC ="Jquery - 1.8.3. Min. Js"></script>
</head>
<body>
 
    <script type="text/javascript">
        $(function () {
            var data = [
            { id: 1, name: "Office Management", pid: 0 },
            { id: 2, name: "Application for Leave", pid: 1 },
            { id: 3, name: "Travel Application", pid: 1 },
            { id: 4, name: "Leave Record", pid: 2 },
            { id: 5, name: "System Settings", pid: 0 },
            { id: 6, name: "Rights Management", pid: 5 },
            { id: 7, name: "User roles", pid: 6 },
            { id: 8, name: "Menu Settings", pid: 6 },
            ];
 
            GetData(0, data);
            $("body").append(menus); }); // Menu list HTML var menus =' '; HTML //id: menu primary key ID //arry: menu array informationfunction 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>'; }} // Get sub-menu according to menu primary key ID //id: menu primary key ID //arry: menu array informationfunction 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>Copy the code

Methods used in VUE:

this.dataSource = this.convert('0', result.data)convert(id, arr) {      let newarr = [...arr]      let resultarr = []      newarr.forEach((item,index) => {          if (item.parentId === id) {              resultarr.push(item)          }      })    if(resultarr .length>0){      resultarr .forEach(item =>{        item.children = this.convert(item.id, arr)      })     }    return resultarr     },Copy the code

Refer to the website: https://blog.csdn.net/u013373006/article/details/82108873