(菜鳥要飛系列)四，基於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