参考资料： http://www.treejs.cn/v3/demo.php#_101
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发，尤其是 树状菜单、树状数据的Web显示、权限管理等等，本文只介绍ztree的简单应用。
一、首先创建节点模型实体类
/// <summary> /// 节点实体模型类 /// </summary> public class MyNodes { public int id { get; set; } public int pId { get; set; } public string iconOpen { get; set; } public string iconClose { get; set; } /// <summary> /// 展开 /// </summary> public bool open { get; set; } /// <summary> /// 没有子节点 /// </summary> public bool isParent { get; set; } /// <summary> /// 节点名称 /// </summary> public string name { get; set; } public string icon { get; set; } } public class zNodes { /// <summary> /// 展开 /// </summary> public bool open { get; set; } /// <summary> /// 没有子节点 /// </summary> public bool isParent { get; set; } /// <summary> /// 节点名称 /// </summary> public string name { get; set; } private List<zNodes> _children; /// 子节点集合 public List<zNodes> children { get { if (_children == null) { return _children = new List<zNodes>(); } return _children; } set { _children = value; } }
二、添加给页面提供数据的方法（注：记得引用 using Newtonsoft.Json;）
1 /// <summary> 2 /// 给页面提供json格式的节点数据 3 /// </summary> 4 /// <returns></returns> 5 [HttpGet] 6 public string GetjsonDb() 7 { 8 ///节点类集合 9 List<MyNodes> myNodes = new List<MyNodes>(); 10 myNodes.Add(new MyNodes 11 { 12 id = 1, 13 name = "首页 ", 14 pId = 0, 15 open = false, 16 isParent = true 17 }); 18 myNodes.Add(new MyNodes 19 { 20 id = 2, 21 name = "攻略", 22 pId = 0, 23 isParent = true 24 }); 25 myNodes.Add(new MyNodes 26 { 27 id = 3, 28 name = "王者攻略 ", 29 pId = 2 30 }); 31 //将获取的节点集合转换为json格式字符串，并返回 32 string json = JsonConvert.SerializeObject(myNodes); 33 return json; 34 } 35 36 37 38 }
三、页面部分
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title></title> @*引入这三个 .css 和js文件*@ <link href="~/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" /> <script src="~/zTree_v3/js/jquery-1.4.4.min.js"></script> <script src="~/zTree_v3/js/jquery.ztree.core-3.5.js"></script> <script type="text/javascript"> //定义接收节点数据的变量 var zNodes; //节点配置信息 var setting = { data: { //控制子节点加载时候是加载还是折叠 simpleData: { enable:true } } }; $(function(){ //获取访问方法获取节点数据 $.getJSON('/Text/GetjsonDb', function (res) { zNodes = res; //初始化树节点 $.fn.zTree.init($("#treeDemo"), setting, zNodes); }) }); </script> </head> <body> <h1>最简单的树 -- 标准 JSON 数据</h1> @*<h6>[ 文件路径: core/standardData.html ]</h6>*@ <div class="content_wrap"> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> <div style="float:left;"> <img width="600" height="700" style="border:1PX"/> </div> </div> </body> </html>
简单的效果就已经实现了 ，效果图如下：
