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中的变量是传值还是传址的?
Apr 19 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 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
You might like
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
python 读取DICOM头文件的实例
2018/05/07 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
金融专业个人求职信
2013/09/22 职场文书
初入社会应届生求职信
2013/11/18 职场文书
车辆安全检查制度
2014/01/12 职场文书
公务员综合考察材料
2014/02/01 职场文书
初三新学期计划书
2014/05/03 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
党的作风建设心得体会
2014/10/22 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
python实现图片批量压缩
2021/04/24 Python
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js