原创 

springboot-plus 添加无限级菜单

分类:前端    658人阅读    IT小君  2020-12-19 11:34

原理:

  获取菜单数据使用js组装菜单,替换调原有菜单。

修改文件:admin-core/src/main/resources/templates/index.html

修改后代码:

<!--#layout("/common/container.html"){  -->
<!-- 顶部 -->
<form class="layui-form layui-form-pane">
    <div class="layui-header">
        <a href="/" class="layui-hide-xs">
            <div class="layui-logo">${env("app.name")}</div>
        </a>
        <a href="javascript:;" class="layui-hide-xs">
            <div class="fsSwitchMenu"><i class="iconfont icon-category"></i></div>
        </a>

        <!-- 顶部菜单 -->
        <ul class="layui-nav layui-layout-left fsTopMenu" id="fsTopMenu" lay-filter="fsTopMenu">
            <!--#for(node in menus.children){  -->
            <li class="layui-nav-item ${nodeLP.first?'layui-this'}" dataPid="${node.data.id}"><a href="javascript:;"><i
                    class="layui-icon">${node.data.icon}</i>
                <!--#if(nodeLP.first){  -->
                <cite>${node.data.name}</cite>
                <!--#}else{  -->
                ${node.data.name}
                <!--#}  -->
            </a></li>
            <!--#} -->
        </ul>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide-xs">
                <a href="javascript:;">
                    ${session["core:user"].name}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">基本资料</a></dd>
                    <dd id="changeCompanyButton"><a href="javascript:;">${session["core:currentOrg"].name}</a>
                    </dd>
                </dl>
            </li>
            <li class="layui-nav-item layui-hide-xs"><a href="/logout.do"><i class="iconfont icon-tuichu"></i> 退出</a>
            </li>
        </ul>
    </div>

    <div id="selectCompany"
         style="padding: 50px;display:none;">
        <div class="layui-row">
            <div class="layui-form-item">
                <select id="companyList">
                    <!--#
                    var allOrgs = session["core:orgs"];
                    for(org in allOrgs){
                        var checked = false;
                        if(session["core:currentOrg"].id==org.id){
                            checked=true;
                        }
                     -->

                    <option value="${org.id}" ${checked?
                    "selected"}>${org.name}</option>
                    <!--#}  -->
                </select>
            </div>
        </div>
    </div>


    <!-- 左边菜单 -->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll" id="leftMenu">
            <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
            <ul class="layui-nav layui-nav-tree" lay-filter="fsLeftMenu" id="fsLeftMenu">
                <!--#
                for(node in menus.children){
                var hasSite = true;//系统的第一个菜单默认显示
                -->
                <!--#for(subSystem in node.children){  -->
                <li class="layui-nav-item layui-nav-itemed" dataPid="${node.data.id}" style="display: none;">
                    <a href="javascript:;">${subSystem.data.name}</a>
                    <dl class="layui-nav-child">
                        <!--#for(menu in subSystem.children){  -->
                        <dd class=""><a href="javascript:;" menuId="${menu.data.id}"
                                        dataUrl="${ctxPath}${menu.data.accessUrl}"><i class="layui-icon"></i>
                            ${menu.data.name}
                        </a></dd>
                        <!--#}  -->
                    </dl>
                </li>
                <!--#}  -->
                <!--#}  -->
            </ul>
        </div>
        <textarea style="display:none" id="menus">${ json(menus)}</textarea>
        <input type="hidden" id="ctxPath" value="${ctxPath}"/>
    </div>

    <!-- 右边内容区域 -->
    <div class="layui-body layui-form">
        <div class="layui-tab layui-tab-card fsTab" lay-filter="fsTab" lay-allowClose="true">

            <!-- 菜单导航 -->
            <ul class="layui-tab-title">
                <li class="layui-this">系统介绍</li>
            </ul>

            <!-- 内容 -->
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <!--#include("/help.html"){}  -->
                </div>
            </div>
        </div>
    </div>
</form>
<!--#}  -->

<script>
    /*
    * 菜单无限级
    * date: 2020-11-29 11:34
    * author: IT小君
    * blog: http://yy123.ink
    * */
    var ctxPath = "";
    layui.use('element', function () {
        var element = layui.element;
        var $ = layui.jquery;

        var data = JSON.parse($('#menus').text());
        ctxPath = $('#ctxPath').val();
        var liStr = "";

        // 遍历生成主菜单
        for (var i = 0; i < data.children.length; i++) {
            var node = data.children[i];
            for (var i = 0; i < node.children.length; i++) {
                var subSystem = node.children[i];
                if (subSystem.children != null && subSystem.children.length > 0) {
                    liStr += "<li class=\"layui-nav-item layui-nav-itemed\"  dataPid=\"" + node.data.id + "\" style=\"display: none;\">" +
                        "<a href=\"javascript:;\"><i class='layui-icon " + subSystem.data.icon + "'></i> " + subSystem.data.name + "</a>\n" +
                        "<dl class=\"layui-nav-child\">\n";
                    // 遍历获取子菜单
                    for (var k = 0; k < subSystem.children.length; k++) {
                        liStr += getChildMenu(subSystem.children[k], 0);
                    }
                    liStr += "</dl></li>";
                } else {
                    liStr += "<li class=\"layui-nav-item layui-nav-itemed\" dataPid=\"" + node.data.id + "\" style=\"display: none;\">" +
                        "<a  href=\"javascript:;\" ><i class='layui-icon " + subSystem.data.icon + "'></i> " + subSystem.data.name + "</a></li>";
                }
            }
        }

        $("#leftMenu").html(" <ul class=\"layui-nav layui-nav-tree\"  lay-filter=\"fsLeftMenu\" id=\"fsLeftMenu\">\n" + liStr + "</ul>");
        element.init();
    });

    // 递归生成子菜单
    function getChildMenu(subMenu, num) {
        num++;
        var subStr = "";
        var url = subMenu.data.accessUrl;
        url = url == null ? '' :ctxPath + url;
        if (subMenu.children != null && subMenu.children.length > 0) {
            subStr += "<dd><ul><li class=\"layui-nav-item layui-nav-itemed\" ><a dataUrl=\"" + url + "\"  href=\"javascript:;\"><i class='layui-icon " + subMenu.data.icon + "'></i> " + subMenu.data.name + "</a>" +
                "<dl class=\"layui-nav-child\">\n";
            for (var j = 0; j < subMenu.children.length; j++) {
                subStr += getChildMenu(subMenu.children[j], num);
            }
            subStr += "</dl></li></ul></dd>";
        } else {
            subStr += "<dd><a  dataUrl=\"" + url + "\" href=\"javascript:;\" \"><i class='layui-icon " + subMenu.data.icon + "'></i> " + subMenu.data.name + "</a></dd>";
        }
        return subStr;
    }
</script>

fork仓库:https://gitee.com/aquari/springboot-plus

支付宝打赏 微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

 工具推荐 更多»