关于zTree中节点无法隐藏的问题

àì夳堔傛蜴生んèń 2022-05-14 15:14 153阅读 0赞

zTree是一个基于jQuery实现的"树插件"，性能优异，支持数据同步加载和异步加载，配置灵活，功能较多，目前zTree开源项目放在码云上管理维护。在自己的项目开发过程中，层次结构类型的数据还是挺多的，zTree上手还算简单方便，但还是不停的遇到问题，只能看它的文档慢慢解决。

最近遇到关于使用到zTree的业务场景大致是这样，需要构建一个带勾选框的权限树，可以通过勾选操作增加或者去除用户的某项权限，然后在查看界面查看用户当前已有的权限。也就是说要隐藏没有勾选的权限节点，显示勾选的权限节点。

zTree节点的隐藏有三种实现方案  
1.在json数据中需要隐藏的节点中加入isHidden属性，并且设值为true。默认值是false， 也就是节点默认显示。  
2.使用zTree对象的hideNodes()或hideNode()方法隐藏需要隐藏的节点。  
3.使用zTree对象的相应方法进行节点属性查询，节点关键字模糊查询，或自定义规则过滤节点，实现节点的显示和隐藏。

方案1和2是相对简单的，也可以实现上述业务需求，但是两者有区别，直接在节点中加入isHidden=true，必须在zTree初始化之前实现，该节点才会被自动隐藏，如果zTree已经执行了加载的方法，那么之后要修改此属性，只能使用方案2， hideNode() / hideNodes() / showNode() / showNodes() 方法可以修改节点的isHidden属性，决定节点显示或隐藏。

在实现节点隐藏功能时，试过直接在节点中加入isHidden属性，发现没有并作用，以为是zTree树已经加载，然后又试用了方案2，发现还是无法实现节点隐藏。之后又用到了zTree的开源代码中的demo反复尝试，又详细看了官方示例和文档，终于发现了犯了一个非常麻瓜的错误，没有引用isHidden的jquery.ztree.exhide.min.js依赖包。

看一下官方文档：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cGVyeGlhb2xvbmcxMjM_size_27_color_FFFFFF_t_70]  
可以看到，zTree的节点属性和方法，zTree对象的配置和方法，前面都清楚的标注着依赖的JS，只有引入依赖，功能才能正常实现，使用了zTree也挺久了，竟然还没有注意到这个问题，之后使用其他的资源一定要把文档给看明白弄清楚。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cGVyeGlhb2xvbmcxMjM_size_27_color_FFFFFF_t_70]: /images/20220504/85f2e00239e849c5b12ae8cf04094932.png