angular中使用z-tree初始化之后,展开根节点不生效

今天解决了一个非常尴尬的问题,纠结了整整半个月,最后还是被自己没有仔细看文档给打败了。
具体的事情是这样的,我们的需求是实现可复选的树结构,因为要适配IE8,纠结了很久之后最后决定使用z-tree,适配性又高速度又快。数据是后台接口动态获取的,利用取出来的数据进行树的初始化,初始化结束后默认展开根节点,再然后问题就来了,不管怎么弄根节点数据就是展不开,然后就开始了我的漫长调查过程…
下面是我的节点展开代码

FormioUtils.getDataFromUrl(
    Formio.getBaseUrl() + initPath,
    {},
    'post',
    ''
).then(function (res) {
    if(res.errorcode == "0"){
        // 初始化ztree组件
        var zTreeObj = $.fn.zTree.init($("#depTree"), setting, res.data);
           zTreeObj.expandNode(res.data[0],true, false, false);
    } else {
        FormioUtils.updateMessage({
            type: 'warning',
            text: res.msg,
            time: 2000
        }, Messager);
    }
});

整个调查问题的辛酸历程

  1. 最开始怀疑是参数配置问题,然后各种更改配置的true,false,然而没有任何作用
  2. 怀疑拼写错误,又从官网上重新copy了一遍源码,发现没有任何变化
  3. 尝试使用expandAll方法,发现可行,怀疑是expandNode方法使用的问题,
  4. 尝试在单击节点数据时使用expandNode方法测试无问题,然后我就纠结是不是树组件初始化没有结束我就展开节点,因此才不执行失效的,所以就在初始化树结构之后加了延迟,然后实测失败…
  5. 然后该问题就搁置了…
  6. 经过了半个月的主体功能开发结束之后,我回首又看这个问题,在看完官方文档上了个厕所回来之后,茅塞顿开…
  7. 下面是官方文档说明,问题点我重点圈出来了,告诫自己以后一定要认真看文档,然后去个厕所,问题可能就解决了~~
    angular中使用z-tree初始化之后,展开根节点不生效_第1张图片
  8. 问题原因分析:
    官方其实有红字标明【请通过 zTree 对象执行此方法】,所以从后台取出来的数据不能直接使用,需要先通过主key从树结构中取出当前节点数据,然后再执行expandNode方法就可以了。
    下面是修改后的代码!!!
FormioUtils.getDataFromUrl(
    Formio.getBaseUrl() + initPath,
    {},
    'post',
    ''
).then(function (res) {
    if(res.errorcode == "0"){
        // 初始化ztree组件
        var zTreeObj = $.fn.zTree.init($("#depTree"), setting, res.data);
        var node = zTreeObj.getNodeByParam("id",res.data[0].id,null);
           zTreeObj.expandNode(node,true, false, false);
    } else {
        FormioUtils.updateMessage({
            type: 'warning',
            text: res.msg,
            time: 2000
        }, Messager);
    }
});

你可能感兴趣的:(JavaScript)