layui递归实现动态左侧菜单

2024-07-28 22:50:30

本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下

我知道两种方式实现：

一、先加载所有的主菜单，之后通过点击主菜单在加载该菜单的子菜单(缺点,如果判断是否已经加载过，那么动态添加了菜单，这里显示不出来,不判断的话，每次点击都会请求一次，这样请求的次数就太多了，服务器不太好的话可能会成为高并发的一个原因)

二、就是以下的了，使用递归一次性全部加载出来（缺点,耗费服务器内存）

如果动态添加一个菜单，你当前页面不手动刷新菜单不会显示，这个问题可以考虑用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" rel="external nofollow" >
  <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=" rel="external nofollow" layui-badge">9</span></a>
        </li>
        <li class="layui-nav-item">
          <a href="">个人中心<span class=" rel="external nofollow" layui-badge-dot"></span></a>
        </li>
        <li class="layui-nav-item" lay-unselect="">
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="https://t.cn/RCzsdCq" class="layui-nav-img">我</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改信息</a></dd>
            <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >安全管理</a></dd>
            <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >退了</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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >笔记管理</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" meun_id=1>笔记列表</a></dd>
            <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >分享列表</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >解决方案</a>
          <dl class="layui-nav-child">
            <dd>
              <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >其他</a>
              <dl class="layui-nav-child">
                <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >三级菜单</a></dd>
              </dl>
            </dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >云市场</a></li>
        <li class="layui-nav-item"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >社区</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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+note.meunTitle+'</a>';
          if(note.childrenList==null){
            return;
          }
          content+=loadchild(note);
          content+='</dd>';
        });

        content+='</dl>';
      }
      console.log(content);
      return content;
    }
  });
</script>

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

layui递归实现动态左侧菜单

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下我知道两种方式实现: 一.先加载所有的主菜单,之后通过点击主菜单在加载该菜单的子菜单(缺点,如果判断是否已经加载过,那么动态添加了菜单,这里显示不出来,不判断的话,每次点击都会请求一次,这样请求的次数就太多了,服务器不太好的话可能会成为高并发的一个原因) 二.就是以下的了,使用递归一次性全部加载出来(缺点,耗费服务器内存) 如果动态添加一个菜单,你当前页面不手动刷新菜单不会显示,这个问题可以考虑用websock
vue+quasar使用递归实现动态多级菜单

本文实例为大家分享了vue+quasar使用递归实现动态多级菜单的具体代码,供大家参考,具体内容如下效果图: 菜单初始化入口 menu.vue,初始化侧边栏菜单组建,<my-q-menu/>才是递归开始 <template> <q-drawer v-model="is_hide_" show-if-above bordered content-class="bg-grey-2" :width
vue左侧菜单,树形图递归实现代码

学习vue有一段时间了,最近使用vue做了一套后台管理系统,左侧菜单需求是这样的,可以多层,数据由后台传递.也因为自己对官方文档的不熟悉使得自己踩了不少坑,今天写出来和大家一起分享. 效果图如下所示: 先说说遇到的坑,由于是子父组件,当时传递使用的是子父组件的传递,但是这时候只能获取到第一层的数据,第二层往后获取不到数据,踩了一下午坑以后才知道,子组件使用了递归组件,这时候他已经不能往父组件传递了,子传父,只能逐层传递这时候已经隔层了,所以我使用了非子父组件传递,两个页面都引入bus.js,这里
LayUI+Shiro实现动态菜单并记住菜单收展的示例

LayUI + Shiro + Thyemleaf 实现动态菜单并记住菜单收展一.Maven 依赖 <dependencies>  <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.39</version> </depen
Vue.js递归组件构建树形菜单

在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: ` <recursive-component></recursive-component> }); 递归组件常用于在blog上显示注释.嵌套的菜单,或者基本上是父和子相同的类型,尽管具体内容不同.例如: 现在给您演示一下如何有效地使用递归组件,我将通过建立一个可扩展/收缩的树形菜
vue element 生成无线级左侧菜单的实现代码

首先来总结element ui 官方文档的左侧菜单结构,带有el-submenu为子级节点,el-menu-item表示没有下级.当然,菜单不能写死,因为菜单也许不止两级,所以我们需要递归来实现.根据当前节点是否有下级去判断,如果有下级,则继续调用子级,直到没有下级为止,下面我贴上左侧菜单所有的代码: 请求数据格式 [ { name: "首页", id: -1, icon: "el-icon-picture-outline-round", url: "/i
使用vue-element-admin框架从后端动态获取菜单功能的实现

2.详解整体思路为:登陆 > 成功后根据用户信息获取菜单 > 根据菜单生成路由信息 2.1.新增asyncRoutes路由在vue-router路径src\router\index.js中新增asyncRoutes数组,用来存放后端获取的菜单对应的路由信息. export const asyncRoutes = [ { path: '*', redirect: '/404', hidden: true } ] constantRoutes和asyncRoutes的区别 constant
vue后台管理如何配置动态路由菜单

目录后台管理配置动态路由菜单根据权限生成动态路由及导航菜单后台管理配置动态路由菜单前段时间做一个后台管理项目,因为超级管理员可以给普通管理员动态更改权限,所以vue-element-admin里的写死的权限路由菜单就不太适合我,自己研究了好半天,经历了各种死循环,终于差不多弄出了一个,可能会有点啰嗦,总结一下: 我这个后台分为三个角色:超级管理员.企业管理员和普通管理员.其中,超级管理员可以查看所有的路由菜单,企业管理员也是固定的几个菜单,所以,超级管理员和企业管理员是我在前端写好的路由
Vue3+Element-Plus实现左侧菜单折叠与展开功能示例

目录 1.最终实现的效果图 2. 实现左侧菜单折叠与展开功能步骤 2.1 首先应该在菜单顶部放一个折叠展开的按钮条 2.2 接下来,画按钮条UI结构,实现折叠与展开功能 2.3 实现点击该DIV时,触发菜单折叠与展开 2.4 折叠与展开功能是实现了,但是背景颜色并没有随着菜单折叠时跟着变小或展开时跟着变大 2.5. 最终效果 3. Home.vue 代码 1.最终实现的效果图 2. 实现左侧菜单折叠与展开功能步骤 2.1 首先应该在菜单顶部放一个折叠展开的按钮条 2.2 接下来,画按钮条
jQuery实现可用于博客的动态滑动菜单完整实例

本文实例讲述了jQuery实现可用于博客的动态滑动菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery1.3.2的动态滑动菜单特效代码,常用于博客,鼠标滑过菜单,菜单会不断伸出,貌似很漂亮,我比较喜欢,发上来供大家使用或学习参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-blog-move-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//

layui递归实现动态左侧菜单

相关推荐

随机推荐