參考資料： 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>
簡單的效果就已經實現了 ，效果圖如下：
