0
点赞
收藏
分享

微信扫一扫

layuiAdmin动态生成菜单并递归显示

infgrad 2024-01-29 阅读 10


先给出菜单请求回来的json格式:

除去外面的code和msg外,data内容是一个[]数组;每个数组里面是一个对象;有4个参数,一个标题(title),一个图标(icon),一个请求地址(url),最后还可能有个子集(list)。

{
  "code": 0,
  "msg": "",
  "data": [{
    "title": "一级滑块组件",
    "icon": "layui-icon-auz",
    "url": "component/slider/index.html"
  },{
    "title": "二级",
    "icon": "layui-icon-home",
    "list": [{
      "title": "评分",
      "icon": "layui-icon-app",
      "url": "component/rate/index.html"
    }, {
      "title": "轮播",
      "icon": "layui-icon-console",
      "url": "component/carousel/index.html"
    }]
  },{
    "title": "三级",
    "icon": "layui-icon-home",
    "list": [{
      "title": "三级3",
      "icon": "layui-icon-home",
      "url": "component/colorpicker/index.html",
      "list":[{
        "title":"流加载",
        "icon": "layui-icon-tips",
        "url":"component/flow/index.html"
      },{
        "title":"工具",
        "icon": "layui-icon-print",
        "url":"component/util/index.html"
      }]
    },{
      "title": "代码修饰",
      "icon": "layui-icon-note",
      "url": "component/code/index.html"
    },{
      "title": "百度",
      "icon": "layui-icon-note",
      "url": "https://www.baidu.com"
    },{
      "title": "网易",
      "icon": "layui-icon-note",
      "url": "https://www.163.com"
    }]
  }]
}


index.html页面中,我保留了第一个菜单

layuiAdmin动态生成菜单并递归显示_ico


在index.html后面的js脚本中


  <script src="../res/layui/layui.js"></script>
  <script>
  layui.config({
    base: '../res/' // 静态资源所在路径
  }).use(['index'],function () {
    let $ = layui.$;
    let layer = layui.layer;
    let element = layui.element;
    
    $.ajax({
      url: "/json/a.json",
      type: "GET",
      dataType: "json",
      success: function (res) {
        layer.alert(JSON.stringify(res));
        console.log("res:" + JSON.stringify(res));
        let lists = res.data;
        //先添加所有的主材单
        $.each(res.data, function(i, obj) {
          console.log(obj);
          let content='<li class="layui-nav-item" data-name='+obj.action+'>';
          //判断是否存在下一级栏目,存在就不跳转,不存在就跳转
          if (obj.list == undefined) {
            content+='<a lay-href="' + obj.url+ '"><i class="layui-icon '+obj.icon+'"></i><cite>'+obj.title+'</cite></a>';
          } else {
            content+='<a href="javascript:;"><i class="layui-icon '+obj.icon+'"></i><cite>'+obj.title+'</cite></a>';
          }
          //这里是添加所有的子菜单
          content+=loadchild(obj);
          content+='</li>';
          $(".layui-nav-tree").append(content);
        });
        element.init();
      },
      error: function (jqXHR) {
        alert("请求菜单失败,发生错误:"+ jqXHR.status);
        layer.alert(JSON.stringify("请求菜单失败"));
      }
    });


    function loadchild(obj) {
      if(obj==null){
        return;
      }
      let content='';
      if(obj.list!=null && obj.list.length>0){
        content+='<dl class="layui-nav-child">';
      }else{
        content+='<dl>';
      }

      if(obj.list!=null && obj.list.length>0){
        $.each(obj.list,function(i,note) {
          content += '<dd>';
          // content += '<a lay-href="' + note.url + '">' + note.title + '</a>';
          if (note.list == undefined) {
            content+='<a lay-href="' + note.url+ '"><i class="layui-icon '+note.icon+'"></i><cite>'+note.title+'</cite></a>';
          } else {
            content+='<a href="javascript:;"><i class="layui-icon '+note.icon+'"></i><cite>'+note.title+'</cite></a>';
          }
          if (note.list == null) {
            return;
          }
          content += loadchild(note);
          content += '</dd>';
        });
        content+='</dl>';
      }
      return content;
    }




  });
  </script>


效果如下:

layuiAdmin动态生成菜单并递归显示_ci_02

layuiAdmin动态生成菜单并递归显示_ci_03


附带代码解释:

打开index.html

ajax请求菜单json,返回数据;

在ajax请求里面第一次对返回json菜单进行解析处理,你们内部有个loadchild()函数对对子菜单等进行处理,这里直接进行了递归;



举报

相关推荐

0 条评论