layui三级菜单渲染

痛定思痛。 2022-03-08 06:40 582阅读 0赞

> 项目做完了，可以有时间写写博客了。 今天给大家讲解一下layui的三级动态加载菜单含后端代码。

我是最近刚学的layui，非常感谢贤心大神。开发出这么牛逼ui的框架。
    声明：KingYiFan前段是渣渣，本次讲解用的前端js并非KingYiFan亲自封装只是稍作修改，非常感谢封装三级菜单CSDN的大神：yufengaotian

[点我快速进入作者原文][Link 1]

下图就是三级菜单效果。为什么要讲这个呢。

![file][]

**yufenggaotian大神也在博客中写道这个问题我就借用一下：** ![file][file 1] （图来着yufenggaotianCSDN博客）

> 前端页面：

//直接上代码吧
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>三级菜单展示</title>
    </head>
    <body>
    
    <div class="layui-side layui-bg-black" id="admin-side">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" id="nav" lay-filter="demo"></ul>
        </div>
    </div>
    </body>
    
    <link rel="stylesheet" href="/static/css/layui.css">
    <script src="/static/js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/lib/layui/layui.js"></script>
    <script src="/static/js/api.js"></script>
    <script>
        //监听选中页签添加样式
        layui.config({
            base: '/static/lib/layui/'   //navbar组件js所在目录
        }).use('navbar', function() {
            var navbar = layui.navbar();
            navbar.set({
                elem: '#nav',
                url: "/menuInfo" //访问后台接口
            });
            navbar.render();
          
            //给选中的页签添加选中样式（解决刷新失效问题）
            var url = window.location.href.replace("//", "");
            var relUrl = url.substring(url.lastIndexOf("/") + 1);
            //去掉参数部分
            if (relUrl.indexOf("?") != -1) {
                relUrl = relUrl.split("?")[0];
            }
            $("#leftNavbar a").each(function () {
                var that = this;
                if ($(that).attr("href") == relUrl) {
                    $(that).parent().addClass("layui-this");
                    $(that).parents("li:eq(0)").addClass("layui-nav-itemed");
                    var nodes = $(that).parents("li:eq(0)").find("a .layui-nav-more");
                    if (nodes.length > 0) {
                        nodes.each(function () {
                            if ($(this).parents("dd:eq(0)").find("[href='" + relUrl +
                                "']").length > 0) {
                                $(this).parent().parent().addClass("layui-nav-itemed");
                            }
                        });
                    }
                }
            });
    
        });
    </script>
    </html>

`js部分可以不做修改`

