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

上一次老师让我们用递归将中国城市镇县四级联动 显示在树上，那个时候就知道可以显示在zTree上，可是苦于对Json的不了解，对zTree的Api的不了解，一直没有做出来，只好将递归算法显示在了窗体上，见C# 使用winForm的TreeView显示中国城镇四级联动, 前几天老师终于将他以前做的zTree的例子给我研究，终于知道了怎么写了（哭瞎，好没有成就感），感觉网上这部分资源好少，有也是关于SqlServer用EntityFramework中数据上下文写的，由于老师不让用EntityFramework框架,(总是说Oracle的EntityFramework框架太差劲，总有一天我要看看到底是不是这样)，才让我花了好长时间都无结果，一看源码原来如此简单粗暴。

首先献上 zTree的html代码

@{
    Layout = null;
}

<title>ZTREE DEMO - Custom Icon </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="~/Content/zTree_v3/css/demo.css" rel="stylesheet" />
<link href="~/Content/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="~/Content/zTree_v3/js/jquery-1.4.4.min.js"></script>
<script src="~/Content/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
<script src="~/Content/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: "Get",
            url: "@Url.Action("GetTreeView","_Admin")",
            //async: false,
            success: function (data) {
                $.fn.zTree.init($("#treeDemo"), setting, data);
            }
        });
    })

    var setting = {
        check: {
            enable: true,
            chkStyle: "checkbox",
            chkboxType: { "Y": "ps", "N": "ps" },
            isSimpleData: true,              //数据是否采用简单 Array 格式，默认false
            treeNodeKey: "id",               //在isSimpleData格式下，当前节点id属性
            treeNodeParentKey: "pId",        //在isSimpleData格式下，当前节点的父节点id属性
            showLine: true,                  //是否显示节点间的连线
            checkable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: zTreeOnClick
        }
    };
    popZtree(setting);
    function zTreeOnClick(event, treeId, treeNode) {
        alert(treeNode.tId + " ," + treeNode.treeNode);
    };
</script>

<div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
</div>

这里要去zTree的官网http://www.ztree.me/v3/main.php#_zTreeInfo下载js,css,等文件

然后将数据库中的数据转换为Json数据，這里先上数据库中的sql http://download.csdn.net/detail/qq_23726427/9500512

然后再是转化代码

 public JsonResult GetTreeView()
        {
            List<Dictionary<string, object>> jsonlist = new List<Dictionary<string, object>>();
            List<TreeModel> treeList= new List<TreeModel>();

            OracleHelper ora = new OracleHelper();
            string sql = "select * from treegeneration";
            DataTable dt = ora.Connect(sql);
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                TreeModel tree = new TreeModel();
                tree.TreeId = Convert.ToInt32(dt.Rows[i][0]);
                tree.TreeNodeCode = dt.Rows[i][1].ToString();
                tree.ParentTd = dt.Rows[i][2].ToString();
                tree.NodeName = dt.Rows[i][3].ToString();
                tree.NodeLevel =Convert.ToInt32(dt.Rows[i][4].ToString());

                treeList.Add(tree);
            }

            foreach (var model in treeList)
            {
                Dictionary<string, object> jsonobj = new Dictionary<string, object>();
                jsonobj.Add("id", model.TreeNodeCode);
                jsonobj.Add("pId", model.ParentTd);
                jsonobj.Add("name", model.NodeName);
                //jsonobj.Add("icon", "");
                jsonlist.Add(jsonobj);
            }
            return Json(jsonlist, JsonRequestBehavior.AllowGet);
        }

因为我自己Oracle数据库中的建表sql,和数据sql找不到了，所以发了个上次做的那个Mysql数据库的城镇级联数据表，这里你将上述代码稍加修改即可，这里不再赘述。

注意这里  jquery.ztree.excheck-3.5.js  ，jquery.ztree.core-3.5.js 是关键，要不然待会你生成treeView的复选框就看不见了。效果图如下

这里顺便附上SqlServer中的EntittyFramework的Context上下文的方法将数据库中数据转化为Json的样式

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication4.Models;

namespace MvcApplication4.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        private Context db = new Context();
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult getmenu()
        { 
            var list = (from a in db.Menutree
                        select new
                        {
                            id = a.Zid,
                            pId = a.Pid,
                            name = a.Name,
                            LinkUrl = a.LinkUrl
                        }).ToList();
            return Json(list, JsonRequestBehavior.AllowGet);
        }

    }
}

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