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依赖包。
看一下官方文档:
可以看到,zTree的节点属性和方法,zTree对象的配置和方法,前面都清楚的标注着依赖的JS,只有引入依赖,功能才能正常实现,使用了zTree也挺久了,竟然还没有注意到这个问题,之后使用其他的资源一定要把文档给看明白弄清楚。