layui.define(['element', 'common'], function (exports) {
        "use strict";
        var $ = layui.jquery,
            layer = parent.layer === undefined ? layui.layer : parent.layer,
            element = layui.element,
            common = layui.common,
            cacheName = 'tb_navbar';
    
        var Navbar = function () {
            /**
             *  默认配置
             */
            this.config = {
                elem: undefined, //容器
                data: undefined, //数据源
                url: undefined, //数据源地址
                type: 'GET', //读取方式
                cached: false, //是否使用缓存
                spreadOne: false //设置是否只展开一个二级菜单
            };
            this.v = '1.0.0';
        };
        //渲染
        Navbar.prototype.render = function () {
            var _that = this;
            var _config = _that.config;
            if (typeof (_config.elem) !== 'string' && typeof (_config.elem) !== 'object') {
                common.throwError('Navbar error: elem参数未定义或设置出错，具体设置格式请参考文档API.');
            }
            var $container;
            if (typeof (_config.elem) === 'string') {
                $container = $('' + _config.elem + '');
            }
            if (typeof (_config.elem) === 'object') {
                $container = _config.elem;
            }
            if ($container.length === 0) {
                common.throwError('Navbar error:找不到elem参数配置的容器，请检查.');
            }
            if (_config.data === undefined && _config.url === undefined) {
                common.throwError('Navbar error:请为Navbar配置数据源.')
            }
            if (_config.data !== undefined && typeof (_config.data) === 'object') {
                var html = getHtml(_config.data);
                $container.html(html);
                element.init();
                _that.config.elem = $container;
            } else {
                if (_config.cached) {
                    var cacheNavbar = layui.data(cacheName);
                    if (cacheNavbar.navbar === undefined) {
                        $.ajax({
                            type: _config.type,
                            url: _config.url,
                            async: false, //_config.async,
                            dataType: 'json',
                            success: function (result, status, xhr) {
                                //添加缓存
                                layui.data(cacheName, {
                                    key: 'navbar',
                                    value: result
                                });
                                var html = getHtml(result);
                                $container.html(html);
                                element.init();
                            },
                            error: function (xhr, status, error) {
                                common.msgError('Navbar error:' + error);
                            },
                            complete: function (xhr, status) {
                                _that.config.elem = $container;
                            }
                        });
                    } else {
                        var html = getHtml(cacheNavbar.navbar);
                        $container.html(html);
                        element.init();
                        _that.config.elem = $container;
                    }
                } else {
                    //清空缓存
                    layui.data(cacheName, null);
                    $.ajax({
                        type: _config.type,
                        url: _config.url,
                        async: false, //_config.async,
                        dataType: 'json',
                        success: function (result, status, xhr) {
                            var html = getHtml(result);
                            $container.html(html);
                            element.init();
                        },
                        error: function (xhr, status, error) {
                            common.msgError('Navbar error:' + error);
                        },
                        complete: function (xhr, status) {
                            _that.config.elem = $container;
                        }
                    });
                }
            }
    
            //只展开一个二级菜单
            if (_config.spreadOne) {
                var $ul = $container.children('ul');
                $ul.find('li.layui-nav-item').each(function () {
                    $(this).on('click', function () {
                        $(this).siblings().removeClass('layui-nav-itemed');
                    });
                });
            }
            return _that;
        };
        /**
         * 配置Navbar
         * @param {Object} options
         */
        Navbar.prototype.set = function (options) {
            var that = this;
            that.config.data = undefined;
            $.extend(true, that.config, options);
            return that;
        };
        /**
         * 绑定事件
         * @param {String} events
         * @param {Function} callback
         */
        Navbar.prototype.on = function (events, callback) {
            var that = this;
            var _con = that.config.elem;
            if (typeof (events) !== 'string') {
                common.throwError('Navbar error:事件名配置出错，请参考API文档.');
            }
            var lIndex = events.indexOf('(');
            var eventName = events.substr(0, lIndex);
            var filter = events.substring(lIndex + 1, events.indexOf(')'));
            if (eventName === 'click') {
                if (_con.attr('lay-filter') !== undefined) {
                    _con.children('ul').find('li').each(function () {
                        var $this = $(this);
                        if ($this.find('dl').length > 0) {
                            var $dd = $this.find('dd').each(function () {
                                $(this).on('click', function () {
                                    var $a = $(this).children('a');
                                    var href = $a.data('url');
                                    var icon = $a.children('i:first').data('icon');
                                    var title = $a.children('cite').text();
                                    var data = {
                                        elem: $a,
                                        field: {
                                            href: href,
                                            icon: icon,
                                            title: title
                                        }
                                    }
                                    callback(data);
                                });
                            });
                        } else {
                            $this.on('click', function () {
                                var $a = $this.children('a');
                                var href = $a.data('url');
                                var icon = $a.children('i:first').data('icon');
                                var title = $a.children('cite').text();
                                var data = {
                                    elem: $a,
                                    field: {
                                        href: href,
                                        icon: icon,
                                        title: title
                                    }
                                }
                                callback(data);
                            });
                        }
                    });
                }
            }
        };
        /**
         * 清除缓存
         */
        Navbar.prototype.cleanCached = function () {
            layui.data(cacheName, null);
        };
        /**
         * 获取html字符串
         * @param {Object} data
         */
        function getHtml(data) {
            var ulHtml = '<ul class="layui-nav layui-nav-tree beg-navbar">';
            for (var i = 0; i < data.length; i++) {
                if (data[i].spread) {
                    ulHtml += '<li class="layui-nav-item layui-nav-itemed">';
                } else {
                    ulHtml += '<li class="layui-nav-item">';
                }
    
                if (data[i].children !== undefined && data[i].children !== null && data[i].children.length > 0) {
    
                    ulHtml += '<a href="javascript:;">' + data[i].title;
                    ulHtml += '<span class="layui-nav-more"></span>';
                    ulHtml += '</a>';
                    ulHtml += '<dl class="layui-nav-child">';
                    //二级菜单
                    for (var j = 0; j < data[i].children.length; j++) {
                        //是否有孙子节点
                        if (data[i].children[j].children !== undefined && data[i].children[j].children !== null && data[i].children[j].children.length > 0) {
                            ulHtml += '<dd>';
                            ulHtml += '<a href="javascript:;">' + data[i].children[j].title;
                            ulHtml += '<span class="layui-nav-more"></span>';
                            ulHtml += '</a>';
                            //三级菜单
                            ulHtml += '<dl class="layui-nav-child">';
                            var grandsonNodes = data[i].children[j].children;
                            for (var k = 0; k < grandsonNodes.length; k++) {
                                ulHtml += '<dd>';
                                ulHtml += '<a target="xq" href="'+ grandsonNodes[k].href +'">' + grandsonNodes[k].title + '</a>';
                                ulHtml += '</dd>';
                            }
                            ulHtml += '</dl>';
                            ulHtml += '</dd>';
                        }else{
                            ulHtml += '<dd>';
                            ulHtml += '<a target="xq" href="'+data[i].children[j].href+'">' + data[i].children[j].title;
                            ulHtml += '</a>';
                            ulHtml += '</dd>';
                        }
                        //ulHtml += '<dd title="' + data[i].children[j].title + '">';
                    }
                    ulHtml += '</dl>';
                } else {
                    var dataUrl = (data[i].href !== undefined && data[i].href !== '') ? 'data-url="' + data[i].href + '"' : '';
                    //ulHtml += '<a href="javascript:;" ' + dataUrl + '>';
                    ulHtml += '<a href="' + data[i].href + '"' + dataUrl + 'target="xq">';
                    if (data[i].icon !== undefined && data[i].icon !== '') {
                            ulHtml +=  '<i  class="layui-icon" >' +'<img src=' +data[i].icon +'>'+'</i>';
                    }
                    ulHtml += '<cite>' + data[i].title + '</cite>';
                    ulHtml += '</a>';
                }
                ulHtml += '</li>';
            }
            ulHtml += '</ul>';
    
            return ulHtml;
        }
    
        var navbar = new Navbar();
    
        exports('navbar', function (options) {
            return navbar.set(options);
        });
    });
    common.js
    layui.define(['layer'], function(exports) {
        "use strict";
    
        var $ = layui.jquery,
            layer = layui.layer;
    
        var common = {
            /**
             * 抛出一个异常错误信息
             * @param {String} msg
             */
            throwError: function(msg) {
                throw new Error(msg);
                return;
            },
            /**
             * 弹出一个错误提示
             * @param {String} msg
             */
            msgError: function(msg) {
                layer.msg(msg, {
                    icon: 5
                });
                return;
            }
        };
    
        exports('common', common);
    });

