一個(gè)偷懶程序猿的自白
偷懶是人的本性，自然的想要的東西都依賴(lài)百度，無(wú)奈找了老半天都沒(méi)能找到心怡的無(wú)限菜單，索性自己動(dòng)手寫(xiě)寫(xiě)。并不是專(zhuān)業(yè)的前端人員，代碼有瑕疵還望多多包涵，歡迎指正。
話(huà)不多說(shuō)，直奔主題。
一、先看效果
無(wú)限菜單導(dǎo)航.png
二、HTML代碼實(shí)現(xiàn)
<!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">
<!-- 注意：如果你直接復(fù)制所有代碼到本地，上述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 后臺(tái)布局</div>
<!-- 頭部區(qū)域（可配合layui已有的水平導(dǎo)航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制臺(tái)</a></li>
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">用戶(hù)</a></li>
<li class="layui-nav-item">
<a href="javascript:;">其它系統(tǒng)</a>
<dl class="layui-nav-child">
<dd><a href="">郵件管理</a></dd>
<dd><a href="">消息管理</a></dd>
<dd><a href="">授權(quán)管理</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="">安全設(shè)置</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">
<!-- 內(nèi)容主體區(qū)域 -->
<div style="padding: 15px;">
<table class="layui-hide layui-col-md12" id="test"></table>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定區(qū)域 -->
? layui.com - 底部固定區(qū)域
</div>
</div>
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接復(fù)制所有代碼到本地，上述js路徑需要改成你本地的 -->
<script>
// 導(dǎo)航菜單的間隔像素
var menuCell = 5;
layui.use('element', function(){
var element = layui.element;
var $ = layui.jquery;
data= '[{"name":"主頁(yè)","url":"www.sys.com","childMenus":null},{"name":"系統(tǒng)設(shè)置","url":"www.sys.com","childMenus":[{"name":"權(quán)限模塊","url":"www.sys.com","childMenus":null}]},{"name":"業(yè)務(wù)系統(tǒng)","url":"www.manager.com","childMenus":[{"name":"銷(xiāo)售系統(tǒng)","url":"www.child01.com","childMenus":[{"name":"訂單系統(tǒng)","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":"結(jié)算系統(tǒng)","url":"www.order.com","childMenus":null}]},{"name":"公關(guān)系統(tǒng)","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 //全局定義常規(guī)單元格的最小寬度，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' //頁(yè)碼的參數(shù)名稱(chēng)，默認(rèn)：page
,limitName: 'nums' //每頁(yè)數(shù)據(jù)量的參數(shù)名，默認(rèn)：limit
}
//用于對(duì)返回的數(shù)據(jù)格式的自定義，如：
,response: {
statusName: 'succ' //數(shù)據(jù)狀態(tài)的字段名稱(chēng)，默認(rèn)：code
,statusCode: 0 //成功的狀態(tài)碼，默認(rèn)：0
,msgName: 'msg' //狀態(tài)信息的字段名稱(chēng)，默認(rèn)：msg
,countName: 'totalSize' //數(shù)據(jù)總數(shù)的字段名稱(chēng)，默認(rèn)：count
,dataName: 'list' //數(shù)據(jù)列表的字段名稱(chēng)，默認(rèn)：data
}
});
});
</script>
</body>
</html>
三、后臺(tái)json串
[
{
"name": "系統(tǒng)設(shè)置",
"url": "www.sys.com",
"childMenus": [
{
"name": "權(quán)限模塊",
"url": "www.sys.com",
"childMenus": null
}
]
},
{
"name": "業(yè)務(wù)系統(tǒng)",
"url": "www.manager.com",
"childMenus": [
{
"name": "銷(xiāo)售系統(tǒng)",
"url": "www.child01.com",
"childMenus": [
{
"name": "訂單系統(tǒng)",
"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": "結(jié)算系統(tǒng)",
"url": "www.order.com",
"childMenus": null
}
]
},
{
"name": "公關(guān)系統(tǒng)",
"url": "www.child02.com",
"childMenus": null
}
]
}
]
