上一次老师让我们用递归将中国城市镇县四级联动 显示在树上,那个时候就知道可以显示在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 }

View Code

研究起来,相信亲们都可以看懂,不懂得进群交流,有问必答,群号499718271

转载于:https://www.cnblogs.com/jnzdn/p/5425796.html

(菜鸟要飞系列)四,基于Asp.Net MVC5的后台管理系统(zTree绑定Json数据生成树)...相关推荐

  1. (菜鸟要飞系列)五,基于Asp.Net MVC5的后台管理系统(添加数据表的分页功能)...

    献上代码 1 public ActionResult SelectAll(int id=1) 2 { 3 4 List<UserModel> arrayUserModel = new Li ...

  2. 菜鸟要飞系列目录(在更)

    菜鸟要飞系列目录 1.(菜鸟要飞系列)一,基于Asp.Net MVC5的后台管理系统(前言) 2.(菜鸟要飞系列)二,基于Asp.Net MVC5的后台管理系统(实现登陆功能) 3.(菜鸟要飞系列)三 ...

  3. SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客(十)

    系列文章目录 系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...

  4. SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客(十八)

    系列文章目录 系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...

  5. SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客(二十三)

    系列文章目录 系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...

  6. SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客(七)

    系列文章目录 系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...

  7. 基于asp.net的高中学籍管理系统

    随着科学技术的发展,电子无纸化的学籍管理是社会发展的必然趋势.因此需要开发一个能够方便对学生学籍管理的系统.实现基于ASP.NET的高中学籍管理系统.主要为方便管理学生学籍而开发的,也使师生能够快速获 ...

  8. 基于springboot外委员工后台管理系统毕业设计源码101157

    基于springboot外委员工后台管理系统 摘  要 随着互联网大趋势的到来,社会的方方面面,各行各业都在考虑利用互联网作为媒介将自己的信息更及时有效地推广出去,而其中最好的方式就是建立网络管理系统 ...

  9. .net宿舍管理系统 mysql_基于.NET CORE的精美后台管理系统-RuoYi C#版

    若依(RuoYi)是码云上一款精美的开源快速开发平台,作者毫无保留给个人及企业免费使用.RuoYi目前有三个版本:普通版本(RuoYi).前后端分离版本(RuoYi-Vue).微服务版本(RuoYi- ...

最新文章

  1. 征服Perl——输入输出相关知识——里程碑M6
  2. pycharm代码自动补全功能
  3. 网站jcms流程分析
  4. mysql事务的提交和回滚
  5. Win10下skimage的安装
  6. Python自然语言处理工具包推荐
  7. C++赋值运算符重载【C++赋值运算符重载】
  8. 编程练习:Matlab 一个小任务(-)
  9. jquery : 动态构建表单自动提交请求
  10. Laravel Kernel引导流程分析
  11. 导师什么时候会放弃学生?
  12. 数据结构-线性相关代码
  13. 了解java虚拟机---JVM的基本结构(1)
  14. php+access源码,php操作access源码
  15. Delphi XE 操作sqlite数据库
  16. flash builder4.6安装
  17. nas服务器加密文件夹,NAS加密文件夹创建和使用教程
  18. mysql概念模型中的3种基本联系_数据库建模三步骤:概念模型
  19. Matlab中loglog函数使用
  20. segmentation_models.pytorch实战:使用segmentation_models.pytorch图像分割框架实现对人物的抠图

热门文章

  1. 研报精选230416
  2. 虚拟贝斯手合集 UJAM Instruments Virtual Bassists Bundle WiN-MAC
  3. js validate
  4. Inherits、CodeFile、CodeBehind的意义
  5. Kivy Android开发教程之 开始构建 Kivy 跨平台应用程序(环境搭建含程序源码)
  6. .NET vs .NET Framework vs vs .NET Standard
  7. Serv-U FTP Server 错误代码详解
  8. HAVOK如何处理挖洞处的碰撞问题
  9. android surface原理,Android 谈谈我理解的Surface绘制原理
  10. codeforces-742