(作者:ヤ青春ゞ滋味,撰写时间:2019年5月28日)
下面我们来讲一下树形菜单,平常我们在做项目时的使用频率比较高,我们可以实现固定的树形菜单,也就是我们在前台代码中写好要加载的树形菜单是什么样子的,它就会在页面上加载时什么样的。但是在这里我们要做的是实现动态树形菜单,也就是我们要根据数据库里面表的数据内容来进行动态加载树形菜单。而我们要做树形菜单的话,我们可以利用jquery.ztree控件搭建树形菜单简单又高效,因此我分享一下做动态树形菜单的方法:
1.首先,我们要引用它的CSS样式
<link href="~/zTree/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
2.接着我们要写HTML代码,我们要给一个容纳树形菜单的ul标签容器。
<ul id="tree" class="ztree" style=""></ul>
3.我们引用jquery.ztree控件里的三个JS。
这样我们就基本把HTML的代码完成了,那么接下来我们就需要配置树形菜单的参数了。
接下来,我们用ajax来绑定数据的来源,如下图:
那么接下来我们就要写控制器代码了,首先我们要在开头引用这一句代码:
using System.Text;如果不引用就会报错的。
首先我们要搭出根节点_Type:节点级别_open:默认状态_children:子节点
然后我们可以通过数据库查询子节点的数据,然后我们通过for循环来拼接字符串将子节点拼接起来,那么我们就让子节点的ID等于我从数据库中的区域ID,名称就等于区域名称,让Type等于1,最后我们返回字符串就ok了,这样我们就完成了一个动态的树形菜单了。
其实这一些代码还存在一些bug,目前正在改善中,如果大家觉得有好的意见,欢迎在评论区评论。