网站首页 文章专栏 layui动态无限极菜单
layui动态无限极菜单
编辑时间:2019-01-17 11:01:08 作者:田泽 浏览量:1470

ajax异步获取数据,父子级关系正常可实现无限极菜单

效果图:

初始数据:

[
{
"yhmId": "12345678",
"yhmPid": "d4ad8e91-e47e-4c06-81d1-37af6543d7b2",
"yhmName": "用户列表1",
"yhmIconfont": null,
"yhmUrl": "asd"
},
{
"yhmId": "4811cc51-c606-4894-8a78-7a1b092903cb",
"yhmPid": "ff8434bc-84d6-44be-9ba9-1eebe556fcdc",
"yhmName": "菜单列表",
"yhmIconfont": null,
"yhmUrl": "/skipMenuList"
},
{
"yhmId": "d4ad8e91-e47e-4c06-81d1-37af6543d7b2",
"yhmPid": "17339340-6964-432b-aa6d-0bdb96b150db",
"yhmName": "用户列表",
"yhmIconfont": null,
"yhmUrl": "/skipUserList"
},
{
"yhmId": "17339340-6964-432b-aa6d-0bdb96b150db",
"yhmPid": "1",
"yhmName": "用户管理",
"yhmIconfont": "",
"yhmUrl": "javascript:;"
},
{
"yhmId": "ff8434bc-84d6-44be-9ba9-1eebe556fcdc",
"yhmPid": "1",
"yhmName": "菜单管理",
"yhmIconfont": "",
"yhmUrl": "javascript:;"
}
]

需要先转换为json树形菜单格式

转换函数:

参考文章:https://blog.csdn.net/chelen_jak/article/details/21290769

//生成树状json格式
function transData(a, idStr, pidStr, chindrenStr){
var r = [], hash = {}, id = idStr, pid = pidStr, children = chindrenStr,
i = 0, j = 0, len = a.length;
for(; i < len; i++){
hash[a[i][id]] = a[i];
}
for(; j < len; j++){
var aVal = a[j], hashVP = hash[aVal[pid]];
if(hashVP){
!hashVP[children] && (hashVP[children] = []);
hashVP[children].push(aVal);
}else{
r.push(aVal);
}
}
return r;
}

转换后数据格式:

[
{
"yhmId": "17339340-6964-432b-aa6d-0bdb96b150db",
"yhmPid": "1",
"yhmName": "用户管理",
"yhmIconfont": "",
"yhmUrl": "javascript:;",
"childMenus": [
{
"yhmId": "d4ad8e91-e47e-4c06-81d1-37af6543d7b2",
"yhmPid": "17339340-6964-432b-aa6d-0bdb96b150db",
"yhmName": "用户列表",
"yhmIconfont": null,
"yhmUrl": "/skipUserList",
"childMenus": [
{
"yhmId": "12345678",
"yhmPid": "d4ad8e91-e47e-4c06-81d1-37af6543d7b2",
"yhmName": "用户列表1",
"yhmIconfont": null,
"yhmUrl": "asd"
}
]
}
]
},
{
"yhmId": "ff8434bc-84d6-44be-9ba9-1eebe556fcdc",
"yhmPid": "1",
"yhmName": "菜单管理",
"yhmIconfont": "",
"yhmUrl": "javascript:;",
"childMenus": [
{
"yhmId": "4811cc51-c606-4894-8a78-7a1b092903cb",
"yhmPid": "ff8434bc-84d6-44be-9ba9-1eebe556fcdc",
"yhmName": "菜单列表",
"yhmIconfont": null,
"yhmUrl": "/skipMenuList"
}
]
}
]

接下来就是遍历layui树形菜单的函数:

参考:https://www.jianshu.com/p/7c903d35c0d7?from=groupmessage

// 导航菜单的间隔像素
var menuCell = 5;
function initMenuHtml(listData){
var data = listData;
var liStr= "";
// 遍历生成主菜单
for( var i = 0; i <data.length; i++){
// 判断是否存在子菜单
if(data[i].childMenus!=null&&data[i].childMenus.length>0){
liStr+="<li class="layui-nav-item"><a class="" href="javascript:;"><i class="layui-icon" >"+unescapeHTML(data[i].yhmIconfont)+"</i> "+data[i].yhmName+"</a>
"+
"<dl class="layui-nav-child">
";
// 遍历获取子菜单
for( var k = 0; k <data[i].childMenus.length; k++){
liStr+=getChildMenu(data[i].childMenus[k],0);
}
liStr+="</dl></li>";
}else{
liStr+="<li class="layui-nav-item"><a class="" href="javascript:;"><i class="layui-icon" ></i> "+data[i].yhmName+"</a></li>";
}
};
return "<ul class="layui-nav layui-nav-tree" lay-filter="test">
" +liStr+"</ul>";
}

// 递归生成子菜单
function getChildMenu(subMenu,num) {
num++;
var subStr = "";
if(subMenu.childMenus!=null&&subMenu.childMenus.length>0){
subStr+="<dd><ul><li class="layui-nav-item" ><a style="margin-Left:"+num*menuCell+"px" class="" href="javascript:;"><i class="layui-icon" ></i> "+subMenu.yhmName+"</a>" +
"<dl class="layui-nav-child">
";
for( var j = 0; j <subMenu.childMenus.length; j++){
subStr+=getChildMenu(subMenu.childMenus[j],num);
}
subStr+="</dl></li></ul></dd>";
}else{
subStr+="<dd><a style="margin-Left:"+num*menuCell+"px" href=""+subMenu.yhmUrl+""><i class="layui-icon" ></i> "+subMenu.yhmName+"</a></dd>";
}
return subStr;
}

注:函数中的属性名称根据自身情况自行调整。

    使用方法:

$.get("/getMenu",function(data){
console.log(JSON.stringify(data));
var jsonDataTree = transData(data, "yhmId", "yhmPid", "childMenus");
console.log(JSON.stringify(jsonDataTree));
$("#navBarId").html(initMenuHtml(jsonDataTree));
element.render();
},"json");

html中只需要放一个div,根据自身情况调整

<div id="navBarId">
</div>

json格式化工具:点击前往

支付宝打赏 微信打赏

您的支持是我最大的动力。

吐槽区