MVC小系列（十四）【MVC+ZTree大数据异步树加载】

ZTree是一个jquery的树插件
可以异步加载

第一步定义一个标准的接口（指的是与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
    }

第二步：会前台页面提供一个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();
        }

当然需要一个JsonHelper工具类：

  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)))
            {
                //需加载程序集:System.Runtime.Serialization;
                DataContractJsonSerializer serializer = new DataContractJsonSerializer(obj.GetType());
                return (T)serializer.ReadObject(ms);
            }
        }
    }

 

第三步：前台展示可能 是这样

@*注意引用zTree库*@
<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>
<div id="treeDemo4" class="ztree"></div>