1、简单的动态生成
/**
* 根据用户权限动态生成菜单
* @param data
*/
function setMenu(data) {
let ulHtml = '<ul class="layui-nav layui-nav-tree ">';
for (let i = 0; i < data.length; i++) {
ulHtml += '<li class="layui-nav-item">';
if (data[i].children !== undefined && data[i].children !== null && data[i].children.length > 0) {
ulHtml += '<a href="javascript:;" target="option">' + data[i].title;
ulHtml += '<span class="layui-nav-more"></span>';
ulHtml += '</a>';
ulHtml += '<dl class="layui-nav-child">';
//二级菜单
for (let j = 0; j < data[i].children.length; j++) {
//是否有孙子节点
if (data[i].children[j].children !== undefined && data[i].children[j].children !== null && data[i].children[j].children.length > 0) {
ulHtml += '<dd>';
ulHtml += '<a href="javascript:;" target="option">' + data[i].children[j].title;
ulHtml += '<span class="layui-nav-more"></span>';
ulHtml += '</a>';
//三级菜单
ulHtml += '<dl class="layui-nav-child">';
let grandsonNodes = data[i].children[j].children;
for (let k = 0; k < grandsonNodes.length; k++) {
ulHtml += '<dd>';
ulHtml += '<a href="' + grandsonNodes[k].href + '" target="option">' + grandsonNodes[k].title + '</a>';
ulHtml += '</dd>';
}
ulHtml += '</dl>';
ulHtml += '</dd>';
} else {
ulHtml += '<dd>';
ulHtml += '<a href="' + data[i].children[j].href + '" target="option">' + data[i].children[j].title;
ulHtml += '</a>';
ulHtml += '</dd>';
}
}
ulHtml += '</dl>';
}
ulHtml += '</li>';
}
ulHtml += '</ul>';
$('#nav-menu').html(ulHtml);
}
2、返回数据格式
[
{
"id":6,
"title":"用户管理",
"field":"menu:userManager",
"href":"#",
"children":[
{
"id":7,
"title":"用户列表",
"field":"menu:userList",
"href":"user/userList.html",
"children":[
]
},
{
"id":8,
"title":"角色列表",
"field":"menu:userRoleList",
"href":"role/roleList.html",
"children":[
]
}
]
}
]
