实例部分:

首先是为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>

好了,我们运行程序,效果就出来了,呵呵!

经读者提意,放了一个效果图: