.net mvc 框架實現後臺管理系統 3
左側選單實現
預設html
<div class="layui-side layui-bg-black h-slide">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree" lay-filter="managerTreeNav" id="managerTreeNav">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">預設展開</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" id="xx1">選項1</a></dd>
<dd><a href="javascript:;">選項2</a></dd>
<dd><a href="">跳轉</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;" id="jjfa">解決方案</a>
<dl class="layui-nav-child">
<dd><a href="">移動模組</a></dd>
<dd><a href="">後臺模版</a></dd>
<dd><a href="">電商平臺</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">產品</a></li>
<li class="layui-nav-item"><a href="">大資料</a></li>
</ul>
</div>
</div>
根據這個格式編輯（script）
//首次登入執行獲取一級選單
$.ajax({
url: "/Home/GetTree?id=0",
type: "Post",
timeout: 5000,
async: false,
dataType: "json",
success: function (data) {
if (data != null && data != undefined) {
var leftTreeBox = $("#managerTreeNav").empty();
var treeHtml = "";
for (var i = 0; i < data.length; i++) {
treeHtml += "<li class=\"layui-nav-item\"><a href=#" + data[i].value + " data-hasChildren=" + data[i].hasChildren + " id=" + data[i].id + "><i class=\"" + data[i].Icon + "\"></i>" + data[i].text + "</a><dl class=\"layui-nav-child\"><dd></dd></dl></li>"
}
leftTreeBox.append(treeHtml);
//初始化渲染全部的元素
element.init();
}
else {
layer.load(1, { offset: ['100px', '80px'] });//當選單載入失敗時使用
}
},
error: function (error) {
console.log(error);
}
})
//導航選單監聽
element.on('nav(managerTreeNav)', function (elem) {
//獲取二級選單
$.ajax({
url: "/Home/GetTree?id=" + encodeURI(id),
type: "Post",
timeout: 5000,
async: false,
dataType: "json",
success: function (data) {
var treeHtml = "";
for (var i = 0; i < data.length; i++) {
treeHtml += "<dd><a data-href=" + data[i].value + " data-hasChildren=" + data[i].hasChildren + " id=" + data[i].id + "><i class=\"" + data[i].Icon + "\"></i>" + data[i].text + "</a></dd>"
}
elem.parent().find("dl").empty().append(treeHtml);
element.init();
},
error: function (error) {
console.log(error);
}
})
})
##使用layui的選單必須載入element模組