Home >Web Front-end >JS Tutorial >zTree loads all nodes asynchronously

zTree loads all nodes asynchronously

巴扎黑
巴扎黑Original
2016-11-25 11:10:351858browse

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":&#39;${sysRole.srId}&#39;}  
        },  
        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>


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn