ztree——操作节点

最新推荐文章于 2023-11-17 15:05:05 发布

贝塔贝卡贝

最新推荐文章于 2023-11-17 15:05:05 发布

阅读量1.5k

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/Kiruthika/article/details/129233683

版权

需求

1.点击鼠标右键操作实现以下操作：

1.1选中当前节点

1.2选中直接子节点

1.3选中所有子节点

1.4不选中当前节点

1.5不选中直接子节点

1.6不选中所有子节点

在这里插入图片描述

2.点击ctrl键+点击勾选框，实现当前节点选中/不选中操作

在这里插入图片描述

<!DOCTYPE html>
<HTML>

<HEAD>
	<TITLE> ZTREE DEMO - getChangeCheckedNodes / getCheckedNodes</TITLE>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<!-- <link rel="stylesheet" href="../../../css/demo.css" type="text/css"> -->
	<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="../../../js/jquery-1.4.4.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>
	<style>
		html,
		body {
			width: 100%;
			height: 100%;
		}

		.zTreeWrapper {
			width: 20%;
		}

		#operateNodeWrapper {
			position: fixed;
			display: none;
			background-color: aquamarine;
		}

		#operateNodeWrapper * {
			font-size: 12px;
		}

		#operateNodeWrapper li {
			line-height: 2;
		}

		#operateNodeWrapper li:hover {
			background-color: blue;
			color: #fff;
			cursor: pointer;
		}
	</style>


</HEAD>

<BODY>
	<div class="zTreeWrapper">
		<ul id="treeDemo" class="ztree"></ul>
	</div>

	<ul id="operateNodeWrapper">
		<li data-id="only">选择当前节点</li>
		<li data-id="next">选择直接节点</li>
		<li data-id="all">选择所有子节点</li>
		<li data-id="no-only">不选择当前节点</li>
		<li data-id="no-next">不选择直接节点</li>
		<li data-id="no-all">不选择所有子节点</li>
	</ul>

	<SCRIPT type="text/javascript">
		var setting = {
			view: {
				selectedMulti: false
			},
			check: {
				enable: true,
				chkStyle: "checkbox",
				chkboxType: { "Y": "s", "N": "ps" }
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeCheck: zTreeBeforeCheck,
				onCheck: zTreeOnCheck,
				onRightClick: onRightClick
			}
		};

		var zNodes = [
			{ id: 1, pId: 0, name: "随意勾选 1-1" },
			{ id: 11, pId: 1, name: "随意勾选 1-1-1" },
			{ id: 111, pId: 11, name: "随意勾选 1-1-1" },
			{ id: 1111, pId: 111, name: "随意勾选 1-1-1" },
			{ id: 12, pId: 1, name: "随意勾选 1-1-2" },
			{ id: 13, pId: 1, name: "随意勾选 1-1-3" },
			{ id: 2, pId: 0, name: "随意勾选  1-2" },
			{ id: 21, pId: 2, name: "随意勾选 1-2-1" },
			{ id: 22, pId: 2, name: "随意勾选 1-2-2" },
			{ id: 211, pId: 21, name: "随意勾选 1-2-2" },
			{ id: 221, pId: 22, name: "随意勾选 1-2-2" },
		];

		let curTreeNode;
		$(document).ready(function () {
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		})

		// 点击勾选框前
		function zTreeBeforeCheck(treeId, treeNode){
			let treeObj = $.fn.zTree.getZTreeObj("treeDemo");
			if (event && (event.ctrlKey || (event.srcEvent &&event.srcEvent.ctrlKey))){
				treeObj.setting.check.chkboxType = { "Y" : "", "N" : "" };
			}else{
				treeObj.setting.check.chkboxType= { "Y": "s", "N": "ps" }
			}
		}

		// check事件
		function zTreeOnCheck(event, treeId, treeNode) {
			let treeObj = $.fn.zTree.getZTreeObj("treeDemo");
			if (event &&  (event.ctrlKey || event.srcEvent.ctrlKey)) {
				treeObj.checkNode(treeNode, treeNode.checked, false)
			}else{
				treeObj.checkNode(treeNode, treeNode.checked, false)
			}
		}

		// 鼠标右键事件
		function onRightClick(event, treeId, treeNode) {
			curTreeNode = treeNode;
			$('#operateNodeWrapper').css({ top: `${event.clientY}px`, left: `${event.clientX}px`, display: 'block' });
		}

		let operateFn = {
			only: treeObj => operateOnly(treeObj, 'only'),
			'no-only': treeObj => operateOnly(treeObj, 'no-only'),
			next: treeObj => operateNext(treeObj, 'next'),
			'no-next': treeObj => operateNext(treeObj, 'no-next'),
			all: treeObj => operateAll(treeObj, 'all'),
			'no-all': treeObj => operateAll(treeObj, 'no-all'),
		}

		// 操作节点
		$('#operateNodeWrapper').delegate('li', 'click', function () {
			const curOperateType = $(this)[0].dataset.id;
			$('#operateNodeWrapper').hide();
			let treeObj = $.fn.zTree.getZTreeObj("treeDemo");
			operateFn[curOperateType](treeObj);
		})

		// 选中/不选中当前节点
		function operateOnly(treeObj, type) {
			treeObj.checkNode(curTreeNode, type === 'only', false)
		}

		// 选中/不选中直接子节点
		function operateNext(treeObj, type) {
			let curChildrenlist = treeObj.getNodeByTId(curTreeNode.tId)
			const nextList = curChildrenlist.children.filter(item => item.pId === curTreeNode.id);
			nextList.forEach(item => {
				treeObj.checkNode(item, type === 'next', false);
			})
		}

		// 选中/不选中所有子节点
		function operateAll(treeObj, type) {
			let curChildrenlist = treeObj.getNodeByTId(curTreeNode.tId)
			const allSonList = treeObj.transformToArray(curChildrenlist.children);
			allSonList.forEach(item => {
				treeObj.checkNode(item, type === 'all', false);
			})
		}

	</SCRIPT>
</BODY>

</HTML>