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>

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

Javascript 相关文章推荐
判断JavaScript对象是否可用的最正确方法分析
Oct 03 Javascript
JS类的封装及实现代码
Dec 02 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
Javascript 面试题随笔
Mar 31 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
jQuery中end()方法用法实例
Jan 08 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
Vue3中的Refs和Ref详情
Nov 11 Vue.js
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
You might like
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
js解决movebox移动问题
2016/03/29 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
javascript基础知识讲解
2017/01/11 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
python中eval与int的区别浅析
2019/08/11 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
安全生产活动月方案
2014/03/09 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
5s推行计划书
2014/05/06 职场文书
学校端午节活动方案
2014/08/23 职场文书
个人总结与自我评价
2014/09/18 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
建议书格式
2015/02/04 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书