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

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

时间: 2024-08-04 14:28:00

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

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

献上代码 1 public ActionResult SelectAll(int id=1) 2 { 3 4 List<UserModel> arrayUserModel = new List<UserModel>(); 5 string strText = Request.Form["find"]; //接参 6 OracleHelper ora = new OracleHelper(); 7 string sql = "select * from

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(33)-数据验证共享

原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(33)-数据验证共享 注:本节阅读需要有MVC 自定义验证的基础,否则比较吃力 一直以来表单的验证都是不可或缺的,微软的东西还是做得比较人性化的,从webform到MVC,都做到了双向验证 单单的用js实现的前端验证是极其不安全的,所以本次我们来看看MVC上的自带的注解验证,自定义验证 同样的MVC提供了一系列内置的数据验证注解 不为空验证  [Required(ErrorMessage = "不能为空

基于tp5免费开源的后台管理系统

基于tp5免费开源的后台管理系统 可以自定义后台菜单,模块等. 后台模板用的是:AdminLTE 简单的后台基础管理系统,有兴趣开源看看 代码地址:https://github.com/mengzhilva/tp5admin 后台样式: 模块定义后台的一级菜单 应用列表定义二级菜单 原文地址:https://www.cnblogs.com/mengzhilva/p/10968458.html

[游戏开发-学习笔记]菜鸟慢慢飞(四)-Camera

游戏开发中,主相机应该是最重要的GameObject之一,毕竟游戏呈现给玩家,就是通过它. 相机的使用,在不同的游戏中,有很大的不同.这里总结一下自己学到的一些相关知识. 固定位置-游戏过程中相机的Transform属性不改变. 调整好位置后就不要动了,一般使用正交相机,即Camera-Projection选择Orthographic.Unity Manual-Camera 适用:2D游戏.比如飞机大战,消消乐. 游戏开始后,相机追踪某一物体,然后固定不动. 游戏开始后,我们才能确定追踪物体的位

【转】手摸手,带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)

前言 做这个 vueAdmin-template 的主要原因是: vue-element-admin 这个项目的初衷是一个vue的管理后台集成方案,把平时用到的一些组件或者经验分享给大家,同时它也在不断的维护和拓展中,比如最近重构了dashboard,加入了全屏功能,新增了tabs-view等等.所以项目会越来越复杂,不太适合很多初用vue的同学来构建后台.所以就写了这个基础模板,它没有复杂的功能,只包含了一个后台需要最基础的东西.vueAdmin-template 主要是基于vue-cli w

Asp.Net Mvc通用后台管理系统,bootstrap+easyui+权限管理+ORM

产品清单: 1.整站源码,非编译版,方便进行业务的二次开发 2.通用模块与用户等基础数据的数据库脚本 3.bootstrap3.3.1 AceAdmin模板源码 4.easyui1.3.5源码 5.FCKEditor和Findor源码 6.ORM代码生成器一套,附源码,可进行个人习惯进行二次开发 7.本系统用了大量easyui的树形懒加载和动态查询示例,非常方便进行学习和企业开发 8.log4net 9.异常日志查看页面 产品功能清单: 后台页面自适应,兼容所有主流浏览器 多语言接口支持 系统配

理解asp.net中DropDownList编辑数据源,绑定数据库数据。

一.理解asp.net绑定数据库 终于学习到了连接数据库部分的内容,杨中科老师视频看起来挺轻松的,如果是高清版就更ok了. 我发现我学习新的编程语言会有一个特点,都想要赶紧学习数据库,数据就是一切,有了数据才能操作一切的原因吧.现在能连上数据库特别心安.把过程记录一下,成为学习轨迹的一部分. 环境是VS2013.MSSQLSERVER(2012) (一)我想实现的效果是:一个下拉菜单DropDownList,从数据库那边获取数据过来,显示在下单菜单里. (二)实现的过程 首先,我把数据库跟数据表

[简约webAPI]分别以asp|jsp|php简单粗暴实现webAPI,输出json数据

原本打算使用golang编写一个RESTful API,但因为环境所限,此次采用“偷懒的方式”,其实也不算偷懒,至少编写代码上面没有偷懒,只是在部署上偷懒了,三台机器物理地址以及公网地址均不同,说白了就是这三玩意儿没在一块,嘛都没在,好嘛,服务器环境也均然不同,分别为asp.java.php编写部署的系统. 既然都是脚本语言,那就暴力解决此次问题,灵活性毕竟很高嘛. ASP+sqlServer 废话不多说上代码 <%@LANGUAGE="VBSCRIPT" CODEPAGE=&q

【华为云技术分享】基于小熊派STM32芯片的通过MQTT上报JSON数据到华为物联网平台的自动售货机Demo解析

[摘要] STM32的工程在文章末尾,可自行下载. 一.工程配置 1.MCU类型选择STM32L431RC 2.烧录器选择OpenOCD,参数 -f interface/stlink-v2-1.cfg -f target/stm32l4x.cfg 3.输出目录选择 LiteOS_Lab_STM32\targets\STM32L431_BearPi\GCC\appbuild 4.编译器Makefile选择 targets\STM32L431_BearPi\GCC\Makefile 5.平台参数配置