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>

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

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

巴特西

MVC+ZTree大数据异步树加载

实例部分：

最新文章

热门文章