动态加载的树形菜单
原创
在做到页面需要做到树形菜单，而且还是动态从数据库加载数据的，就是树形菜单的节点由数据库的数据来填充。
首先一开始是这个数据库的设置，这个数据库的设置很重要，一开始想着这个树形菜单可以无限级的循坏下去，这得建多少个表啊，后来才发现自己想多了，只需要一个表格就可以实现了，如下
数据库表的设置大概是这样，就是给这个表加上一个字段pId，这上面的关系怎么看，1和2的pId都是0就是说他们没有上一级，1-1和1-2的pId为1说明他们的上一级是1就是这样一层一层嵌套下去，这样就可以实现无限级的树形菜单
这个代码是怎么实现的，如下：
后台请求数据代码：
public ActionResult ZtreeData(int id = 0)
{
var
list = (from tbClass in myModels.S_Classify
where tbClass.ParentID==id
select new
{
id =
tbClass.ClassifyID,
pId =
tbClass.ParentID,
name =
tbClass.ClassifyName,
isParent =
myModels.S_Classify.Any(a => a.ParentID == tbClass.ClassifyID)
});
return
Json(list, JsonRequestBehavior.AllowGet);
}
前台初始化树形菜单的代码：
var setting = {
async:
{
enable: true,
url: "/MessageMaintain/Classes/ZtreeData",//数据请求地址
autoParam: ["id" ],//像后台请求数据时的参数
},
callback: {
//onClick: click,
onMouseDown: onMouseDown,
}
};
//页面加载事件
$(function
() {
$.fn.zTree.init($("#treeDemo"), setting);
})
function
onMouseDown(event, treeId, treeNode) {
}
HTML代码：
<ul id="treeDemo"
class="ztree px-0" style="margin:0px
0;background:white;"></ul>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
