原理:
获取菜单数据使用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