我知道两种方式实现：
一、先加载所有的主菜单，之后通过点击主菜单在加载该菜单的子菜单(缺点,如果判断是否已经加载过，那么动态添加了菜单，这里显示不出来,不判断的话，每次点击都会请求一次，这样请求的次数就太多了，服务器不太好的话可能会成为高并发的一个原因)
二、就是以下的了，使用递归一次性全部加载出来（缺点,耗费服务器内存）
如果动态添加一个菜单，你当前页面不手动刷新菜单不会显示，这个问题可以考虑用websocket实现
首先是service层如何获取所有的菜单(主菜单和所有的子菜单)
/** *获取所有菜单 **/ @Override public List<MeunInfo> getParentMeun() { //获取所有的菜单(包括子菜单和父级菜单) List<MeunInfo> list = meunDao.getParentMeun(); //创建一个集合用于保存所有的主菜单 List<MeunInfo> rootMeun=new ArrayList<>(); //遍历所有菜单集合,如果是主菜单的话直接放入rootMeun集合 for (MeunInfo info:list){ //判断为0是因为我的主菜单标识是0 if (info.getMeunParent()==0){ rootMeun.add(info); } } //这个是遍历所有主菜单,分别获取所有主菜单的所有子菜单 for (MeunInfo info:rootMeun){ //获取所有子菜单 递归 List<MeunInfo> childrenList=getchildrenMeun(info.getId(),list); //这个是实体类中的子菜单集合 info.setChildrenList(childrenList); } return rootMeun; } /** * 递归获取子菜单(这个我也不太理解，copy过去就行) **/ public List<MeunInfo> getchildrenMeun(int id,List<MeunInfo> allMeun){ //用于保存子菜单 List<MeunInfo> childrenList=new ArrayList<>(); for (MeunInfo info: allMeun){ //判断当前的菜单标识是否等于主菜单的id if(info.getMeunParent()==id){ //如果是的话 就放入主菜单对象的子菜单集合 childrenList.add(info); } } //这里就是递归了，遍历所有的子菜单 for (MeunInfo info:childrenList){ info.setChildrenList(getchildrenMeun(info.getId(),allMeun)); } //如果子菜单为空的话，那就说明某菜单下没有子菜单了，直接返回空,子菜单为空的话就不会继续 //迭代了 if(childrenList!=null && childrenList.size()==0){ return null; } return childrenList; }
接下来是实体类
//菜单id private int id; //菜单标题 private String meunTitle; //菜单地址 private String meunUrl; //菜单状态 private int meunStatus; //菜单标识 private int meunParent; //菜单排序 private int meunSort; //子菜单集合 private List<MeunInfo> childrenList; //get set 省略
之后你可以测试，可以拿到结果,这个自行测试
界面代码(注意这里我是用的是layui)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://www.jb51.net/css/layui.css" > <style type="text/css"> #index-container,html,body{ margin:0px; padding:0px; } #index-container{ width:100%; height:auto; } #index-navigationbar{ width:100%; height:60px; } #index-navigationbar ul{ padding-left:77%; } #index-commonmenu{ width: 15%; height:519px; float: left; } #indixe-tab{ width:84.9%; height: 150px; float: right; } </style> </head> <body> <!--首页容器--> <div> <!--信息菜单--> <div> <ul> <li> <a href="">控制台<span>9</span></a> </li> <li> <a href="">个人中心<span></span></a> </li> <li lay-unselect=""> <a href="javascript:;" ><img src="https://t.cn/RCzsdCq">我</a> <dl> <dd><a href="javascript:;" >修改信息</a></dd> <dd><a href="javascript:;" >安全管理</a></dd> <dd><a href="javascript:;" >退了</a></dd> </dl> </li> </ul> </div> <!--操作菜单--> <div> <ul lay-filter="demo"> <!-- <li> <a href="javascript:;" >笔记管理</a> <dl> <dd><a href="javascript:;" meun_id=1>笔记列表</a></dd> <dd><a href="javascript:;" >分享列表</a></dd> </dl> </li> <li> <a href="javascript:;" >解决方案</a> <dl> <dd> <a href="javascript:;" >其他</a> <dl> <dd><a href="javascript:;" >三级菜单</a></dd> </dl> </dd> <dd><a href="">后台模版</a></dd> <dd><a href="">电商平台</a></dd> </dl> </li> <li><a href="javascript:;" >云市场</a></li> <li><a href="javascript:;" >社区</a></li>--> </ul> </div> <!--页面选项卡--> <div> <div lay-allowClose="true" lay-filter="demo1"> <ul> </ul> <div> </div> </div> </div> <div></div> </div> </body> </html> <script type="text/javascript" src="https://www.jb51.net/layui.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> //注意：导航 依赖 element 模块，否则无法进行功能性操作 layui.use('element', function(){ var $ = layui.jquery ,element = layui.element; element.on('nav(demo)', function(elem){ //console.log(elem.getAttribute("meun_id")); //得到当前点击的DOM对象 var id=$(this).attr("meun_id"); if(typeof(id)!="undefined"){ console.log('进入方法'); element.tabAdd('demo1', { title: '新选项'+ (Math.random()*1000|0) //用于演示 ,content: '<iframe src="https://www.jb51.net/test.html" scrolling="auto" frameborder="0"></iframe>' ,id: id//实际使用一般是规定好的id，这里以时间戳模拟下z }) element.tabChange('demo1', id); } }); //获取所有的菜单 $.ajax({ type:"GET", url:"http://localhost:8080/test", dataType:"json", success:function(data){ //先添加所有的主材单 $.each(data,function(i,obj){ var content='<li>'; content+='<a href="javascript:;" >'+obj.meunTitle+'</a>'; //这里是添加所有的子菜单 content+=loadchild(obj); content+='</li>'; $(".layui-nav-tree").append(content); }); element.init(); }, error:function(jqXHR){ aler("发生错误："+ jqXHR.status); } }); //组装子菜单的方法 function loadchild(obj){ if(obj==null){ return; } var content=''; if(obj.childrenList!=null && obj.childrenList.length>0){ content+='<dl>'; }else{ content+='<dl>'; } if(obj.childrenList!=null && obj.childrenList.length>0){ $.each(obj.childrenList,function(i,note){ content+='<dd>'; content+='<a href="javascript:;" >'+note.meunTitle+'</a>'; if(note.childrenList==null){ return; } content+=loadchild(note); content+='</dd>'; }); content+='</dl>'; } console.log(content); return content; } }); </script>