zTree：实现单选/取消父子关联等

最新推荐文章于 2021-12-23 17:06:04 发布

原创最新推荐文章于 2021-12-23 17:06:04 发布 · 2.4w 阅读

CC 4.0 BY-SA版权

文章标签：

21 篇文章

订阅专栏

本文介绍了如何使用zTree控件实现单选功能，并详细讲解了如何取消父子节点的关联。通过在settings中设置相关参数，可以轻松实现单选效果以及调整checkbox的行为。

最近工作中碰巧有用到zTree树状控件，在这里记录下遇到的问题。

一.zTree实现单选
之前为了设置单选，看了不少材料，但是大部分都比较复杂。有的还只能实现某个父级节点下子节点单选。但是整棵树中，实际上是多选。查找了zTree API后，找到了一个简单的方法：
在settings中设置：

check: {
            enable: true,
            chkStyle: "radio",  //单选框
            radioType: "all"   //对所有节点设置单选
        }

即可。

二.zTree取消父子关联
对于zTree父子关联关系的设置，zTree里面自带了一个chkboxType函数。取消父子关联，只需要在初始化树的时候，在settings里面设置：

check: {
            enable: true,
            chkboxType:  { "Y": "", "N": "" }
        }

即可。

附上函数的参数说明：

chkboxType: { “Y”: “ps”, “N”: “ps” }
Y 属性定义 checkbox 被勾选后的情况；
N 属性定义 checkbox 取消勾选后的情况；
“p” 表示操作会影响父级节点；
“s” 表示操作会影响子级节点。
请注意大小写，不要改变

4 条评论