Layui 后台加载菜单栏名称以及url的例子-Java开发

为了在后台管理系统中实现菜单栏的功能，我们可以使用Layui框架提供的菜单组件lay-menu。它可以实现树型和直线型两种菜单，并且可以通过数据接口来动态加载菜单项。

为了在后台管理系统中实现菜单栏的功能，我们可以使用Layui框架提供的菜单组件lay-menu。它可以实现树型和直线型两种菜单，并且可以通过数据接口来动态加载菜单项。

首先，在HTML页面中创建一个页面主体，包含一个id为menuDemo的元素，用于渲染菜单：

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <!-- 头部内容 -->
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <div id="menuDemo"></div>
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <!-- 主体内容 -->
        </div>
        <div class="layui-footer">
            <!-- 底部内容 -->
        </div>
    </div>

    <!-- 引入layui框架 -->
    <script src="layui/layui.js"></script>
    <!-- 引入自定义js文件 -->
    <script src="js/main.js"></script>
</body>

其中，id为menuDemo的元素就是我们将要渲染菜单的位置。

然后，在我们的JS代码中，我们需要定义菜单项的数据格式，并通过ajax请求从后端获取菜单项的数据。假设我们的菜单项数据格式如下：

var menuData = [{
  "title": "首页",
  "icon": "fa-home",
  "spread": true,
  "children": [{
      "title": "控制台",
      "url": "console.html"
    },
    {
      "title": "表单",
      "url": "form.html"
    }
  ]
},
{
  "title": "系统管理",
  "icon": "fa-cogs",
  "spread": false,
  "children": [{
      "title": "用户管理",
      "url": "user.html"
    },
    {
      "title": "角色管理",
      "url": "role.html"
    }
  ]
}];

菜单项数据请求成功后，我们需要渲染该菜单项数据到页面上。以下是一个简单的数据渲染方法：

