理论部分：
MVC+ZTree：指在.net MVC环境下进行开发，ZTree是一个jquery的树插件
大数据：一般我们系统中，有一些表结构属于树型的，如分类，地域，菜单，网站导航等等，而像分类这种表，它的数据量是递增的，不同遇见的，可能几条，几万条，而随着站点的运营，也可能达到几十万条，如果这样的大数据，采用一次读数据到页面的方式，是不可取的，先不说给服务器的压力有多大，只是客户端的浏览器估计就要挂掉，谁愿意加载一个页面等上10多分钟呀，呵呵！
异步加载：这种方式已经成为主流，异步事实上是指与当前UI线程不冲突，浏览器不会假死，你的获取数据的动作会重新开启一个通道（线程）来与服务器进行通信，而且，这种方式一般是按需去取，ZTree很好的支持了这种方式。
实例部分：
首先是为ZTree提供的数据规范，定义一个标准的接口，这样对于前台调用是清楚的，简单的，因为它返回的JSON数据将与ZTree默认的数据元素保持一致
/// <summary> /// ZTree数据结构 /// </summary> public interface IZTree { /// <summary> /// 节点ID /// </summar int id { get; set; } /// <summary> /// 节点名称 /// </summary> string name { get; set; } /// <summary> /// 父ID /// </summary> int pId { get; set; } /// <summary> /// 是否有子节点 /// </summary> bool isParent { get; set; } } public class Node : IZTree { #region IZTree 成员 /// <summary> /// 节点ID /// </summary> public int id { get; set; } /// <summary> /// 节点名称 /// </summary> public string name { get; set; } /// <summary> /// 父ID /// </summary> public int pId { get; set; } /// <summary> /// 是否有子节点 /// </summary> public bool isParent { get; set; } #endregion }
其次是MVC这边，会前台页面提供一个GET请求的方法，用来根据父ID，得到它的一级子节点列表
/// <summary> /// 得到指定ID的子节点列表，并序列化为JSON串 /// </summary> /// <param name="id"></param> /// <returns></returns> public string AsyncGetNodes(int? id) { return nodearr.Where(i => i.pId == (id ?? 0)).ToJson(); }
下面是JSON的功能类，网上有很多
public static class JsonHelper { /// <summary> /// 返回对象序列化 /// </summary> /// <param name="obj">源对象</param> /// <returns>json数据</returns> public static string ToJson(this object obj) { JavaScriptSerializer serialize = new JavaScriptSerializer(); return serialize.Serialize(obj); } /// <summary> /// 控制深度 /// </summary> /// <param name="obj">源对象</param> /// <param name="recursionDepth">深度</param> /// <returns>json数据</returns> public static string ToJson(this object obj, int recursionDepth) { JavaScriptSerializer serialize = new JavaScriptSerializer(); serialize.RecursionLimit = recursionDepth; return serialize.Serialize(obj); } public static object ParseFromJson<T>(string szJson) { T obj = Activator.CreateInstance<T>(); using (MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(szJson))) { DataContractJsonSerializer serializer = new DataContractJsonSerializer(obj.GetType()); return (T)serializer.ReadObject(ms); } } }
OK，现在我们回到前台，看一下前台页面是如何与后台方法进行通讯的
<link href="../../Scripts/JQuery-zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" /> <script src="../../Scripts/JQuery-zTree/js/jquery-1.4.4.min.js"></script> <script src="../../Scripts/JQuery-zTree/js/jquery.ztree.all-3.5.min.js"></script> <script type="text/javascript"> //异步加载节点 var setting4 = { data: { simpleData: { enable: true, idKey: "id", pIdKey: "pId", rootPId: 0 } }, async: { //异步加载 enable: true, url: "/category/AsyncGetNodes", autoParam: ["id", "name", "pId"] }, callback: { beforeExpand: beforeExpand, onAsyncSuccess: onAsyncSuccess, onAsyncError: onAsyncError } }; function createTree() { $.ajax({ url: '/category/AsyncGetNodes', //url action是方法的名称 data: { id: 0 }, type: 'Get', dataType: "text", //可以是text，如果用text，返回的结果为字符串；如果需要json格式的，可是设置为json success: function (data) { $.fn.zTree.init($("#treeDemo4"), setting4, eval('(' + data + ')')); }, error: function (msg) { alert(" 数据加载失败！" + msg); } }); } function beforeExpand(treeId, treeNode) { if (!treeNode.isAjaxing) { return true; } else { alert("zTree 正在下载数据中，请稍后展开节点。。。"); return false; } } function onAsyncSuccess(event, treeId, treeNode, msg) { } function onAsyncError() { alert(" 数据加载失败"); } $(document).ready(function () { createTree(); }); </script>
下面是HTML代码
<ul id="treeDemo4" class="ztree"></ul>
好了，我们运行程序，效果就出来了，呵呵！
经读者提意，放了一个效果图：
本文转自博客园张占岭（仓储大叔）的博客，原文链接：爱上MVC3~MVC+ZTree大数据异步树加载，如需转载请自行联系原博主。
