layui 生成动态左侧菜单递归实现

最新推荐文章于 2023-04-11 22:28:51 发布

执丶笔

最新推荐文章于 2023-04-11 22:28:51 发布

阅读量1.2w

点赞数 20

分类专栏：功能模块文章标签： layui 菜单动态实现 mysql

本文链接：https://blog.csdn.net/qq_36259025/article/details/87631127

版权

功能模块专栏收录该内容

5 篇文章 1 订阅

订阅专栏

我知道两种方式实现：

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

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

如果动态添加一个菜单，你当前页面不手动刷新菜单不会显示，这个问题可以考虑用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>

这是我的第一篇博客，多谢大家的观看，希望能帮大家解决问题!!!

执丶笔

关注

20
点赞
踩
55

收藏

觉得还不错? 一键收藏
12
评论
layui 生成动态左侧菜单递归实现

我知道两种方式实现：一、先加载所有的主菜单，之后通过点击主菜单在加载该菜单的子菜单(缺点,如果判断是否已经加载过，那么动态添加了菜单，这里显示不出来,不判断的话，每次点击都会请求一次，这样请求的次数就太多了，服务器不太好的话可能会成为高并发的一个原因)二、就是以下的了，使用递归一次性全部加载出来（缺点,耗费服务器内存）如果动态添加一个菜单，你当前页面不手动刷新菜单不会显示，这个问题可以...
复制链接

扫一扫