内存多叉树实现无限树形菜单

发表于 | 分类于

问题背景

树形菜单是我们在权限控制中使用极为广泛的的控件之一,其主要是通过ajax接收服务器端返回的JSON格式数据，动态生成树形菜单的节点。结合实际情况主要有两种形式生成树形菜单，一种就是服务器端一次性生成树形菜单供前端渲染即可，另一种是当菜单比较多的情况下，需要异步加载菜单。一般来说后台的树形菜单都会很多，所以一次性生成树形菜单更符合我们的实际需求。

需求分析

1、需要根据父菜单获取其所有子菜单 2、可以对子菜单根据优先级进行排序

设计方案

数据库表的设计

这里数据库表的设计我们采用最为简单的方式即可

列名 描述
name 菜单名称
type 菜单类型（子菜单or头部菜单)
priority 菜单优先级
parentId 父菜单Id
url 菜单链接

将数据获取的菜单组成前端需要的JSON字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
{
      "id": 4,
      "name": "用户",
      "url": "",
      "parentId": 0,
      "children": {
        "list": [
          {
            "id": 5,
            "name": "用户管理",
            "url": "/user/list",
            "parentId": 4,
            "children": {
              "list": [
                {
                  "id": 12,
                  "name": "用户删除",
                  "url": "/user/delete",
                  "parentId": 5,
                  "children": {
                    "list": [],
                    "size": 0
                  }
                },
                {
                  "id": 14,
                  "name": "解锁用户",
                  "url": "/user/unlock",
                  "parentId": 5,
                  "children": {
                    "list": [],
                    "size": 0
                  }
                }
              ],
              "size": 3
            }
          },
          {
            "id": 6,
            "name": "用户权限分配",
            "url": "/auth/list",
            "parentId": 4,
            "children": {
              "list": [],
              "size": 0
            }
          },
          {
            "id": 182,
            "name": "在线用户管理",
            "url": "/session/list",
            "parentId": 4,
            "children": {
              "list": [],
              "size": 0
            }
          }
        ],
        "size": 3
      }
    },

总结

由上面的实现方式可以概括为.

  1. 数据库中获取原数据
  2. 将原数据按照规则进行层次转换
  3. 对树中的每个层次的节点按照优先级大小进行排序 由以上思路我们可以联想到数据结构中的二叉树，但是有一点不同的是每个节点下面可以有多个子节点。所以在二叉树的基础上我们可以实现一种数据结构用来保存树形菜单

源码实现