Referenzierter Header-Dateicode
Baumträgercode
<div style="border:solid 1px #a7b5bc; float:left; width:100%; height:100%; overflow-y:auto;"> <ul id="tree" class="ztree"></ul> </div>
Code des Javascript-Teils (der Schwerpunkt dieses Artikels)
<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>