标签：
上一次老师让我们用递归将中国城市镇县四级联动 显示在树上，那个时候就知道可以显示在zTree上，可是苦于对Json的不了解，对zTree的Api的不了解，一直没有做出来，只好将递归算法显示在了窗体上，见C# 使用winForm的TreeView显示中国城镇四级联动, 前几天老师终于将他以前做的zTree的例子给我研究，终于知道了怎么写了（哭瞎，好没有成就感），感觉网上这部分资源好少，有也是关于SqlServer用EntityFramework中数据上下文写的，由于老师不让用EntityFramework框架,(总是说Oracle的EntityFramework框架太差劲，总有一天我要看看到底是不是这样)，才让我花了好长时间都无结果，一看源码原来如此简单粗暴。
首先献上 zTree的html代码
1 @{ 2 Layout = null; 3 } 4 5 <title>ZTREE DEMO - Custom Icon </title> 6 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 7 <link href="~/Content/zTree_v3/css/demo.css" rel="stylesheet" /> 8 <link href="~/Content/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" /> 9 <script src="~/Content/zTree_v3/js/jquery-1.4.4.min.js"></script> 10 <script src="~/Content/zTree_v3/js/jquery.ztree.core-3.5.js"></script> 11 <script src="~/Content/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script> 12 <script type="text/javascript"> 13 $(function () { 14 $.ajax({ 15 type: "Get", 16 url: "@Url.Action("GetTreeView","_Admin")", 17 //async: false, 18 success: function (data) { 19 $.fn.zTree.init($("#treeDemo"), setting, data); 20 } 21 }); 22 }) 23 24 var setting = { 25 check: { 26 enable: true, 27 chkStyle: "checkbox", 28 chkboxType: { "Y": "ps", "N": "ps" }, 29 isSimpleData: true, //数据是否采用简单 Array 格式，默认false 30 treeNodeKey: "id", //在isSimpleData格式下，当前节点id属性 31 treeNodeParentKey: "pId", //在isSimpleData格式下，当前节点的父节点id属性 32 showLine: true, //是否显示节点间的连线 33 checkable: true 34 }, 35 data: { 36 simpleData: { 37 enable: true 38 } 39 }, 40 callback: { 41 onClick: zTreeOnClick 42 } 43 }; 44 popZtree(setting); 45 function zTreeOnClick(event, treeId, treeNode) { 46 alert(treeNode.tId + " ," + treeNode.treeNode); 47 }; 48 </script> 49 50 <div class="zTreeDemoBackground left"> 51 <ul id="treeDemo" class="ztree"></ul> 52 </div>
这里要去zTree的官网http://www.ztree.me/v3/main.php#_zTreeInfo下载js,css,等文件
然后将数据库中的数据转换为Json数据，這里先上数据库中的sql http://download.csdn.net/detail/qq_23726427/9500512
然后再是转化代码
1 public JsonResult GetTreeView() 2 { 3 List<Dictionary<string, object>> jsonlist = new List<Dictionary<string, object>>(); 4 List<TreeModel> treeList= new List<TreeModel>(); 5 6 OracleHelper ora = new OracleHelper(); 7 string sql = "select * from treegeneration"; 8 DataTable dt = ora.Connect(sql); 9 for (int i = 0; i < dt.Rows.Count; i++) 10 { 11 TreeModel tree = new TreeModel(); 12 tree.TreeId = Convert.ToInt32(dt.Rows[i][0]); 13 tree.TreeNodeCode = dt.Rows[i][1].ToString(); 14 tree.ParentTd = dt.Rows[i][2].ToString(); 15 tree.NodeName = dt.Rows[i][3].ToString(); 16 tree.NodeLevel =Convert.ToInt32(dt.Rows[i][4].ToString()); 17 18 treeList.Add(tree); 19 } 20 21 foreach (var model in treeList) 22 { 23 Dictionary<string, object> jsonobj = new Dictionary<string, object>(); 24 jsonobj.Add("id", model.TreeNodeCode); 25 jsonobj.Add("pId", model.ParentTd); 26 jsonobj.Add("name", model.NodeName); 27 //jsonobj.Add("icon", ""); 28 jsonlist.Add(jsonobj); 29 } 30 return Json(jsonlist, JsonRequestBehavior.AllowGet); 31 }
因为我自己Oracle数据库中的建表sql,和数据sql找不到了，所以发了个上次做的那个Mysql数据库的城镇级联数据表，这里你将上述代码稍加修改即可，这里不再赘述。
注意这里 jquery.ztree.excheck-3.5.js ，jquery.ztree.core-3.5.js 是关键，要不然待会你生成treeView的复选框就不看不见了。效果图如下
这里顺便附上SqlServer中的EntittyFramework的Context上下文的方法将数据库中数据转化为Json的样式(这里代码不是我写的，欢迎作者和我联系)
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.Mvc; 6 using MvcApplication4.Models; 7 8 namespace MvcApplication4.Controllers 9 { 10 public class HomeController : Controller 11 { 12 // 13 // GET: /Home/ 14 private Context db = new Context(); 15 public ActionResult Index() 16 { 17 return View(); 18 } 19 20 public ActionResult getmenu() 21 { 22 var list = (from a in db.Menutree 23 select new 24 { 25 id = a.Zid, 26 pId = a.Pid, 27 name = a.Name, 28 LinkUrl = a.LinkUrl 29 }).ToList(); 30 return Json(list, JsonRequestBehavior.AllowGet); 31 } 32 33 } 34 }
研究起来，相信亲们都可以看懂，不懂得进群交流，有问必答，群号499718271
(菜鸟要飞系列)四，基于Asp.Net MVC5的后台管理系统（zTree绑定Json数据生成树）
标签：
原文地址：http://www.cnblogs.com/jnzdn/p/5425796.html
