动态加载的树形菜单
动态加载的树形菜单
开发工具与关键技术：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的官网去看详情。了解的不多，所以做的树也比较随便就将就看着点。
下面就是效果图：
在这里插入图片描述
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-06-05 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读