js根据menu表创建菜单树
时间: 2023-06-09 13:02:59 浏览: 63
好的,您想了解如何使用 JavaScript 创建菜单树,是吗?一般来说,可以从一个包含菜单数据的数组开始,然后使用递归函数来构建整个菜单树。以下是一种实现方式:
1.定义一个包含菜单数据的数组:
```
var menuData = [
{id: 1, name: '菜单1', parent: 0},
{id: 2, name: '菜单1-1', parent: 1},
{id: 3, name: '菜单1-2', parent: 1},
{id: 4, name: '菜单1-2-1', parent: 3},
{id: 5, name: '菜单2', parent: 0},
{id: 6, name: '菜单2-1', parent: 5},
{id: 7, name: '菜单2-1-1', parent: 6},
{id: 8, name: '菜单2-2', parent: 5},
{id: 9, name: '菜单3', parent: 0}
];
```
2.定义一个递归函数,该函数接受一个父菜单ID作为参数,并返回该菜单下的所有子菜单:
```
function buildMenuTree(parentId) {
var menuTree = [];
for (var i = 0; i < menuData.length; i++) {
if (menuData[i].parent === parentId) {
var submenu = buildMenuTree(menuData[i].id);
if (submenu.length > 0) {
menuData[i].children = submenu;
}
menuTree.push(menuData[i]);
}
}
return menuTree;
}
```
3.调用递归函数并传入根菜单ID,就可以得到整个菜单树:
```
var menuTree = buildMenuTree(0); // 根菜单的parent ID为0
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)