MVC 3~MVC+ZTreeビッグデータ非同期ツリーロードを好きになる

カタログに戻る
理論部分:
MVC+ZTree:指在.NetMVC環境で開発され、ZTreeはjqueryのツリープラグインです
ビッグデータ:一般的に私达のシステムの中で、いくつかの表の构造は木型に属して、例えば分类、地域、メニュー、ウェブサイトのナビゲーションなど、分类のこのような表のように、そのデータ量は増加して、异なって出会って、数本、数万本かもしれなくて、サイトの运営に従って、数十万本に达することができて、もしこのようなビッグデータは、1回のデータをページに読む方式を采用して、取ることができないので、先にサーバーに与える圧力がどれだけ大きいかを言わないで、ただクライアントのブラウザはもうすぐ切ると推定して、誰が1つのページをロードして10分以上待って、ほほほ!
非同期ロード:この方法はすでに主流になっており、非同期は実際には現在のUIスレッドと衝突せず、ブラウザが偽死しないことを意味し、データを取得する動作はサーバと通信するためにチャネル(スレッド)を再開します.また、この方法は一般的に必要に応じて取りに行きます.ZTreeはこの方法をよくサポートしています.
「≪インスタンス｜Instance｜emdw≫」セクション:
まず、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に基づいて、その1級のサブノードのリストを得ることができます

        /// <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>

はい、私たちはプログラムを実行して、効果は出てきました.ほほほ!
カタログに戻る