作者：dcwzyb_271 | 来源：互联网 | 2023-05-19 09:37
上一次老师让我们用递归将中国城市镇县四级联动显示在树上，那个时候就知道可以显示在zTree上，可是苦于对Json的不了解，对zTree的Api的不了解，一直没有做出来，只好将递归算法显示在了窗体上，
上一次老师让我们用递归将中国城市镇县四级联动 显示在树上，那个时候就知道可以显示在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 Liststring, object>> jsOnlist= new Liststring, object>>();
4 List treeList= new List();
5
6 OracleHelper ora = new OracleHelper();
7 string sql = "select * from treegeneration";
8 DataTable dt = ora.Connect(sql);
9 for (int i = 0; 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 }
View Code
研究起来，相信亲们都可以看懂，不懂得进群交流，有问必答，群号499718271
京公网安备 11010802041100号