[layui]递归实现树型菜单

最新推荐文章于 2024-05-25 00:12:49 发布

iChangebaobao

最新推荐文章于 2024-05-25 00:12:49 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： LayUI

本文链接：https://blog.youkuaiyun.com/iChangebaobao/article/details/99286872

LayUI 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了一种使用Layui框架构建的后台管理系统模板，包括HTML结构、Vue.js的应用、菜单渲染及Tab页切换等功能实现。通过具体的代码示例，展示了如何整合Layui、Vue.js和jQuery等技术来搭建响应式、交互丰富的后台界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Layui后台模板

//html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title> 
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/xadmin.css">
</head>

<body>
    <div id="app">
        <!-- 顶部开始 -->
    <div class="container">
            <div class="logo"><a href="index.html">商城后台</a></div>
            <div class="left_open">
                <i title="展开左侧栏" class="iconfont">&#xe699;</i>
            </div>
            <ul class="layui-nav left fast-add" lay-filter="">
                <li class="layui-nav-item">
                    <a href="javascript:;">+新增</a>
                    <dl class="layui-nav-child">
                        <!-- 二级菜单 -->
                        <dd><a onclick="x_admin_show('资讯','http://www.baidu.com')"><i class="iconfont">&#xe6a2;</i>资讯</a>
                        </dd>
                        <dd><a onclick="x_admin_show('图片','http://www.baidu.com')"><i class="iconfont">&#xe6a8;</i>图片</a>
                        </dd>
                        <dd><a onclick="x_admin_show('用户','http://www.baidu.com')"><i class="iconfont">&#xe6b8;</i>用户</a>
                        </dd>
                    </dl>
                </li>
            </ul>
            <ul class="layui-nav right" lay-filter="">
                <li class="layui-nav-item">
                    <a href="javascript:;">admin</a>
                    <dl class="layui-nav-child">
                        <!-- 二级菜单 -->
                        <dd><a onclick="x_admin_show('个人信息','http://www.baidu.com')">个人信息</a></dd>
                        <dd><a onclick="x_admin_show('切换帐号','http://www.baidu.com')">切换帐号</a></dd>
                        <dd><a href="login.html">退出</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item to-index"><a href="#">前台首页</a></li>
            </ul>
    
        </div>

        <div class="left-nav">
            <div id="side-nav">
                
            </div>
        </div>

        <div class="page-content">
            <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
                <ul class="layui-tab-title">
                    <li class="home"><i class="layui-icon">&#xe68e;</i>我的桌面</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <iframe src='html/welcome.html' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
                    </div>
                </div>
            </div>
        </div>
        <div class="page-content-bg"></div>
            <div class="footer">
                <div class="copyright">Copyright ©2019 L-admin v2.3 All Rights Reserved</div>  
            </div> 
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
    <script src="js/vue-2.4.0.js"></script>
    <script src="lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/xadmin.js"></script>
    <script src="js/renderTree.js" type="text/javascript"></script>
    
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
                    
           },
           mounted: function () {
               console.log("mount之后");
           },
           updated: function () {
               console.log("更新之后");
           },
           methods:{}
        });
    </script>
</body>

</html>

