理论部分：
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 ?? )).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>
好了，我们运行程序，效果就出来了，呵呵！
经读者提意，放了一个效果图：