文章出處
文章列表
理論部分：
MVC+ZTree：指在.net MVC環境下進行開發，ZTree是一個jquery的樹插件
大數據：一般我們系統中，有一些表結構屬于樹型的，如分類，地域，菜單，網站導航等等，而像分類這種表，它的數據量是遞增的，不同遇見的，可能幾條，幾萬條，而隨著站點的運營，也可能達到幾十萬條，如果這樣的大數據，采用一次讀數據到頁面的方式，是不可取的，先不說給服務器的壓力有多大，只是客戶端的瀏覽器估計就要掛掉，誰愿意加載一個頁面等上10多分鐘呀，呵呵！
異步加載：這種方式已經成為主流，異步事實上是指與當前UI線程不沖突，瀏覽器不會假死，你的獲取數據的動作會重新開啟一個通道（線程）來與服務器進行通信，而且，這種方式一般是按需去取，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>
好了，我們運行程序，效果就出來了，呵呵！
經讀者提意，放了一個效果圖：
文章列表
全站熱搜
留言列表
