需求：
由于項目中家譜圖數據量超大，而一般加載方式是通過，頁面加載時 zTree.init方法進行數據加載，將所有數據一次性加載到頁面中。而在項目中家譜級別又非常廣而深，成千上萬級，因此一次加載，完全加載不出來。于是需要進行優化為動態加載（增量加載）的方式，以便數據加載，提高體驗度。
解決斷路：
這應該好辦，只要找到父節點單擊事件，然后進行數據加載，結點附加即可。時間緊，任務重，完全沒給研究的時間。只能硬著上，隨便搜索一個“zTree動態加載”，出是出來了，標題也對，可里面的代碼根本沒找到添加結點一說……一邊是需求催，一邊是沒找到類似。無語……對啊，不是有官網，于是把所有api函數瀏覽一遍，終于發現一個叫addNodes的函數。喜！
控件代碼
<div class="UserTree"> <ul id="treeDemo" class="ztree"></ul></div>
腳本代碼（實現結點展開、單擊事件時進行動態加載）：
<script> var zNodes; var zTree; $(function () { $.ajax({ cache: true, type: "get", url: "/User/NextLeve", async: false, success: function (data) { zNodes = data; }, error: function (data) { alert("error"); } }); zTree = ZTreeCustom.init($("#treeDemo"), setting, zNodes); zTree.expandAll(false); }) var setting = { view: { nameIsHTML: true }, data: { simpleData: { enable: true }, keep: { parent: true } }, open: false, callback: { onClick: nodeClick, onExpand: function (event, treeId, treeNode) { addSubNode(treeNode); } } }; function showIconForTree(treeId, treeNode) { return !treeNode.isParent; }; function searchM() { var username = $("#txtName").val() } function nodeClick(event, treeId, treeNode, clickFlag) { addSubNode(treeNode); } function addSubNode(treeNode) { if (!treeNode.isParent) return; var s = treeNode.children; if (s != undefined) return; $.ajax({ cache: true, type: "get", url: "/User/NextLeve", data: { userId: treeNode.id }, async: true, success: function (data) { zTree.addNodes(treeNode, data); }, error: function (data) { alert("error"); } }); }</script>其中后端請求：
其中數據來源為請求路徑“/User/NextLeve?userId=xxx”，為返回如下結構的列表的json數據（即List<UserNode>類型的.ToJson()數據），其中userId可為，為空時默認取當前登錄用戶：
public class UserNode{ public long id { get; set; } public long pId { get; set; } public string name { get; set; } public bool open { get; set; } public bool isParent { get; set; } public string icon { get; set; }}效果，則實現為單擊父結點/展開父結點時動態加載子結點。
以上所述是小編給大家介紹的jQuery zTree樹插件動態加載效果實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
