本文實例為大家分享了layui遞歸實現動態左側菜單的具體代碼，供大家參考，具體內容如下
我知道兩種方式實現：
一、先加載所有的主菜單，之后通過點擊主菜單在加載該菜單的子菜單(缺點,如果判斷是否已經加載過，那么動態添加了菜單，這里顯示不出來,不判斷的話，每次點擊都會請求一次，這樣請求的次數就太多了，服務器不太好的話可能會成為高并發的一個原因)
二、就是以下的了，使用遞歸一次性全部加載出來（缺點,耗費服務器內存）
如果動態添加一個菜單，你當前頁面不手動刷新菜單不會顯示，這個問題可以考慮用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 rel="stylesheet" href="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 id="index-container"> <!--信息菜單--> <div id="index-navigationbar"> <ul class="layui-nav" style="text-algin:right;background-color: black;"> <li class="layui-nav-item"> <a href="">控制臺<span class=" layui-badge">9</span></a> </li> <li class="layui-nav-item"> <a href="">個人中心<span class=" layui-badge-dot"></span></a> </li> <li class="layui-nav-item" lay-unselect=""> <a href="javascript:;" ><img src="http://t.cn/RCzsdCq" class="layui-nav-img">我</a> <dl class="layui-nav-child"> <dd><a href="javascript:;" >修改信息</a></dd> <dd><a href="javascript:;" >安全管理</a></dd> <dd><a href="javascript:;" >退了</a></dd> </dl> </li> </ul> </div> <!--操作菜單--> <div id="index-commonmenu"> <ul class="layui-nav layui-nav-tree" lay-filter="demo" style="margin-right:10px;height:538px;"> <!-- <li class="layui-nav-item"> <a href="javascript:;" >筆記管理</a> <dl class="layui-nav-child"> <dd><a href="javascript:;" meun_id=1>筆記列表</a></dd> <dd><a href="javascript:;" >分享列表</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;" >解決方案</a> <dl class="layui-nav-child"> <dd> <a href="javascript:;" >其他</a> <dl class="layui-nav-child"> <dd><a href="javascript:;" >三級菜單</a></dd> </dl> </dd> <dd><a href="">后臺模版</a></dd> <dd><a href="">電商平臺</a></dd> </dl> </li> <li class="layui-nav-item"><a href="javascript:;" >云市場</a></li> <li class="layui-nav-item"><a href="javascript:;" >社區</a></li>--> </ul> </div> <!--頁面選項卡--> <div id="indixe-tab"> <div class="layui-tab" lay-allowClose="true" lay-filter="demo1" style="margin:0px;padding:0px;"> <ul class="layui-tab-title"> </ul> <div class="layui-tab-content" style="margin:0px;padding:0px;"> </div> </div> </div> <div style="clear: both"></div> </div></body></html><script type="text/javascript" src="/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="test.html" style="width:100%;height:491px;" 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 class="layui-nav-item">'; 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 class="layui-nav-child">'; }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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