json格式：
    [
    	{
    		"title": "我是一级",
    		"icon": "",
    		"spread": true,
    		"href": "",
    		"children": [
    			{
    				"title": "我是二级",
    				"icon": "",
    				"href": "",
    				"spread": true,
    				"children": [
    					{
    						"title": "我是三级",
    						"icon": " ",
    						"href": "https://cnbuilder.cn/"
    					},
    					{
    						"title": "我也是三级",
    						"icon": " ",
    						"href": "https://cnbuilder.cn/"
    					}
    				]
    			}
    		]
    	}
    ]

> java代码部分 1、用到了MyBatisPlus技术 2、用到了Lombok 所以代码量很少

controller：
    	/**
         * 1、根据用户id查询角色
         * 2、遍历角色查询资源
         * KingYiFan create By 2019/03/14
         * @return
         */
        @GetMapping("/menuInfo")
        @ResponseBody
        public Object menuInfo() {
            if (getShiroUser().getId() == null) {
                return "redirect:/login";
            }
    		//查询用户的菜单
            List<BsResource> bsResources = bsRoleService.selectMenuByUserId(getShiroUser().getId());
            //根据菜单封装需要的格式
    		List<BsResource> trees = TreeBuilder.bulid(bsResources);
            return trees;
        }

service接口
     @Override
        public List<BsResource> selectMenuByUserId(Long userId) {
    
            //根据用户id查询所有角色
            List<Long> roleIdList = bsTenantRoleMapper.selectRoleIdListByTenantId(userId);
            Set<String> urlSet = new HashSet<String>();
            //遍历全部角色
            for (Long roleId : roleIdList) {
                //根据角色获取当前资源
                List<Map<String, String>> resourceList = bsRoleMapper.selectResourceListByRoleId(roleId);
                for (Map<String, String> map : resourceList) {
                    urlSet.add(map.get("id"));
                }
            }
            //根据id查询菜单
            List<BsResource> bsResources = bsResourceMapper.selectBatchIds(urlSet);
            return bsResources;
        }

