动态加载的树形菜单
开发工具与关键技术:MVC 树形菜单
作者:盘洪源
撰写时间:2019年6月2日星期天
在做到页面需要做到树形菜单,而且还是动态从数据库加载数据的,就是树形菜单的节点由数据库的数据来填充。
首先一开始是这个数据库的设置,这个数据库的设置很重要,一开始想着这个树形菜单可以无限级的循坏下去,这得建多少个表啊,后来才发现自己想多了,只需要一个表格就可以实现了,如下
数据库表的设置大概是这样,就是给这个表加上一个字段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>
引用插件:
<link href="~/Plugins/css/zTreeStyle/zTreeStyle.css"
rel=“stylesheet” />
这是用到zTree的一个插件。
这是一个很简单的树形菜单,首先开始的在后台将数据库中的数据查询出来,前台就初始化这个树,通过url请求到数据,然后就在页面加载事件初始化这个树。Callback这里面放着是鼠标点击事件,还可以放一下其他的事件,这个可以去zTree的官网去看详情。了解的不多,所以做的树也比较随便就将就看着点。
下面就是效果图: