MVC+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>

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

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