爱上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>

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

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

回到目录