首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

layui递归实现动态左侧菜单

Posted in Javascript onJuly 26, 2019

本文实例为大家分享了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="//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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

layui递归实现动态左侧菜单

- Author -

执丶笔

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
Javascript 两个窗体之间传值实现代码
Sep 25 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
Javascript中的方法链（Method Chaining）介绍
Mar 15 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 #Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 #Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 #Javascript
vue实现滑动切换效果（仅在手机模式下可用）
Jun 29 #Javascript
微信小程序设置滚动条过程详解
Jul 25 #Javascript
vuejs移动端实现div拖拽移动
Jul 25 #Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 #Javascript
239军机(1) DE1103(2) YAESU(1) DE1105(1) AN-LP1(1) 根德5570(1) BCLer(1) ICF-903L(1) YB-230(1) frg-100(1)
You might like
9个PHP开发常用功能函数小结
2011/07/15 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
js单向链表的具体实现实例
2013/06/21 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
开发用到的js封装方法（20种）
2018/10/12 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
Python实现的数据结构与算法之队列详解
2015/04/22 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
python实现日常记账本小程序
2018/03/10 Python
TensorFlow实现模型评估
2018/09/07 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
详解Python 函数如何重载？
2019/04/23 Python
python画图的函数用法以及技巧
2019/06/28 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
Python pandas用法最全整理
2019/08/04 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
管理站站长岗位职责
2013/11/27 职场文书
护理毕业生自荐信范文
2013/12/22 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
单位车辆管理制度
2015/08/05 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers