zTree 实现子节点复选框,父节点无复选框/取消父子关联

最近工作中碰巧有用到zTree树状控件,在这里记录下遇到的问题。先上个图看下效果:

ztree默认父节点与子节点是有关联的,如果设置父节点无复选框,然后子节点复选框就会出现都不显示复选框的情况,最后查阅了大量资料,相办法取消父子间的关联,对于zTree父子关联关系的设置,zTree里面自带了一个chkboxType函数。取消父子关联,只需要在初始化树的时候,在settings里面设置:

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

附上函数的参数说明:

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

最后附上这个效果的源码小伙伴们参考下

<!DOCTYPE html>
<HTML>
<HEAD>
	<TITLE>二宝君的 ZTREE DEMO - </TITLE>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="css/bootstrapStyle/bootstrapStyle.css" type="text/css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="js/jquery.ztree.excheck.js"></script>
	<script type="text/javascript" src="js/jquery.ztree.exedit.js"></script>
	<SCRIPT type="text/javascript">
		<!--
		var setting = {
			check: {
				enable: true,
				nocheckInherit: false,
				chkboxType: { "Y": "", "N": ""}
			},
			data: {
				simpleData: {
					enable: true
				}
			}
		};
		var zNodes =[
			{ id:1, pId:0, name:"随意勾选 1", nocheck:true,open:true},
			{ id:11, pId:1, name:"随意勾选 1-1", open:true,nocheck:true},
			{ id:111, pId:11, name:"无 checkbox 1-1-1",nocheck:false},
			{ id:112, pId:11, name:"随意勾选 1-1-2",nocheck:false},
			{ id:12, pId:1, name:"无 checkbox 1-2", open:true,nocheck:true},
			{ id:121, pId:12, name:"无 checkbox 1-2-1",nocheck:false},
			{ id:122, pId:12, name:"无 checkbox 1-2-2",nocheck:false}
		];
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});
		//-->
	</SCRIPT>
</HEAD>

<BODY>
<div class="content_wrap">
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
</div>
</BODY>
</HTML>

 

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注