// 菜单项数据渲染方法
function renderMenu() {
    layui.use('element', function() {
        var element = layui.element;
        var $ = layui.jquery;
        var layer = layui.layer;

        // 清空原有菜单
        $("#menuDemo").empty();

        // 构建菜单
        layui.each(menuData, function(index, item) {
            var ulElem = $("<ul class='layui-nav-child'></ul>");
            layui.each(item.children, function(childIndex, childItem) {
                var aElem = $("<a></a>").attr("href", "#" + childItem.url).text(childItem.title);
                var liElem = $("<li></li>").append(aElem);
                ulElem.append(liElem);
            });

            var iElem = $("<i></i>").addClass("fa " + item.icon);
            var spanElem = $("<span></span>").text(item.title);
            var aElem = $("<a></a>").append(iElem).append(spanElem);
            var liElem = $("<li class='layui-nav-item'></li>").append(aElem).append(ulElem);

            if (item.spread) {
                liElem.addClass("layui-nav-itemed");
            }

            $("#menuDemo").append(liElem);
        });

        // 重新渲染菜单
        element.render("nav", "test");

        // 监听菜单点击事件
        element.on("nav(test)", function(elem) {
            var url = elem.attr("href").replace(/#/, "");
            addTab(elem.text(), url);
        });
    });
}

该方法的主要功能是，根据菜单项数据渲染出菜单，并监听菜单项的点击事件。当菜单项被点击时，该方法会调用一个addTab方法，用于在主体区域打开对应的页面。如下：

// 在主体区域打开页面
function addTab(title, url) {
    layui.use('element', function() {
        var element = layui.element;
        var $ = layui.jquery;

        var iframeElem = $("<iframe></iframe>").attr("src", url).attr("frameborder", "0").attr("class", "layui-iframe");
        var liElem = $("<li></li>").addClass("layui-this").append($("<a></a>").attr("href", "javascript:;").text(title));
        var tabElem = $(".layui-tab[lay-filter='mainTab']");

        if (tabElem.find("li[lay-id='" + url + "']").length == 0) {
            tabElem.find("li").removeClass("layui-this");
            tabElem.find(".layui-tab-item").removeClass("layui-show");

            tabElem.append(liElem);
            tabElem.siblings(".layui-tab-content").find(".layui-tab-item").removeClass("layui-show").append(iframeElem).attr("lay-id", url);
        } else {
            tabElem.find("li[lay-id='" + url + "']").addClass(".layui-this");
            tabElem.siblings(".layui-tab-content").find(".layui-tab-item").removeClass("layui-show");
            tabElem.siblings(".layui-tab-content").find(".layui-tab-item[lay-id='" + url + "']").addClass("layui-show");
        }

        element.render("tab", "mainTab");
    });
}

该方法的功能是，在主体区域按“选项卡”的形式打开对应的页面。

最后，我们需要在页面的$(document).ready()回调函数中调用renderMenu方法，渲染我们的菜单：

$(document).ready(function() {
    // 渲染菜单
    renderMenu();
});

至此，我们就成功实现了一个根据菜单项数据动态渲染后台管理系统菜单的功能。

下面是一个完整的实例：

完整HTML代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Layui 后台管理系统 | 加载菜单栏名称以及url的例子</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/main.css">
</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <!-- 头部内容 -->
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <div id="menuDemo"></div>
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <div class="layui-tab layui-tab-brief layui-tab-card" lay-filter="mainTab">
                <ul class="layui-tab-title">
                    <li class="layui-this"><a href="javascript:;">首页</a></li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <iframe src="console.html" frameborder="0" class="layui-iframe"></iframe>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-footer">
            <!-- 底部内容 -->
        </div>
    </div>

    <!-- 引入layui框架 -->
    <script src="layui/layui.js"></script>
    <!-- 引入自定义js文件 -->
    <script src="js/main.js"></script>
</body>

</html>

完整JS代码：

// 菜单项数据请求地址
var menuDataUrl = "data/menus.json";

// 页面初始化方法
$(document).ready(function() {
    // 渲染菜单
    renderMenu();

    // 加载菜单项数据
    loadMenuData();

    // 修改默认图标样式
    $("i.layui-icon").addClass("fa fa-fw");
});

// 加载菜单项数据
function loadMenuData() {
    $.ajax({
        type: "get",
        url: menuDataUrl,
        success: function(data) {
            menuData = data;
            renderMenu();
        },
        error: function() {
            layui.use('layer', function() {
                var layer = layui.layer;
                layer.alert("加载菜单数据失败！");
            });
        }
    });
}

// 菜单项数据渲染方法
function renderMenu() {
    layui.use('element', function() {
        var element = layui.element;
        var $ = layui.jquery;
        var layer = layui.layer;

        // 清空原有菜单
        $("#menuDemo").empty();

        // 构建菜单
        layui.each(menuData, function(index, item) {
            var ulElem = $("<ul class='layui-nav-child'></ul>");
            layui.each(item.children, function(childIndex, childItem) {
                var aElem = $("<a></a>").attr("href", "#" + childItem.url).text(childItem.title);
                var liElem = $("<li></li>").append(aElem);
                ulElem.append(liElem);
            });

            var iElem = $("<i></i>").addClass("fa " + item.icon);
            var spanElem = $("<span></span>").text(item.title);
            var aElem = $("<a></a>").append(iElem).append(spanElem);
            var liElem = $("<li class='layui-nav-item'></li>").append(aElem).append(ulElem);

            if (item.spread) {
                liElem.addClass("layui-nav-itemed");
            }

            $("#menuDemo").append(liElem);
        });

        // 重新渲染菜单
        element.render("nav", "test");

        // 监听菜单点击事件
        element.on("nav(test)", function(elem) {
            var url = elem.attr("href").replace(/#/, "");
            addTab(elem.text(), url);
        });
    });
}

// 在主体区域打开页面
function addTab(title, url) {
    layui.use('element', function() {
        var element = layui.element;
        var $ = layui.jquery;

        var iframeElem = $("<iframe></iframe>").attr("src", url).attr("frameborder", "0").attr("class", "layui-iframe");
        var liElem = $("<li></li>").addClass("layui-this").append($("<a></a>").attr("href", "javascript:;").text(title));
        var tabElem = $(".layui-tab[lay-filter='mainTab']");

        if (tabElem.find("li[lay-id='" + url + "']").length == 0) {
            tabElem.find("li").removeClass("layui-this");
            tabElem.find(".layui-tab-item").removeClass("layui-show");

            tabElem.append(liElem);
            tabElem.siblings(".layui-tab-content").find(".layui-tab-item").removeClass("layui-show").append(iframeElem).attr("lay-id", url);
        } else {
            tabElem.find("li[lay-id='" + url + "']").addClass(".layui-this");
            tabElem.siblings(".layui-tab-content").find(".layui-tab-item").removeClass("layui-show");
            tabElem.siblings(".layui-tab-content").find(".layui-tab-item[lay-id='" + url + "']").addClass("layui-show");
        }

        element.render("tab", "mainTab");
    });
}

然后，在menu.json文件中添加菜单数据：

[{
    "title": "首页",
    "icon": "fa-home",
    "spread": true,
    "children": [{
        "title": "控制台",
        "url": "console.html"
    }, {
        "title": "表单",
        "url": "form.html"
    }]
}, {
    "title": "系统管理",
    "icon": "fa-cogs",
    "spread": false,
    "children": [{
        "title": "用户管理",
        "url": "user.html"
    }, {
        "title": "角色管理",
        "url": "role.html"
    }]
}]

注意，我们还需要在页面中引入Font Awesome字体文件的CSS样式文件，以确保菜单项中的图标能够正常渲染出来。

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css">

以上就是使用Layui框架实现后台管理系统中加载菜单栏名称以及url的例子的攻略。

基础教程推荐