首页
所有分类
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 相关文章推荐
JQuery 风格的HTML文本转义
Jul 01 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
JScript实现地址选择功能
Aug 15 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 Javascript
原生JavaScript实现简单五子棋游戏
Jun 28 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
ElementTree(1) Odoo(1) 黑名单(1) BeautifulSoup4(2) ftpserver(1) tfx(1) NFS(1) tkFileDialog(1) SeaTunnel(1) Logrotate(1)
You might like
laravel 实现设置时区的简单方法
2019/10/10 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
Javascript 构造函数 实例分析
2008/11/26 Javascript
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
Python-opencv 双线性插值实例
2020/01/17 Python
Python序列化pickle模块使用详解
2020/03/05 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
详解Html5页面实现下载文件（apk、txt等）的三种方式
2018/10/22 HTML / CSS
自我评价是什么
2014/01/04 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
投标服务承诺书
2014/05/28 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
商场收银员岗位职责
2015/04/07 职场文书
教师工作证明范本
2015/06/12 职场文书
暂住证证明
2015/06/19 职场文书
运动会广播稿100字
2015/08/19 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书