layui做折线图_详解layuiAdmin单页版根据后台json数据动态生成左侧菜单栏

layuiAdmin单页版根据后台

使用模板方式加载菜单

lay-url=“菜单接口”

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

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

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

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

{ {#

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;

}}

{ { item.title }}

{ {# if(hasChildren){ }}

{ {# 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('/');

}}

{ { item2.title }}

{ {# if(hasChildren2){ }}

{ {# 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('/')

}}

{ { item3.title }}

{ {# }); }}

{ {# } }}

{ {# }); }}

{ {# } }}

{ {# }); }}

后台返回的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"

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值