一个偷懒程序猿的自白
偷懒是人的本性，自然的想要的东西都依赖百度，无奈找了老半天都没能找到心怡的无限菜单，索性自己动手写写。并不是专业的前端人员，代码有瑕疵还望多多包涵，欢迎指正。
话不多说，直奔主题。
一、先看效果
无限菜单导航.png
二、HTML代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<style>
</style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layui 后台布局</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制台</a></li>
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">用户</a></li>
<li class="layui-nav-item">
<a href="javascript:;">其它系统</a>
<dl class="layui-nav-child">
<dd><a href="">邮件管理</a></dd>
<dd><a href="">消息管理</a></dd>
<dd><a href="">授权管理</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
贤心
</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退了</a></li>
</ul>
</div>
<div id="navBarId" class="layui-side layui-bg-black">
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<table class="layui-hide layui-col-md12" id="test"></table>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
© layui.com - 底部固定区域
</div>
</div>
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
// 导航菜单的间隔像素
var menuCell = 5;
layui.use('element', function(){
var element = layui.element;
var $ = layui.jquery;
data= '[{"name":"主页","url":"www.sys.com","childMenus":null},{"name":"系统设置","url":"www.sys.com","childMenus":[{"name":"权限模块","url":"www.sys.com","childMenus":null}]},{"name":"业务系统","url":"www.manager.com","childMenus":[{"name":"销售系统","url":"www.child01.com","childMenus":[{"name":"订单系统","url":"www.order.com","childMenus":[{"name":"未完成订单","url":"www.undo.com","childMenus":[{"name":"服装部订单","url":"www.clothes.com","childMenus":[{"name":"成人部分","url":"www.clothes.com","childMenus":null},{"name":"儿童部分","url":"www.clothes.com","childMenus":null}]},{"name":"玩具部订单","url":"www.clothes.com","childMenus":[{"name":"成人部分","url":"www.clothes.com","childMenus":null},{"name":"儿童部分","url":"www.clothes.com","childMenus":null}]}]}]},{"name":"结算系统","url":"www.order.com","childMenus":null}]},{"name":"公关系统","url":"www.child02.com","childMenus":null}]}]';
console.log("data: "+data);
data = JSON.parse(data);
var liStr= "";
// 遍历生成主菜单
for( var i = 0; i <data.length; i++){
//console.log("--> "+JSON.stringify(data[i]));
// 判断是否存在子菜单
if(data[i].childMenus!=null&&data[i].childMenus.length>0){
console.log("--> "+JSON.stringify(data[i].childMenus));
liStr+="<li class=\"layui-nav-item\"><a class=\"\" href=\"javascript:;\"><i class='layui-icon' ></i> "+data[i].name+"</a>\n"+
"<dl class=\"layui-nav-child\">\n";
// 遍历获取子菜单
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=\""+data[i].url+"\"><i class='layui-icon' ></i> "+data[i].name+"</a></li>";
}
};
console.log(">>>> "+liStr);
$("#navBarId").html("<ul class=\"layui-nav layui-nav-tree\" lay-filter=\"test\">\n" +liStr+"</ul>");
element.init();
});
// 递归生成子菜单
function getChildMenu(subMenu,num) {
console.log("num: "+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.name+"</a>" +
"<dl class=\"layui-nav-child\">\n";
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.url+"\"><i class='layui-icon' ></i> "+subMenu.name+"</a></dd>";
}
return subStr;
}
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'common/userList'
,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
,cols: [[
{field:'id', width:80, title: 'id', sort: true}
,{field:'lngCm', width:80, title: 'lngCm'}
,{field:'username', width:80, title: 'username', sort: true}
]]
,request:{
pageName: 'curr' //页码的参数名称，默认：page
,limitName: 'nums' //每页数据量的参数名，默认：limit
}
//用于对返回的数据格式的自定义，如：
,response: {
statusName: 'succ' //数据状态的字段名称，默认：code
,statusCode: 0 //成功的状态码，默认：0
,msgName: 'msg' //状态信息的字段名称，默认：msg
,countName: 'totalSize' //数据总数的字段名称，默认：count
,dataName: 'list' //数据列表的字段名称，默认：data
}
});
});
</script>
</body>
</html>
三、后台json串
[
{
"name": "系统设置",
"url": "www.sys.com",
"childMenus": [
{
"name": "权限模块",
"url": "www.sys.com",
"childMenus": null
}
]
},
{
"name": "业务系统",
"url": "www.manager.com",
"childMenus": [
{
"name": "销售系统",
"url": "www.child01.com",
"childMenus": [
{
"name": "订单系统",
"url": "www.order.com",
"childMenus": [
{
"name": "未完成订单",
"url": "www.undo.com",
"childMenus": [
{
"name": "服装部订单",
"url": "www.clothes.com",
"childMenus": [
{
"name": "成人部分",
"url": "www.clothes.com",
"childMenus": null
},
{
"name": "儿童部分",
"url": "www.clothes.com",
"childMenus": null
}
]
},
{
"name": "玩具部订单",
"url": "www.clothes.com",
"childMenus": [
{
"name": "成人部分",
"url": "www.clothes.com",
"childMenus": null
},
{
"name": "儿童部分",
"url": "www.clothes.com",
"childMenus": null
}
]
}
]
}
]
},
{
"name": "结算系统",
"url": "www.order.com",
"childMenus": null
}
]
},
{
"name": "公关系统",
"url": "www.child02.com",
"childMenus": null
}
]
}
]
