json菜单的遍历渲染(二)

握风
332 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

通过上一篇文章，发现一维数组json格式的遍历其实还是很简单的
但是它有很多局限性，对一般小项目也许问题不大，但是涉及权限繁杂的系统，尤其是多角色使用的系统，权限涉及到甚至某一个页面的各个按钮以及内容显示时，一维数组可能做起来麻烦。
即使费大力气实现了，但是可扩展性、代码可读性等等会低很多

那这里就需要使用到多维数组形式的json菜单格式了
这种格式的优势很明显，比如，一级菜单对当前用户不可见，那它的所有子菜单，子菜单的子菜单...都不可见，这里只需要判断一级菜单即可，不用每个都判断一遍了

多维格式json菜单

var data = [{
        id: 1,
        name: "办公管理",
    }, {
        id: 2,
        name: "请假申请",
    },
    [{
        id: 9,
        name: "员工请假"
    }], {
        id: 3,
        name: "出差申请",
    },
    [{
            id: 2,
            name: "出差申请-1"
        },
        [{
                id: 3,
                name: "出差申请-1-1"
            }, {
                id: 3,
                name: "出差申请-1-2"
            },
            [{
                id: 4,
                name: "出差申请1-2-1"
            }]
        ]
    ], {
        id: 10,
        name: "系统管理"
    }
];

这结构是不是简单明了
这里其实不需要像一维数组那样，通过id和pid找子菜单集合了
因为通过结构就能看出来了，相当于省了一步

另外要说明一点的是，一般子菜单集合都会有一个key值的，我这里简写直接没有了（严格来讲，其实是默认int序号了...），这样简写的话，遍历方法也做了微调的，不用判断key的Count>0，而是同上文中一样，判断id是不是数字就行了

怎么样，看了json格式，加上面我的分析，你是不是能写出来遍历方法呢

遍历剖析

仔细分析一下，不难发现，我只需要按顺序循环一遍，然后拼接一个html字符串即可
不过在拼接前，需要判断，是不是平级的菜单，如果不是，递归调用自身，进入下一个循环即可
没错，这里递归依然很重要
话不多说，直接上代码了

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        var menu = "";
        var getTree = function (data) {
            for (let i in data) {
                menu += "<ul>";
                if ((typeof data[i].id) === "number") {
                    menu += "<li>" + data[i].name + "</li>";
                } else {
                    getTree(data[i]);
                }
                menu += "</ul>";
            }
        }
        getTree(data);
        $("body").append(menu);
    </script>
</body>

相当于比一维json菜单少了一个获取子菜单集合的方法而已
变得更简单了

技巧：这里如果你想不到递归，可以先把菜单想象成只有两层，先写一个嵌套代码，然后再想三层怎么写，这样就能看到重复代码了，然后再想想如何重复利用这里的重复代码，慢慢来就能发现递归如此简单就写出来了

如果是工作中项目，菜单中肯定还有其他的权限属性之类的，这里只需要加到for循环里判断即可，比如加class，然后用js来动态控制，如果用的是vue或者blazor之类的mvvm框，那就更简单了，直接用v-if/v-show之类的指令或c#语法来写就行了

渲染效果 image.png

文末总结

一件事再难，接触多了，也会变得很简单
就怕遇难退缩，那样永远也学不会
碰壁多了才能不碰壁，路之所以是路，就因为走的人多了，自然成了路
玩命踩坑吧

avatar
文章
阅读
粉丝