> 实体类

package cn.cnbuilder.entity;
    
    import com.baomidou.mybatisplus.annotations.TableField;
    import com.fasterxml.jackson.annotation.JsonFormat;
    import com.hcr.model.BaseEntity;
    import lombok.Data;
    import lombok.EqualsAndHashCode;
    import lombok.experimental.Accessors;
    
    import java.util.List;
    
    /**
     * <p>
     * 资源表 这个是全局的资源表
     * </p>
     *
     * @author KingYiFan
     * @since 2019-03-14
     */
    @Data
    @EqualsAndHashCode(callSuper = true)
    @Accessors(chain = true)
    public class BsResource {
    
        private static final long serialVersionUID = 1L;
    
        private Long id;
    
        @TableField(exist = false)
        private List<BsResource> children;
        /**
         * 资源名称
         */
        private String title;
    
        /**
         * 资源路径
         */
        private String href;
    
        /**
         * 资源介绍
         */
        private String description;
    
        /**
         * 资源图标
         */
        private String icon;
    
        /**
         * 父级资源id
         */
        @TableField(value = "p_id")
        private Integer pId;
    
        /**
         * 排序
         */
        private String seq;
    
        /**
         * 状态
         */
        private Integer status;
    
        /**
         * 打开状态
         */
        private Integer spread;
    
        /**
         * 资源类别
         */
        private Integer resourceType;
    }

> 工具类

package cn.cnbuilder.utils;
    
    import cn.cnbuilder.entity.BsResource;
    
    import java.util.List;
    
    
    import java.util.ArrayList;
    import java.util.List;
    
    /**
     * Created by KingYiFan on  2019/03/14.
     */
    public class TreeBuilder {
    
        /**
         * 两层循环实现建树
         *
         * @param BsResources 传入的树节点列表
         * @return
         */
        public static List<BsResource> bulid(List<BsResource> BsResources) {
    
            List<BsResource> trees = new ArrayList<BsResource>();
    
            for (BsResource BsResource : BsResources) {
    
                if (BsResource.getPId()==0) {
                    trees.add(BsResource);
                }
    
                for (BsResource it : BsResources) {
                    if (it.getPId() == BsResource.getId().intValue()) {
                        if (BsResource.getChildren() == null) {
                            BsResource.setChildren(new ArrayList<BsResource>());
                        }
                        BsResource.getChildren().add(it);
                    }
                }
            }
            return trees;
        }
    
        /**
         * 使用递归方法建树
         *
         * @param BsResources
         * @return
         */
        public static List<BsResource> buildByRecursive(List<BsResource> BsResources) {
            List<BsResource> trees = new ArrayList<BsResource>();
            for (BsResource BsResource : BsResources) {
                if ("0".equals(BsResource.getPId())) {
                    trees.add(findChildren(BsResource, BsResources));
                }
            }
            return trees;
        }
    
        /**
         * 递归查找子节点
         *
         * @param BsResources
         * @return
         */
        public static BsResource findChildren(BsResource BsResource, List<BsResource> BsResources) {
            for (BsResource it : BsResources) {
                if (BsResource.getId().equals(it.getPId())) {
                    if (BsResource.getChildren() == null) {
                        BsResource.setChildren(new ArrayList<BsResource>());
                    }
                    BsResource.getChildren().add(findChildren(it, BsResources));
                }
            }
            return BsResource;
        }
    
    
        public static void main(String[] args) {
            List<BsResource> list = new ArrayList<BsResource>();
            List<BsResource> trees = TreeBuilder.bulid(list);
            List<BsResource> trees_ = TreeBuilder.buildByRecursive(list);
    
        }
    }

--------------------

这就是layui动态三级菜单渲染。有什么不懂的可以跟我联系。

--------------------

鼓励作者写出更好的技术文档，就请我喝一瓶哇哈哈哈哈哈哈哈。。

微信：

[![E5_BE_AE_E4_BF_A1_E5_9B_BE_E7_89_87_20180718143757_meitu_220180718150018666.jpg][]][E5_BE_AE_E4_BF_A1_E5_9B_BE_E7_89_87_20180718143757_meitu_220180718150018666.jpg 1]

支付宝：

[![E5_BE_AE_E4_BF_A1_E6_88_AA_E5_9B_BE_2018071814381620180718143910635.png][]][E5_BE_AE_E4_BF_A1_E6_88_AA_E5_9B_BE_2018071814381620180718143910635.png 1]

--------------------

感谢一路支持我的人。。。。。
    
    Love me and hold me
    QQ:69673804（16年老号）
    EMAIL:69673804@qq.com
    友链交换
    如果有兴趣和本博客交换友链的话，请按照下面的格式在评论区进行评论，我会尽快添加上你的链接。

--------------------

网站名称：KingYiFan’S Blog
    网站地址：http://blog.cnbuilder.cn
    网站描述：年少是你未醒的梦话，风华是燃烬的彼岸花。
    网站Logo/头像： [头像地址](https://blog.cnbuilder.cn/upload/2018/7/avatar20180720144536200.jpg)

[Link 1]: https://blog.csdn.net/yufengaotian/article/details/81566148
[file]: https://cnbuilder.cn/upload/2019/2/image-155254474939020190314142548330.png
[file 1]: https://cnbuilder.cn/upload/2019/2/image-155254661891820190314145658713.png
[E5_BE_AE_E4_BF_A1_E5_9B_BE_E7_89_87_20180718143757_meitu_220180718150018666.jpg]: https://blog.cnbuilder.cn/upload/2018/7/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20180718143757_meitu_220180718150018666.jpg
[E5_BE_AE_E4_BF_A1_E5_9B_BE_E7_89_87_20180718143757_meitu_220180718150018666.jpg 1]: http://blog.cnbuilder.cn/upload/2018/7/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20180718143757_meitu_220180718150018666.jpg
[E5_BE_AE_E4_BF_A1_E6_88_AA_E5_9B_BE_2018071814381620180718143910635.png]: https://blog.cnbuilder.cn/upload/2018/7/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_2018071814381620180718143910635.png
[E5_BE_AE_E4_BF_A1_E6_88_AA_E5_9B_BE_2018071814381620180718143910635.png 1]: http://blog.cnbuilder.cn/upload/2018/7/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_2018071814381620180718143910635.png