layui递归实现动态左侧菜单

本文实例为大家分享了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>

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

(0)

相关推荐

  • 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> <!--阿里 FastJson依赖--> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.39</version> </depen

  • Vue.js递归组件构建树形菜单

    在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself!--> <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//

随机推荐