动态加载的树形菜单

开发工具与关键技术：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的官网去看详情。了解的不多，所以做的树也比较随便就将就看着点。

下面就是效果图：