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 相关文章推荐
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 Javascript
js实现div色块拖动录制
Jan 16 Javascript
jquery实现上传文件进度条
Mar 26 jQuery
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
Protoss魔法科技
2020/03/14 星际争霸
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
Python实现求两个csv文件交集的方法
2017/09/06 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
wxPython实现文本框基础组件
2019/11/18 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
如何在python中实现线性回归
2020/08/10 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
HTML5注册页面示例代码
2014/03/27 HTML / CSS
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
全球最大的游戏市场:G2A
2018/07/05 全球购物
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
电子邮箱格式怎么写
2014/01/12 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
歌咏比赛主持词
2015/06/29 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android