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

coldplay.xixi
Lepaskan: 2020-06-13 13:02:31
ke hadapan
8989 orang telah melayarinya

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

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

使用模板方式加载菜单

lay-url=“菜单接口”

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

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

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

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

Salin selepas log masuk

后台返回的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" }] }
Salin selepas log masuk

效果图:

b3943fb6a3c04ec317b76bd574af14f.png

推荐教程:《layui框架教程

Atas ialah kandungan terperinci 详解layuiAdmin单页版根据后台json数据动态生成左侧菜单栏. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:liqingbo.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!