详解layuiAdmin单页版根据后台json数据动态生成左侧菜单栏
2022-11-27 21:09:48
215
{{single.collect_count}}

前端(vue)入门到精通课程,老师在线辅导:联系老师
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用

layuiAdmin单页版根据后台json数据动态生成左侧菜单栏

使用模板方式加载菜单

lay-url=“菜单接口”

lay-headers=“将token带入请求头”,如果没有,去掉就行

在模板中使用console.log 示例: {{# console.log(1) }}

layui.data(‘layuiAdmin’).token 调用本地存储的token,token名需要和本地存储对应

json字段名不需要和这里的一样,json字段名改变,模板里面也要相应的修改

<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="{'x-auth-token': layui.data('layuiAdmin').token}"lay-done="layui.element.render('nav', 'layadmin-system-side-menu');" 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 === 'object' && item.list.length > 0,classSelected = function(){if(index == 0){return hasChildren ? 'layui-nav-itemed' : 'layui-this';}return '';},url = typeof item.href === 'string' ? item.href : item.name;}}<li data-name="{{ item.name || '' }}" data-jump="{{ item.href || '' }}"class="layui-nav-item {{ classSelected() }}"><a href="javascript:;" {{ hasChildren ? '' : 'lay-href="'+ url +'"' }} 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 == 'object' && item2.list.length > 0,classSelected2 = function(){if(index==0){return hasChildren2 ? 'layui-nav-itemed' : 'layui-this';}return '';},url2 = typeof item2.href === 'string' ? item2.href : [item.name, item2.name, ''].join('/');}}<dd data-name="{{ item2.name || '' }}" data-jump="{{ item2.href || '' }}"{{ classSelected2() ? ('class="'+ classSelected2() +'"') : '' }}><a href="javascript:;" {{ hasChildren2 ? '' : 'lay-href="'+ url2 +'"' }}>{{ 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 === 'string' ? item3.href : [item.name, item2.name, item3.name].join('/')}}<dd data-name="{{ item3.name || '' }}" data-jump="{{ item3.href || '' }}"{{ match ? 'class="layui-this"' : '' }}><a href="javascript:;" lay-href="{{ url3 }}">{{ item3.title }}</a></dd>{{# }); }}</dl>{{# } }}</dd>{{# }); }}</dl>{{# } }}</li>{{# }); }}</ul></script></div></div>
登录后复制

后台返回的json格式(示例)

{"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"}]}
登录后复制

效果图:

b3943fb6a3c04ec317b76bd574af14f.png

推荐教程:《layui框架教程

以上就是详解layuiAdmin单页版根据后台json数据动态生成左侧菜单栏的详细内容,更多请关注php中文网其它相关文章!

回帖
全部回帖({{commentCount}})
{{item.user.nickname}} {{item.user.group_title}} {{item.friend_time}}
{{item.content}}
{{item.comment_content_show ? '取消' : '回复'}} 删除
回帖
{{reply.user.nickname}} {{reply.user.group_title}} {{reply.friend_time}}
{{reply.content}}
{{reply.comment_content_show ? '取消' : '回复'}} 删除
回帖
收起
没有更多啦~
{{commentLoading ? '加载中...' : '查看更多评论'}}