最近工作中碰巧有用到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="{"mod":"popu_379","ab":"new"}" 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="{"mod":"popu_379","ab":"new","extend1":"个人信息未关注"}">关注</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>