近来在开发过程中我使用了ztree插件,在使用过程中掉进了一些坑里,有些用了很大的劲才爬出来。在此记录下来,以供以后查阅。
1.关于官方demo的查看
官方的demo只有一些简要的信息,当我们实际使用时很容易摸不着头脑。事实上在我们下载的ztree压缩包里,有一个demo文件夹,其展示效果与demo界面相对应。通过查看相应界面的源码,我们可以轻易实现demo所展示的效果
2.关于显示自定义图标
根据官方的demo文档,我写出来的程序如下:
然而在页面中出现了很诡异的状况,即将鼠标放到节点上可能触发两次addHoverDom事件,离开节点又可能触发一次addHoverDom
但是官方文档和网上其他人的显示都很正常啊,后来对照着文档一行行的看,终于发现问题在哪了,问题出在这一行:
此处条件判断的id与我插入文本的id并不一致,因此会显示这样的bug。此处我们可以看出,浏览器的onmouseover与api的显示并不一致,因此需要加入额外的条件判断来阻止图标的多次添加。
3.关于edit的回调函数
现在我想给rename功能加一个判定条件:即兄弟节点的名字不能相同。然后根据demo,我加了一个beforeRename的回调函数:
运行之后,我的浏览器就卡死了。根据控制台输出显示,该函数一直在被反复调用,后来经过调试,发现cancelEditName()函数会触发beforeRename事件。但demo不会因为这个原因卡死啊,然后,进一步分析是我的判断条件的原因,父节点的children并不是随着子节点的变化而变化的,而是一个常量:
这就导致我的判断条件总会通过,明白原因了问题自然很好解决,只要保证由cancelEditName()函数触发的事件不能通过判断即可,而该函数触发的事件会使isCancel转变为true,故代码如下: