Home >Web Front-end >JS Tutorial >zTree loads all nodes asynchronously
Referenced header file code
cb197470341c8d91a26b68f86bd48c72/component/ztree/css/zTreeStyle/zTreeStyle. css" />
bbc362e6559c2805048b5bbe92713f2e/component/ztree/js/jquery-1.4.4.min.js"> ;2cacc6d41bbb37262a98f745aa00fbf0
bbc362e6559c2805048b5bbe92713f2e/component/ztree/js/jquery.ztree.core.js"> 2cacc6d41bbb37262a98f745aa00fbf0
bbc362e6559c2805048b5bbe92713f2e/component/ztree/js/jquery.ztree.excheck.js">< ;/script>
The carrier code of the tree
<div style="border:solid 1px #a7b5bc; float:left; width:100%; height:100%; overflow-y:auto;"> <ul id="tree" class="ztree"></ul> </div>
Javascript part (the focus of this article) code
<script type="text/javascript"> //初始化树 $(function() { $zTree = $.fn.zTree.init($("#tree"), $setting); //延迟展开根节点 setTimeout(function(){ var nodes = $zTree.getNodes(); if(nodes.length >0){ $zTree.expandNode($zTree.getNodes()[0], true, false, false); } },1000); }); //定义ztree树所需变量 var $zTree; var $zTreeFlag = true; var $setting = { async : { enable : true, url : "/baseplatform/auth/selectSysRoleUserTreeByPid.do", autoParam : ["id"], otherParam: {"srId":'${sysRole.srId}'} }, callback : { onAsyncSuccess : onAsyncSuccess }, data : { key : {name : "name"}, simpleData : {enable : true, idKey : "id", pIdKey : "pId", rootPId : -1} }, check: { enable: true } }; //每次加载节点触发的方法 function onAsyncSuccess(event, treeId, treeNode, msg) { //递归展开子节点 if(treeNode != undefined){ expandNodes(treeNode.children, "tree"); } } //递归展开子节点 function expandNodes(nodes, treeId) { if (!nodes) return; var zTree = $.fn.zTree.getZTreeObj(treeId); for (var i=0, l=nodes.length; i<l; i++) { zTree.expandNode(nodes[i], true, false, false); if (nodes[i].isParent && nodes[i].zAsync) { expandNodes(nodes[i].children, treeId); } } } </script>