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

Posted 2020-06-08

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

根据选中不同的人员（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);//展开指定的根目录
    }