zTree异步生成数据时无法获取到子节点的选中状态

  最近在项目中遇到一个问题,需求如下:

根据选中不同的人员(ID)向后台发送ajax请求,通过返回的数据来生成该人员的权限访问树,该树目录最少为3级目录,在生成的时候会自动勾选上次保存过的选中状态,点击保存后会将选中状态发送给后端用于保存。(zTree的api参考网站http://www.ztree.me/v3/api.php

遇到的bug:

用户必须再次点击已选中的根目录,并重新选中一次才能在保存的时候将其根目录及所有选中的子节点ID号提供给后端,如果用户不做任何操作直接点击保存,则只能获取到根目录的ID号,无法获取其下所有子目录和节点的ID号。

原因分析:

由于树的生成采用的是异步加载方式,即一开始只生成所有的根目录,用户必须点击某一条根目录展开才会生成其下的子目录或子节点。这样可以减少初步加载时的响应时间,但是如果用户不去点击展开,那么系统默认的是没有子节点的,因此在点击保存时只能获得选中的根目录ID号。

解决方式:

在zTree的setting设置中将生成树时的回调函数里添加zTree.expandAll(false)(展开或折叠所有的节点树)。这样插件就会遍历生成所有的节点,并根据保存的选中ID来将对于的节点勾选。

callback : {//控制插件中所有的回调函数触发
            onClick : zTreeOnClick,//点击时的回调函数
            onNodeCreated: zTreeOnNodeCreated,//这是节点生成时的回调函数
            onAsyncSuccess:showTree//异步加载成功完成后的回调函数
            
        }
//其方法为根据data返回的选中ID来将对应的节点勾选
function zTreeOnNodeCreated(event, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("tree");
        $.post("renyxx/getQuanx",{id:$("#renyxxb_id").val()},function(data){
            for(var i = 0;i < data[0].length;i++){
                if(data[0][i]==treeNode.id){
                    treeNode.checked = true;
                    //zTree.expandAll(false);
                    zTree.updateNode(treeNode);
                }
            }
        },"json");
        zTree.expandAll(false);//加入这行代码后,其就会在生成每一个根目录时自动遍历其下的所有子目录或节点
    }

大家可以在回调函数中加入console来看一下插件生成时的运行顺序,并不是一次生成所有的根目录,而是一个个的生成。

另外,这样生成的树只有最开始的一个根目录,很难看,一般都会要求至少展开一级,因此可以在回调函数中添加onAsyncSuccess,在异步加载完成时会执行如下方法

function showTree(event, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("tree");
        var tree=zTree.getNodeByTId("tree_1");
        zTree.expandNode(tree,true);//展开指定的根目录
    }
原文地址:https://www.cnblogs.com/weblv/p/5156921.html