Detailed explanation of how layuiAdmin single-page version dynamically generates the left menu bar based on background json data

layuiAdmin single-page version dynamically generates the left menu bar based on background json data

Use template method to load menu

lay-url=“Menu interface”

lay-headers=“Put token into the request header”, if not, just remove it

Use console.log in the template Example: {{# console.log(1) }}

layui.data('layuiAdmin').token calls the locally stored token, and the token name needs to correspond to the local storage

json field The name does not need to be the same as here. If the json field name changes, the template must be modified accordingly

<div class="layui-side layui-side-menu">
  <div class="layui-side-scroll">
    <script type="text/html" template lay-url="https://easy-mock.com/mock/5c131015dada7b27ac3a5c36/titi/treemenu"
      lay-headers="{&#39;x-auth-token&#39;: layui.data(&#39;layuiAdmin&#39;).token}"
      lay-done="layui.element.render(&#39;nav&#39;, &#39;layadmin-system-side-menu&#39;);" id="TPL_layout">
      <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu"
        lay-filter="layadmin-system-side-menu">
        {{# 
          var path =  layui.router().path
          ,dataName = layui.setter.response.dataName;
           
          layui.each(d[dataName], function(index, item){ 
            var hasChildren = typeof item.list === &#39;object&#39; && item.list.length > 0
            ,classSelected = function(){
              if(index == 0){
                return hasChildren ? &#39;layui-nav-itemed&#39; : &#39;layui-this&#39;;
              }
              return &#39;&#39;;
            }
            ,url = typeof item.href === &#39;string&#39; ? item.href : item.name;
        }}
        <li data-name="{{ item.name || &#39;&#39; }}" data-jump="{{ item.href || &#39;&#39; }}"
          class="layui-nav-item {{ classSelected() }}">
          <a href="javascript:;" {{ hasChildren ? &#39;&#39; : &#39;lay-href="&#39;+ url +&#39;"&#39; }} lay-tips="{{ item.title }}"
            lay-direction="2">
            <i class="layui-icon {{ item.icon }}"></i>
            <cite>{{ item.title }}</cite>
          </a>
          {{# if(hasChildren){ }}
          <dl class="layui-nav-child">
            {{# layui.each(item.list, function(index2, item2){ 
              var hasChildren2 = typeof item2.list == &#39;object&#39; && item2.list.length > 0
              ,classSelected2 = function(){
                if(index==0){
                  return hasChildren2 ? &#39;layui-nav-itemed&#39; : &#39;layui-this&#39;;
                }
                return &#39;&#39;;
              }
              ,url2 = typeof item2.href === &#39;string&#39; 
                ? item2.href 
              : [item.name, item2.name, &#39;&#39;].join(&#39;/&#39;);
            }}
            <dd data-name="{{ item2.name || &#39;&#39; }}" data-jump="{{ item2.href || &#39;&#39; }}"
              {{ classSelected2() ? (&#39;class="&#39;+ classSelected2() +&#39;"&#39;) : &#39;&#39; }}>
              <a href="javascript:;" {{ hasChildren2 ? &#39;&#39; : &#39;lay-href="&#39;+ url2 +&#39;"&#39; }}>{{ item2.title }}</a>
              {{# if(hasChildren2){ }}
              <dl class="layui-nav-child">
                {{# layui.each(item2.list, function(index3, item3){ 
                      var match = path[0] == item.name && path[1] == item2.name && path[2] == item3.name
                      ,url3 = typeof item3.href === &#39;string&#39; 
                        ? item3.href 
                      : [item.name, item2.name, item3.name].join(&#39;/&#39;)
                    }}
                <dd data-name="{{ item3.name || &#39;&#39; }}" data-jump="{{ item3.href || &#39;&#39; }}"
                  {{ match ? &#39;class="layui-this"&#39; : &#39;&#39; }}>
                  <a href="javascript:;" lay-href="{{ url3 }}">{{ item3.title }}</a>
                </dd>
                {{# }); }}
              </dl>
              {{# } }}
            </dd>
            {{# }); }}
          </dl>
          {{# } }}
        </li>
        {{# }); }}
      </ul>
    </script>
  </div>
</div>

Json format returned by the background (example)

{
  "code": 0
  ,"msg": ""
  ,"data": [{
    "title": "主页"
    ,"icon": "layui-icon-home"
    ,"list": [{
      "title": "控制台"
      ,"jump": "/"
    }, {
      "name": "homepage1"
      ,"title": "主页一"
      ,"jump": "home/homepage1"
    }, {
      "name": "homepage2"
      ,"title": "主页二"
      ,"jump": "home/homepage2"
    }]
  }, {
    "name": "component"
    ,"title": "组件"
    ,"icon": "layui-icon-component"
    ,"list": [{
      "name": "grid"
      ,"title": "栅格"
      ,"list": [{
        "name": "list"
        ,"title": "等比例列表排列"
      },{
        "name": "mobile"
        ,"title": "按移动端排列"
      },{
        "name": "mobile-pc"
        ,"title": "移动桌面端组合"
      },{
        "name": "all"
        ,"title": "全端复杂组合"
      },{
        "name": "stack"
        ,"title": "低于桌面堆叠排列"
      },{
        "name": "speed-dial"
        ,"title": "九宫格"
      }]
    }, {
      "name": "button"
      ,"title": "按钮"
    }, {
      "name": "form"
      ,"title": "表单"
      ,"list": [{
        "name": "element"
        ,"title": "表单元素"
      },{
        "name": "group"
        ,"title": "表单组合"
      }]
    }, {
      "name": "nav"
      ,"title": "导航"
    }, {
      "name": "tabs"
      ,"title": "选项卡"
    }, {
      "name": "progress"
      ,"title": "进度条"
    }, {
      "name": "panel"
      ,"title": "面板"
    }, {
      "name": "badge"
      ,"title": "徽章"
    }, {
      "name": "timeline"
      ,"title": "时间线"
    }, {
      "name": "anim"
      ,"title": "动画"
    }, {
      "name": "auxiliar"
      ,"title": "辅助"
    }, {
      "name": "layer"
      ,"title": "通用弹层"
      ,"list": [{
        "name": "list"
        ,"title": "功能演示"
      },{
        "name": "special-demo"
        ,"title": "特殊示例"
      },{
        "name": "theme"
        ,"title": "风格定制"
      }]
    }, {
      "name": "laydate"
      ,"title": "日期时间"
      ,"list": [{
        "name": "demo1"
        ,"title": "功能演示一"
      },{
        "name": "demo2"
        ,"title": "功能演示二"
      },{
        "name": "theme"
        ,"title": "设定主题"
      },{
        "name": "special-demo"
        ,"title": "特殊示例"
      }]
    }, {
      "name": "table"
      ,"title": "表格"
      ,"list": [{
        "name": "simple"
        ,"title": "简单数据表格"
      },{
        "name": "auto"
        ,"title": "列宽自动分配"
      },{
        "name": "data"
        ,"title": "赋值已知数据"
      },{
        "name": "tostatic"
        ,"title": "转化静态表格"
      },{
        "name": "page"
        ,"title": "开启分页"
      },{
        "name": "resetPage"
        ,"title": "自定义分页"
      },{
        "name": "toolbar"
        ,"title": "开启头部工具栏"
      },{
        "name": "totalRow"
        ,"title": "开启合计行"
      },{
        "name": "height"
        ,"title": "高度最大适应"
      },{
        "name": "checkbox"
        ,"title": "开启复选框"
      },{
        "name": "radio"
        ,"title": "开启单选框"
      },{
        "name": "cellEdit"
        ,"title": "开启单元格编辑"
      },{
        "name": "form"
        ,"title": "加入表单元素"
      },{
        "name": "style"
        ,"title": "设置单元格样式"
      },{
        "name": "fixed"
        ,"title": "固定列"
      },{
        "name": "operate"
        ,"title": "数据操作"
      },{
        "name": "parseData"
        ,"title": "解析任意数据格式"
      },{
        "name": "onrow"
        ,"title": "监听行事件"
      },{
        "name": "reload"
        ,"title": "数据表格的重载"
      },{
        "name": "initSort"
        ,"title": "设置初始排序"
      },{
        "name": "cellEvent"
        ,"title": "监听单元格事件"
      },{
        "name": "thead"
        ,"title": "复杂表头"
      }]
    }, {
      "name": "laypage"
      ,"title": "分页"
      ,"list": [{
        "name": "demo1"
        ,"title": "功能演示一"
      },{
        "name": "demo2"
        ,"title": "功能演示二"
      }]
    }, {
      "name": "upload"
      ,"title": "上传"
      ,"list": [{
        "name": "demo1"
        ,"title": "功能演示一"
      },{
        "name": "demo2"
        ,"title": "功能演示二"
      }]
    }, {
      "name": "colorpicker"
      ,"title": "颜色选择器"
    }, {
      "name": "slider"
      ,"title": "滑块组件"
    }, {
      "name": "rate"
      ,"title": "评分"
    }, {
      "name": "carousel"
      ,"title": "轮播"
    }, {
      "name": "flow"
      ,"title": "流加载"
    }, {
      "name": "util"
      ,"title": "工具"
    }, {
      "name": "code"
      ,"title": "代码修饰"
    }, {
      "name": "layim"
      ,"title": "即时聊天"
      ,"jump": "senior/im/"
    }]
  }, {
    "name": "template"
    ,"title": "页面"
    ,"icon": "layui-icon-template"
    ,"list": [{
      "name": "personalpage"
      ,"title": "个人主页"
      ,"jump": "template/personalpage"
    },{
      "name": "addresslist"
      ,"title": "通讯录"
      ,"jump": "template/addresslist"
    },{
      "name": "caller"
      ,"title": "客户列表"
      ,"jump": "template/caller"
    },{
      "name": "goodslist"
      ,"title": "商品列表"
      ,"jump": "template/goodslist"
    },{
      "name": "msgboard"
      ,"title": "留言板"
      ,"jump": "template/msgboard"
    },{
      "name": "search"
      ,"title": "搜索结果"
      ,"jump": "template/search"
    },{
      "name": "reg"
      ,"title": "注册"
      ,"jump": "user/reg"
    },{
      "name": "login"
      ,"title": "登入"
      ,"jump": "user/login"
    },{
      "name": "forget"
      ,"title": "忘记密码"
      ,"jump": "user/forget"
    },{
      "name": "404"
      ,"title": "404"
      ,"jump": "template/tips/404"
    },{
      "name": "error"
      ,"title": "错误提示"
      ,"jump": "template/tips/error"
    }, {
      "name": ""
      ,"title": "内嵌页面"
      ,"spread": true
      ,"list": [{
        "name": ""
        ,"title": "百度一下"
        ,"jump": "/iframe/link/baidu"
      }, {
        "name": ""
        ,"title": "layui官网"
        ,"jump": "/iframe/link/layui"
      }, {
        "name": ""
        ,"title": "layuiAdmin官网"
        ,"jump": "/iframe/link/layuiAdmin"
      }]
    }]
  }, {
    "name": "app"
    ,"title": "应用"
    ,"icon": "layui-icon-app"
    ,"list": [{
      "name": "content"
      ,"title": "内容系统"
      ,"list": [{
        "name": "list"
        ,"title": "文章列表"
      },{
        "name": "tags"
        ,"title": "分类管理"
      },{
        "name": "comment"
        ,"title": "评论管理"
      }]
    },{
      "name": "forum"
      ,"title": "社区系统"
      ,"list": [{
        "name": "list"
        ,"title": "帖子列表"
      },{
        "name": "replys"
        ,"title": "回帖列表"
      }]
    },{
      "name": "message"
      ,"title": "消息中心"
    },{
      "name": "workorder"
      ,"title": "工单系统"
      ,"jump": "app/workorder/list"
    }]
  }, {
    "name": "senior"
    ,"title": "高级"
    ,"icon": "layui-icon-senior"
    ,"list": [{
      "name": "im"
      ,"title": "通讯系统"
    },{
      "name": "echarts"
      ,"title": "Echarts集成"
      ,"list": [{
        "name": "line"
        ,"title": "折线图"
      },{
        "name": "bar"
        ,"title": "柱状图"
      },{
        "name": "map"
        ,"title": "地图"
      }]
    }]
  }, {
    "name": "user"
    ,"title": "用户"
    ,"icon": "layui-icon-user"
    ,"list": [{
      "name": "user"
      ,"title": "网站用户"
      ,"jump": "user/user/list"
    }, {
      "name": "administrators-list"
      ,"title": "后台管理员"
      ,"jump": "user/administrators/list"
    }, {
      "name": "administrators-rule"
      ,"title": "角色管理"
      ,"jump": "user/administrators/role"
    }]
  }, {
    "name": "set"
    ,"title": "设置"
    ,"icon": "layui-icon-set"
    ,"list": [{
      "name": "system"
      ,"title": "系统设置"
      ,"spread": true
      ,"list": [{
        "name": "website"
        ,"title": "网站设置"
      },{
        "name": "email"
        ,"title": "邮件服务"
      }]
    },{
      "name": "user"
      ,"title": "我的设置"
      ,"spread": true
      ,"list": [{
        "name": "info"
        ,"title": "基本资料"
      },{
        "name": "password"
        ,"title": "修改密码"
      }]
    }]
  }, {
    "name": "get"
    ,"title": "授权"
    ,"icon": "layui-icon-auz"
    ,"jump": "system/get"
  }]
}

Rendering:

Recommended tutorial: "layui framework tutorial"

The above is the detailed content of Detailed explanation of how layuiAdmin single-page version dynamically generates the left menu bar based on background json data. For more information, please follow other related articles on the PHP Chinese website!