ztree父子联动_单选等

最新推荐文章于 2020-12-05 09:10:18 发布

转载最新推荐文章于 2020-12-05 09:10:18 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://blog.csdn.net/sinat_32034679/article/details/72461355

本文介绍了zTree树状控件的两种实用配置方法：一是如何通过简单的设置实现树状结构的单选功能，二是如何取消父子节点之间的关联，使节点独立选择。这两种配置能够帮助开发者更灵活地控制树状结构的行为。

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

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

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

即可。

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

check: {
            enable: true,
            chkboxType:  { "Y": "", "N": "" }
        }
1
2
3
4

即可。

附上函数的参数说明：

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

        <div class="person-messagebox">
            <div class="left-message"><a href="https://blog.csdn.net/sinat_32034679">
                <img src="https://profile.csdnimg.cn/E/5/3/3_sinat_32034679" class="avatar_pic" username="sinat_32034679">
            </a></div>
            <div class="middle-message">
                                    <div class="title"><span class="tit "><a href="https://blog.csdn.net/sinat_32034679" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;ab&quot;:&quot;new&quot;}" target="_blank">may夏至未至</a></span>
                    <!-- 等级，level -->
                                            <img class="identity-icon" src="https://csdnimg.cn/identity/blog6.png">                                            </div>
                <div class="text"><span>原创文章 108</span><span>获赞 110</span><span>访问量 62万+</span></div>
            </div>
                            <div class="right-message">
                                        <a class="btn btn-sm  bt-button personal-watch" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;,&quot;ab&quot;:&quot;new&quot;,&quot;extend1&quot;:&quot;个人信息未关注&quot;}">关注</a>
                                                            <a href="https://im.csdn.net/im/main.html?userName=sinat_32034679" target="_blank" class="btn btn-sm bt-button personal-letter">私信
                    </a>
                                </div>
                        </div>
                    
    </div>