zTree 多个excheck跟随第一个excheck同步变化demo

最新推荐文章于 2021-12-22 11:29:42 发布

一个钝角

最新推荐文章于 2021-12-22 11:29:42 发布

阅读量68

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_43859180/article/details/111181522

版权

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
		<script type="text/javascript" src="zTree_v3/js/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="zTree_v3/js/jquery.ztree.all.min.js"></script>
		<!--
		     其他两种css风格样式
		     <link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
		     <link rel="stylesheet" href="ztree/css/awesomeStyle/awesome.css" rel="stylesheet" type="text/css" />
		      -->

	</head>
	<body>
		<div style="background-color: silver;">
			<ul id="treeDemo1" class="ztree"></ul>
		</div>
		<div style="background-color: powderblue;">
			<ul id="treeDemo2" class="ztree"></ul>
		</div>
		<div style="background-color: lavender;">
			<ul id="treeDemo3" class="ztree"></ul>
		</div>
		<script>
			var setting1 = {
				check: {
					enable: true, // true 表示 开启 异步加载模式
					chkboxType: {
						"Y": "p",
						"N": "s"
					}, //被勾选时关联父，取消勾选时关联子
				},
				data: {
					simpleData: {
						enable: true
					}
				},
				callback: {
					onCheck: onCheck
				}
			};

			var setting2 = {
				check: {
					enable: true, // true 表示 开启 异步加载模式
					chkboxType: {
						"Y": "p",
						"N": "s"
					}, //被勾选时关联父，取消勾选时关联子
				},
				data: {
					simpleData: {
						enable: true
					}
				},

			};

			var setting3 = {
				check: {
					enable: true, // true 表示 开启 异步加载模式
					chkboxType: {
						"Y": "p",
						"N": "s"
					}, //被勾选时关联父，取消勾选时关联子
				},
				data: {
					simpleData: {
						enable: true
					}
				},

			};

			var zNodes = [{
					id: 1,
					pId: 0,
					name: "随意勾选 1",
					open: true
				},
				{
					id: 11,
					pId: 1,
					name: "随意勾选 1-1",
					open: true
				},
				{
					id: 111,
					pId: 11,
					name: "随意勾选 1-1-1"
				},
				{
					id: 112,
					pId: 11,
					name: "随意勾选 1-1-2"
				},
				{
					id: 12,
					pId: 1,
					name: "随意勾选 1-2",
					open: true
				},
				{
					id: 121,
					pId: 12,
					name: "随意勾选 1-2-1"
				},
				{
					id: 122,
					pId: 12,
					name: "随意勾选 1-2-2"
				},
				{
					id: 2,
					pId: 0,
					name: "随意勾选 2",
					checked: true,
					open: true
				},
				{
					id: 21,
					pId: 2,
					name: "随意勾选 2-1"
				},
				{
					id: 22,
					pId: 2,
					name: "随意勾选 2-2",
					open: true
				},
				{
					id: 221,
					pId: 22,
					name: "随意勾选 2-2-1",
					checked: true
				},
				{
					id: 222,
					pId: 22,
					name: "随意勾选 2-2-2"
				},
				{
					id: 23,
					pId: 2,
					name: "随意勾选 2-3"
				}
			];

			zTreeObj = $.fn.zTree.init($("#treeDemo1"), setting1, zNodes); //初始化树
			zTreeObj.expandAll(true); //true 节点全部展开、false节点收缩
			// zTreeObj.checkAllNodes(true);

			zTreeObj = $.fn.zTree.init($("#treeDemo2"), setting2, zNodes); //初始化树
			zTreeObj = $.fn.zTree.init($("#treeDemo3"), setting3, zNodes); //初始化树

			var v = '';
			var idlist = [];

			function onCheck(e, treeId, treeNode) {
				idlist = [];
				var treeObj = $.fn.zTree.getZTreeObj("treeDemo1"),
					nodes = treeObj.getCheckedNodes(true);
				for (let i = 0; i < nodes.length; i++) {
					v += nodes[i].name + ",";
					// alert(nodes[i].id); //获取选中节点的值
					idlist = idlist.concat(nodes[i].id)
				}
				// console.log(v)
				console.log(idlist)
				AssignCheck();

			}
			//联动改变
			function AssignCheck() {
				CancelAllNodes()
				var treeObj2 = $.fn.zTree.getZTreeObj("treeDemo2");
				var treeObj3 = $.fn.zTree.getZTreeObj("treeDemo3");
				for (let e in idlist) {
					treeObj2.checkNode(treeObj2.getNodeByParam("id", idlist[e], null), true, true, false);
					treeObj3.checkNode(treeObj3.getNodeByParam("id", idlist[e], null), true, true, false);
				}
			}

			//全取消
			function CancelAllNodes() {
				var treeObj2 = $.fn.zTree.getZTreeObj("treeDemo2");
				var treeObj3 = $.fn.zTree.getZTreeObj("treeDemo3");
				treeObj2.checkAllNodes(false);
				treeObj3.checkAllNodes(false);
			}
		</script>
	</body>
</html>

一个钝角

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
zTree 多个excheck跟随第一个excheck同步变化demo

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="zTree_v3/css/zTreeStyle/zTreeStyle..
复制链接

扫一扫