星空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渲染为左侧垂直菜单的具体解决方案。如果还有其他问题，请随时提问。



    【相关推荐】



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

报告相同问题？

问题事件

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

悬赏问题

  • ¥200 csgo2的viewmatrix值是否还有别的获取方式
  • ¥15 Stable Diffusion，用Ebsynth utility在视频选帧图重绘，第一步报错，蒙版和帧图没法生成，怎么处理啊
  • ¥15 请把下列每一行代码完整地读懂并注释出来
  • ¥15 pycharm运行main文件，显示没有conda环境
  • ¥15 易优eyoucms关于二级栏目调用的问题
  • ¥15 寻找公式识别开发，自动识别整页文档、图像公式的软件
  • ¥15 为什么eclipse不能再下载了？
  • ¥15 编辑cmake lists 明明写了project项目名，但是还是报错怎么回事
  • ¥15 关于#计算机视觉#的问题：求一份高质量桥梁多病害数据集
  • ¥15 特定网页无法访问，已排除网页问题