关于jQuery插件ztree的一些使用心得

近来在开发过程中我使用了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，故代码如下：