//renderTree.js
$(function () {

    var data = [
        {
            menuName: '商品管理',
            icon: '&#xe6b8;',
            iconRight: '&#xe6a7;',
            childs: [
                {
                    menuName: '品牌管理',
                    menuUrl: 'html/brandList.html',
                    icon: '&#xe6a7;'
                },
                {
                    menuName: '商品列表',
                    menuUrl: 'html/ProductList.html',
                    icon: '&#xe6a7;'
                },
                {
                    menuName: '添加商品',
                    menuUrl: 'html/ProductAdd.html',
                    icon: '&#xe6a7;'
                },
                {
                    menuName: '商品分类',
                    // menuUrl: 'html/categoryList.html',
                    icon: '&#xe6a7;',
                    iconRight: '&#xe6a7;',
                    childs: [
                        {
                            menuName: '商品操作',
                            icon: '&#xe6a7;',
                            iconRight: '&#xe6a7;',
                            childs: [{
                                menuName: '商品操作',
                                menuUrl: 'html/ProductList.html',
                                icon: '&#xe6a7;'

                            }]
                        },
                        {
                            menuName: '商品操作',
                            // menuUrl: 'html/ProductList.html',
                            icon: '&#xe6a7;',
                            iconRight: '&#xe6a7;',
                            childs: [{
                                menuName: '商品操作',
                                menuUrl: 'html/ProductList.html',
                                icon: '&#xe6a7;'

                            }]
                        }
                    ]
                }

            ]

        },
        {
            menuName: '订单管理',
            icon: '&#xe6b8;',
            iconRight: '&#xe6a7;',
            childs: [
                {
                    menuName: '退货管理',
                    menuUrl: 'html/brandList.html',
                    icon: '&#xe6a7;'
                },
                {
                    menuName: '下单列表',
                    menuUrl: 'html/ProductList.html',
                    icon: '&#xe6a7;'
                },
                {
                    menuName: '换货管理',
                    menuUrl: 'html/ProductAdd.html',
                    icon: '&#xe6a7;'
                }

            ]

        }
    ]
 
    //触发事件
    var tab = {
        tabAdd: function (title, url, id) {
            //新增一个Tab项
            element.tabAdd('xbs_tab', {
                title: title
                , content: '<iframe tab-id="' + id + '" frameborder="0" src="' + url + '" scrolling="yes" class="x-iframe"></iframe>'
                , id: id
            })
        }
        , tabDelete: function (othis) {
            //删除指定Tab项
            element.tabDelete('xbs_tab', '44'); //删除：“商品管理”
 
            othis.addClass('layui-btn-disabled');
        }
        , tabChange: function (id) {
            //切换到指定Tab项
            element.tabChange('xbs_tab', id); //切换到：用户管理
        }
    };


    var html = '<ul id="nav">';
    var randerTree = function (d) {
        for (var i = 0; i < d.length; i++) {
            if (d[i].menuUrl == undefined || d[i].menuUrl.length < 0) {
                html += '<li><a href="javascript:;"><i class="iconfont">' + d[i].icon + '</i><cite>' + d[i].menuName + '</cite><i class="iconfont nav_right">' + d[i].iconRight + '</i></a><ul class="sub-menu">'
            } else {
                html += '<li><a _href="' + d[i].menuUrl + '"><i class="iconfont">' + d[i].icon + '</i><cite>' + d[i].menuName + '</cite></a></li>'
                if (i == d.length) {
                    html += '</ul>'
                }
            }
            if (d[i].childs != undefined) {
                randerTree(d[i].childs);
                html += '</ul>'
            }

        }

        return html;
    }
    var innerhtml = randerTree(data) + '</ul>';
 
    $('#side-nav').append(innerhtml);

    $('#nav li').click(function (event) {

        if ($(this).children('.sub-menu').length) {
            if ($(this).hasClass('open')) {
                $(this).removeClass('open');
                $(this).find('.nav_right').html('&#xe6a7;');
                $(this).children('.sub-menu').stop().slideUp();
                $(this).siblings().children('.sub-menu').slideUp();

            } else {
                $(this).addClass('open');
                $(this).children('a').find('.nav_right').html('&#xe6a6;');
                $(this).children('.sub-menu').stop().slideDown();
                $(this).siblings().children('.sub-menu').stop().slideUp();
                $(this).siblings().find('.nav_right').html('&#xe6a7;');
                $(this).siblings().removeClass('open');
            }
        } else {

            var url = $(this).children('a').attr('_href');
            var title = $(this).find('cite').html();
            var index = $('.left-nav #nav li').index($(this));

            for (var i = 0; i < $('.x-iframe').length; i++) {
                if ($('.x-iframe').eq(i).attr('tab-id') == index + 1) {
                    tab.tabChange(index + 1);
                    event.stopPropagation();
                    return;
                }
            }; 
            tab.tabAdd(title, url, index + 1);
            tab.tabChange(index + 1);
        } 
        event.stopPropagation(); 
    }) 
})