星空2020 2023-10-20 19:43 采纳率: 64.1%
浏览 3
已结题

ajax获取json菜单数据并利用layui渲染为左侧垂直菜单的方法

如下ajax获取的json菜单数据，如何利用layui渲染为左侧垂直菜单？
demo_menu.php

{
  "code": 200,
  "data": [
    {
      "title": "主页",
      "icon": "layui-icon-home",
      "list": [
        {
        "title": "主页",
        "icon": "layui-icon-home",
        "href": "home/home.html"
        }
      ]
    },
    {
      "title": "系统管理",
      "icon": "layui-icon-senior",
      "list": [
        {
          "title": "部门管理",
          "href": "systemManage/branch.html"
        },
        {
          "title": "用户管理",
          "href": "systemManage/user.html",
          "list":[
              {
                "title": "用户管理1",
                  "href": "systemManage/user1.html",
            }
          ]
        }
       ]
    }
  }

前台body


```html
<!doctype html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
        <script type="text/javascript" src="./js/jquery.min.js"></script>
              
    </script>
    </head>
    <body>
    
        <!-- top start -->
        <div class="container">
            <div class="left_open">
                <a><i title="展开左侧栏" class="iconfont">&#xe699;</i></a>                
            </div>            
          <ul class="layui-nav right" lay-filter="">
                <li class="layui-nav-item">
                    <a href="javascript:;"><?php echo $aa ?></a>
                        <dd>
                            <a onclick="xadmin.open('个人信息','./user',350,400)">个人信息</a></dd>
                        <dd class="close-all" data-type="closeall">
                           <a href="exit" onclick="return confirm('确定退出吗？');">退出</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <!-- top end -->

        <div class="left-nav">
            <div id="side-nav">
                <ul id="menu">
                    //如何将json菜单数据渲染在此处？？？？

                </ul>
            </div>
        </div>
    
        <!-- right start -->
        <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-unselect layui-form-select layui-form-selected" id="tab_right">
                    <dl>
                        <dd data-type="this">关闭当前</dd>
                        <dd data-type="other">关闭其它</dd>
                        <dd data-type="all">关闭全部</dd></dl>
                </div>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <iframe src='./welcome.php' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
                    </div>
                </div>
                <div id="tab_show"></div>
            </div>
        </div>
        <div class="page-content-bg"></div>
        <style id="theme_style"></style>
        <!-- right end -->
</body>
</html>




![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/005803208796147.png "#left")
  • 写回答

1条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-10-20 22:39
    关注

    【以下回答由 GPT 生成】

    对于这个问题，可以使用以下步骤来实现通过ajax获取的json菜单数据，并利用layui渲染为左侧垂直菜单。

    1. 在前台代码示例中引入jQuery库，以便使用ajax功能。
    <!doctype html>
<html class="x-admin-sm">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <!-- 这里是你的页面内容 -->
  </body>
</html>
    1. 在页面加载完成后，使用ajax来获取json菜单数据，并在成功回调函数中进行渲染。
    <script>
$(function() {
  $.ajax({
    url: 'your-url',  // 替换成获取json数据的接口地址
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      // 渲染菜单
      renderMenu(data);
    },
    error: function() {
      console.log('获取菜单数据失败');
    }
  });
});

function renderMenu(data) {
  // 使用layui的tree组件渲染菜单
  layui.use(['element', 'tree'], function() {
    var element = layui.element;
    var tree = layui.tree;

    // 渲染左侧垂直菜单的容器
    var navElem = $('.x-side-left');

    // 渲染菜单
    tree.render({
      elem: navElem,
      data: data.data,
      onlyIconControl: true,
      click: function(obj) {
        // 点击菜单触发的回调函数
        console.log(obj.data);  // 这里可以根据需要进行相关操作
      }
    });

    // 渲染layui组件
    element.init();
  });
}
</script>

    需要注意的是，上述代码中的your-url需要替换成你自己获取json数据的接口地址。

    同时，如果需要在点击菜单时进行相关操作，可以在click回调函数中添加相应的代码。

    以上就是通过ajax获取的json菜单数据，并利用layui渲染为左侧垂直菜单的具体解决方案。如果还有其他问题，请随时提问。



    【相关推荐】



    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

  • layui自定义ajax左侧三级菜单
    2020-10-16 15:40
    通过上述知识点的介绍，我们可以了解到如何通过layui框架实现左侧三级菜单的动态渲染，并通过Ajax获取数据。同时，也介绍了如何利用layui的tab组件来实现右侧内容区域的可切换页面效果。这些技术对于构建动态Web界面...
  • layui无限级导航菜单.zip
    2020-04-12 15:40
    layui提供异步加载功能，可以使用Ajax请求获取JSON格式的菜单数据，然后使用`layui.nav`的`render`方法渲染到页面上，实现无限级展开。 5. 动态加载： 当用户点击某个菜单项时，layui可以动态加载对应的内容区，这...
  • 【前端】layui前端框架学习笔记
    2024-03-27 20:39
    骑鱼过海的猫123的博客 官网：http://layui.apixx.net/index.html国人16年开发的框架,拿来即用,门槛低。
  • LayUI_03 前端框架 内置模块
    2022-07-12 22:28
    £轻描～淡写°的博客 目录一、弹层组件文档 - layui.layer作为独立组件使用 layercode在 layui 中使用 layercode二、日期和时间组件文档 - layui.laydate在 layui 模块中使用code作为独立组件使用code三、分页模块文档 - layui.laypage在...
  • 后端程序员的前端捷径-超级容易上手使用的前端框架layUI
    2023-03-30 22:00
    yinying293的博客 后端程序员的前端捷径-超级容易上手使用的前端框架layUI--超级无敌好用的轻量级前端框架
  • LayUI
    2023-01-31 08:59
    做梦追仙的博客 LayUI
  • 第六章：初始化后台首页左侧导航菜单nav，增加权限控制
    2022-01-09 22:23
    韩锟的博客 第一章：后台管理系统 功能 ...用户登录后根据用户的主键id再利用mysql递归查询（根据用户挂接的角色去查询角色挂接的根菜单id，再根据根菜单id递归查询子菜单） 由于MySQL没有自己的递归函数，因此需要自己编写递归函
  • LayUI之CRUD
    2022-07-20 23:12
    xxie编程的博客 ②数据库访问层(Dao方法) UserDao.java 测试类UserDaoTest.java 结果 查询全部 增加 修改 删除 UserAction.java 二、前端搭建 ①html界面代码 main.jsp 界面效果 userEdit.jsp userManage.jsp 界面效果 userEdit...
  • 前端框架LayUI
    2023-02-15 11:55
    qq_39756007的博客 Bootstrap让前端开发更快速、...传统开发模式的问题在前后端分离的开发模式中，后端仅返回前端所需的数据，前端负责渲染HTML页面，后端不再控制前端的效果，从后端请求的数据如何加载到前端中，都由前端自己决定，后
  • Layui常用功能整理
    2021-08-23 21:06
    Binary Oracle的博客 1 ~ 30 px列偏移---范围超过30px，建议使用列偏移列嵌套---列之间可以无限嵌套列按钮基本用法流体按钮(最大化铺满当前容器或者页面)图标按钮图标目前设置有两种方式导航参数解释垂直和侧边导航图片和徽章支持layui ...
  • 没有解决我的问题, 去提问

问题事件

  • 已结题 （查看结题原因） 10月23日
  • 已采纳回答 10月23日
  • 修改了问题 10月20日
  • 创建了问题 10月20日