Layui实现动态加载侧边导航栏菜单功能

在使用layui做管理系统的权限功能时可能会需要对侧边的导航菜单栏进行动态控制，限制用户可以操作的菜单按钮，下面实现了一个简单的导航菜单动态加载功能(注：只实现了两级菜单，多级树形菜单可以参考思路)。

导航栏控件

首先在页面中有如下导航菜单的div

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree" lay-filter="mainWindow" id="nav_menu">
                </ul>
            </div>
        </div>

后台返回数据

由后台返回的菜单项数据如下。data存储的是每个一级菜单项及其下子菜单项的数组，数组每个元素中包括父节点信息parentNode和其下的子项信息列表childNodeList.

{"code":200,"count":0,"msg":"","data":[{"parentNode":{"id":10001,"menuName":"XX管理","parentId":0,"pageId":null,"url":null,"order":null,"backupFlag":null},"childNodeList":[{"id":10002,"menuName":"XXX管理","parentId":10001,"pageId":null,"url":"../templates/dictionary/dictClass.html","order":null,"backupFlag":null},{"id":10003,"menuName":"XXX管理","parentId":10001,"pageId":null,"url":"../templates/dictionary/dictValue.html","order":null,"backupFlag":null}]},{"parentNode":{"id":10004,"menuName":"XXX管理","parentId":0,"pageId":null,"url":null,"order":null,"backupFlag":null},"childNodeList":[{"id":10005,"menuName":"XXXX管理","parentId":10004,"pageId":null,"url":"https://www.baidu.com","order":null,"backupFlag":null}]}]}

js代码

该实现是根据后台返回的菜单项数据生成菜单导航栏的html代码，然后插入到导航栏的标签下。菜单项html生成代码如下,遍历每个菜单项目，先根据每个菜单项下的子项生成子项的html,然后根据父节点信息生成大的父级菜单项并把子项html加入标签下。依次遍历所有的大类菜单生成html并拼接，之后插入导航栏的标签下。

function renderPage() {
        //获取后台返回的导航菜单数据(这里是把上面后台返回的data.data数据存到了localstorage里)
        let menuItemArray = JSON.parse(localStorage.getItem("permittedMenuItems"));
        //根据data.data里的菜单项数据生成html字符串
        let menuStr = generateMenuHtml(menuItemArray);
        //设置导航菜单标签里的html代码
        document.getElementById("nav_menu").innerHTML = menuStr;
        layui.element.init();
    }
    
    //根据菜单项数据生成需要插入的html文本
    function generateMenuHtml(menuItemArray) {
        let menuHtml = '';
        //遍历每个分类菜单项
        for (let i = 0; i< menuItemArray.length; i++){
            let parentNode = menuItemArray[i]['parentNode'];
            let childItemList = menuItemArray[i]['childNodeList'];
            //生成分类菜单中的子菜单html
            let chileItemStr = getChildItemHtml(childItemList);
            //生成每个分类菜单项的html
            let str = getParentItemHtml(parentNode, chileItemStr);
            //将多个分类菜单html拼在一起
            menuHtml += str;
        }
        return menuHtml;
    }

    function getChildItemHtml(childItemList) {
        let childItemStr = '';
        for(let i = 0; i < childItemList.length; i++ ){
            let childItem = childItemList[i];
            let menuName = childItem['menuName'];
            let nodeUrl = childItem['url'];
            let baseChildItemHtml = `<dd><a href="${nodeUrl}" target="content_iframe">${menuName}</a> </dd>`;
            childItemStr+=baseChildItemHtml;
        }
        if(childItemList.length != 0){
            return `<dl class="layui-nav-child">${childItemStr}</dl>`;
        }
        else {
            return '';
        }
    }

    function getParentItemHtml(parentNode, childStr) {
        let parentName = parentNode['menuName'];
        let parentUrl = parentNode['url'];
        //需要把父节点菜单的跳转连接设置为如下
        if(parentUrl == '' || parentUrl == null){
            parentUrl = 'JavaScript:;';
        }
        //target里的content_iframe需要对应自己的iframeid
        let str = `<li class="layui-nav-item layui-nav-itemed"><a class="" href="${parentUrl}" target="content_iframe">${parentName}</a>${childStr}</li>`;
        return str;
    }

新手不太会前端JS，轻喷。