zTree异步加载数据，默认展开全部节点

浅浅的花香味﹌ 2022-06-16 08:36 1712阅读 0赞

异步加载Tree 想要默认展开全部节点，使用普通的方法是不行的。

例如:

$(document).ready(function(){
                $.fn.zTree.init($("#areaTree2"), setting3, zNodes3);   
                var treeObj = $.fn.zTree.getZTreeObj("areaTree2");  //得到该tree
                var node = treeObj.getNodeByTId("areaTree2_1");  //选中第一个节点
                treeObj.expandNode(node, true, false, true);  //打开节点 ，第一个参数表示哪个节点，第二个参数表示展开还是关闭，第三个参数表示 是否打开全部子孙节点 
        });

这样使用 expandNode 方法是不能展开异步加载的数据的。

官方demo 中 有一个 异步展开全部节点的 页面 在  \\zTree-zTree\_v3-2ffc0fa\\demo\\cn\\super\\asyncForAll.html 这个页面

但是他给定的方法不一定适合自己  ，所以我做了一些优化，删除了对自己显示数据没用的方法。

<input type="button" value="为该角色添加功能" οnclick="addFunction()">
          <ul id="areaTree4" class="ztree"></ul>
    </div>
     <script type="text/javascript">
     var setting2 = {
             check: {
                    enable: true
                },
             async: { //异步
                    enable: true,
                    url: getUrl
             },
              data: {//数据
                  key: {
                      name: "functionName"          //name
                  },
                 simpleData: {
                         enable: true,
                         idKey: "functionId",       //id
                         pIdKey: "pid"         //pid
                     }
               },
               callback: {    //回调函数，实现展开功能
                    beforeAsync: beforeAsync,
                    onAsyncSuccess: onAsyncSuccess,
                    onAsyncError: onAsyncError
                }
               
     }
         function getUrl(treeId, treeNode){  //默认注入两个参数，第一个是当前树的名字，第二个是选中的节点
             return "/roleProject/FunctionServlet?dir=getFunctionTree&functionId="+treeNode.functionId+"&roleNo="+key;
         }
         
         function filter(treeId, parentNode, childNodes) {
                if (!childNodes) return null;
                for (var i=0, l=childNodes.length; i<l; i++) {
                    childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
                }
                return childNodes;
            }
            function beforeAsync() {
                curAsyncCount++;
            }
            
            function onAsyncSuccess(event, treeId, treeNode, msg) {
                curAsyncCount--;
                if (curStatus == "expand") {
                    expandNodes(treeNode.children);
                } else if (curStatus == "async") {
                    asyncNodes(treeNode.children);
                }
                if (curAsyncCount <= 0) {
                    if (curStatus != "init" && curStatus != "") {
                        asyncForAll = true;
                    }
                    curStatus = "";
                }
            }
            function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
                curAsyncCount--;
                if (curAsyncCount <= 0) {
                    curStatus = "";
                    if (treeNode!=null) asyncForAll = true;
                }
            }
            var curStatus = "init", curAsyncCount = 0, asyncForAll = false,
            goAsync = false;
            function expandAll() {
            
                var zTree = $.fn.zTree.getZTreeObj("areaTree4");
                if (asyncForAll) {
                    
                    zTree.expandAll(true);
                } else {
                    expandNodes(zTree.getNodes());
                    if (!goAsync) {
        
                        curStatus = "";
                    }
                }
            }
            function expandNodes(nodes) {
                if (!nodes) return;
                curStatus = "expand";
                var zTree = $.fn.zTree.getZTreeObj("areaTree4");  
                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);
                    } else {
                        goAsync = true;
                    }
                }
            }
            
            
         
         var zNodes2=[{functionId:0,functionName:"功能",pid:-1,isParent:true,checked:true}];  
        $(document).ready(function(){
                  $.fn.zTree.init($("#areaTree4"), setting2, zNodes2);
                 expandAll();  //调用写好的展开全部节点方法
            });

这段代码 有很高的复用性，只需要传过来的Json对象 正确，使用zTree 完全不需要做改动，即可使用，只要将你自己的属性字段修改就可以了。