爱上MVC3~MVC+ZTree大数据异步树加载

回到目录

理论部分：

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>

好了，我们运行程序，效果就出来了，呵呵！

经读者提意，放了一个效果图：

回到目录