基于cookie实现ztree树刷新后，展开状态不变

最新推荐文章于 2024-08-21 16:19:19 发布
最新推荐文章于 2024-08-21 16:19:19 发布
阅读量6k 收藏 2
点赞数
文章标签： ztree
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzzz3621/article/details/40617897
版权

这种方案是基于cookie实现的，保存的是节点的id，这要求id本身不能重复，比较适用于同一张表的数据，比如有层次结构的分类等等



源码：

<!DOCTYPE html>
<HTML>
<HEAD>
	<TITLE> ZTREE DEMO - beforeDrag / onDrag / beforeDrop / onDrop</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.all-3.5.js"></script>
	<script type="text/javascript" src="../../../js/jquery.cookie.js"></script>
	<SCRIPT type="text/javascript">
		<!--
		var zTree, rMenu, selectNode;
		
		var setting = {
			edit: {
				drag: {
					autoExpandTrigger: true,
					prev: dropPrev,
					inner: dropInner,
					next: dropNext
				},
				enable: true,
				showRemoveBtn: false,
				showRenameBtn: false
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				onRightClick: onRightClick,
				onExpand: onExpand,
				onCollapse: onCollapse,
				beforeDrag: beforeDrag,
				beforeDrop: beforeDrop,
				beforeDragOpen: beforeDragOpen
			}
		};

		var zNodes =[
			{ id:'40', pId:'', name:"公司", root:true, open:open, icon:"../../../css/zTreeStyle/img/diy/1_open.png"},
			{ id:'1', pId:'40', name:"部门1", dep:true, open:false, icon:"../../../css/zTreeStyle/img/diy/1_open.png"},
			{ id:'11', pId:'1', name:"技术员", pos:true, open:false, drag:false, icon:"../../../css/zTreeStyle/img/diy/2.png"},
			{ id:'12', pId:'1', name:"数据员", pos:true, open:false, drag:false, icon:"../../../css/zTreeStyle/img/diy/2.png"},
			{ id:'13', pId:'1', name:"安全员", pos:true, open:false, drag:false, icon:"../../../css/zTreeStyle/img/diy/2.png"},
			{ id:'14', pId:'11', name:"张三1", emp:true, dropInner:false, icon:"../../../css/zTreeStyle/img/diy/2.png"},
			{ id:'15', pId:'11', name:"张三2", emp:true, dropInner:false, icon:"../../../css/zTreeStyle/img/diy/2.png"},
			{ id:'16', pId:'11', name:"张三3", emp:true, dropInner:false, icon:"../../../css/zTreeStyle/img/diy/2.png"},
			{ id:'17', pId:'12', name:"张三1", emp:true, dropInner:false, icon:"../../../css/zTreeStyle/img/diy/2.png"},
			{ id:'18', pId:'12', name:"张三2", emp:true, dropInner:false, icon:"../../../css/zTreeStyle/img/diy/2.png"},
			{ id:'19', pId:'12', name:"张三3", emp:true, dropInner:false, icon:"../../../css/zTreeStyle/img/diy/2.png"},
			{ id:'2', pId:'40', name:"部门2", dep:true, open:false, icon:"../../../css/zTreeStyle/img/diy/1_open.png"},
			{ id:'21', pId:'2', name:"行政专员", pos:true, drag:false, icon:"../../../css/zTreeStyle/img/diy/2.png"},
			{ id:'22', pId:'2', name:"行政主管", pos:true, drag:false, icon:"../../../css/zTreeStyle/img/diy/2.png"},
			{ id:'23', pId:'2', name:"人事专员", pos:true, drag:false, icon:"../../../css/zTreeStyle/img/diy/2.png"}
		];

		function dropPrev(treeId, nodes, targetNode) {
			return false;
		}
		function dropInner(treeId, nodes, targetNode) {
			if (targetNode && targetNode.dropInner === false) {
				return false;
			} else {
				for (var i=0,l=curDragNodes.length; i<l; i++) {
					if (!targetNode && curDragNodes[i].dropRoot === false) {
						return false;
					} else if (curDragNodes[i].parentTId && curDragNodes[i].getParentNode() !== targetNode && curDragNodes[i].getParentNode().childOuter === false) {
						return false;
					}else if(curDragNodes[i].emp && !targetNode.pos){
						return false;
					}else if(curDragNodes[i].dep && !targetNode.dep){
						return false;
					}
				}
			}
			return true;
		}
		function dropNext(treeId, nodes, targetNode) {
			return false;
		}

		var curDragNodes, autoExpandNode;
		function beforeDrag(treeId, treeNodes) {
			for (var i=0, l=treeNodes.length; i<l; i++) {
				console.log("beforeDrag" + treeNodes[i].parentTId);
				if (treeNodes[i].drag === false) {
					curDragNodes = null;
					return false;
				} else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) {
					curDragNodes = null;
					return false;
				}
			}
			curDragNodes = treeNodes;
			return true;
		}
		function beforeDragOpen(treeId, treeNode) {
			autoExpandNode = treeNode;
			return true;
		}
		function beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {
			if(!targetNode){
				return false;
			}
			return true;
		}
		
		function onRightClick(event, treeId, treeNode) {
			selectNode = treeNode;
			if(treeNode && treeNode.root){
				zTree.selectNode(treeNode);
				showRMenu("root", event.clientX, event.clientY);
			}
			else if (treeNode && treeNode.dep) {
				zTree.selectNode(treeNode);
				showRMenu("dep", event.clientX, event.clientY);
			}
			else if (treeNode && treeNode.pos) {
				zTree.selectNode(treeNode);
				showRMenu("pos", event.clientX, event.clientY);
			}
			else if(treeNode && treeNode.emp){
				zTree.selectNode(treeNode);
				showRMenu("emp", event.clientX, event.clientY);
			}
		}

		function onExpand(event, treeId, treeNode){
			var cookie = $.cookie("z_tree");
			
			var z_tree = null;
			if(cookie){
				z_tree = JSON.parse(cookie);
			}
			
			if(!z_tree){
				z_tree = new Array();
			}
			if(jQuery.inArray(treeNode.id, z_tree)<0){
				z_tree.push(treeNode.id);
			}
			
			
			$.cookie("z_tree", JSON.stringify(z_tree))
		}
		
		function onCollapse(event, treeId, treeNode){
			var cookie = $.cookie("z_tree");
			
			var z_tree = null;
			if(cookie){
				z_tree = JSON.parse(cookie);
			}
			
			if(!z_tree){
				z_tree = new Array();
			}
			var index = jQuery.inArray(treeNode.id, z_tree);
			
			z_tree.splice(index, 1);
			
			$.cookie("z_tree", JSON.stringify(z_tree))
		}
		
		function showRMenu(type, x, y) {
			$("#rMenu ul").show();
			if (type=="root") {
				$("#m_addDep").show();
				$("#m_addPos").hide();
				$("#m_addEmp").hide();
				$("#m_delPos").hide();
				$("#m_delDep").hide();
				$("#m_delEmp").hide();
			} else if(type=="dep"){
				$("#m_addDep").show();
				$("#m_addPos").show();
				$("#m_addEmp").hide();
				$("#m_delPos").hide();
				$("#m_delDep").show();
				$("#m_delEmp").hide();
			}else if(type=="pos"){
				$("#m_addDep").hide();
				$("#m_addPos").hide();
				$("#m_addEmp").show();
				$("#m_delPos").show();
				$("#m_delDep").hide();
				$("#m_delEmp").hide();
			}else if(type=="emp"){
				$("#m_addDep").hide();
				$("#m_addPos").hide();
				$("#m_addEmp").hide();
				$("#m_delPos").hide();
				$("#m_delDep").hide();
				$("#m_delEmp").show();
			}
			rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});

			$("body").bind("mousedown", onBodyMouseDown);
		}
		function hideRMenu() {
			if (rMenu) rMenu.css({"visibility": "hidden"});
			$("body").unbind("mousedown", onBodyMouseDown);
		}
		function onBodyMouseDown(event){
			if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
				rMenu.css({"visibility" : "hidden"});
			}
		}
		var addCount = 1;
		function addDep() {
			hideRMenu();
			var newNode = { name:"增加" + (addCount++), dep:true, icon:"../../../css/zTreeStyle/img/diy/1_open.png"};
			if (zTree.getSelectedNodes()[0]) {
				newNode.checked = zTree.getSelectedNodes()[0].checked;
				zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
			} else {
				zTree.addNodes(null, newNode);
			}
		}
		
		function addPos() {
			hideRMenu();
			var newNode = { name:"增加" + (addCount++), pos:true, icon:"../../../css/zTreeStyle/img/diy/2.png"};
			if (zTree.getSelectedNodes()[0]) {
				newNode.checked = zTree.getSelectedNodes()[0].checked;
				zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
			} else {
				zTree.addNodes(null, newNode);
			}
		}
		
		function addEmp() {
			hideRMenu();
			var newNode = { name:"增加" + (addCount++), emp:true, icon:"../../../css/zTreeStyle/img/diy/2.png"};
			if (zTree.getSelectedNodes()[0]) {
				newNode.checked = zTree.getSelectedNodes()[0].checked;
				zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
			} else {
				zTree.addNodes(null, newNode);
			}
		}		
		
		function removeDep() {
			hideRMenu();
			var nodes = zTree.getSelectedNodes();
			if (nodes && nodes.length>0) {
				if (nodes[0].children && nodes[0].children.length > 0) {
					var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
					if (confirm(msg)==true){
						zTree.removeNode(nodes[0]);
					}
				} else {
					zTree.removeNode(nodes[0]);
				}
			}
		}
		
		function removePos() {
			hideRMenu();
			var nodes = zTree.getSelectedNodes();
			if (nodes && nodes.length>0) {
				if (nodes[0].children && nodes[0].children.length > 0) {
					var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
					if (confirm(msg)==true){
						zTree.removeNode(nodes[0]);
					}
				} else {
					zTree.removeNode(nodes[0]);
				}
			}
		}
		
		function removeEmp() {
			hideRMenu();
			var nodes = zTree.getSelectedNodes();
			if (nodes && nodes.length>0) {
				zTree.removeNode(nodes[0]);
			}
		}
		
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			zTree = $.fn.zTree.getZTreeObj("treeDemo");
			rMenu = $("#rMenu");
			
			var cookie = $.cookie("z_tree");
			if(cookie){
				z_tree = JSON.parse(cookie);
				
				for(var i=0; i< z_tree.length; i++){
					var node = zTree.getNodeByParam('id', z_tree[i])
					zTree.expandNode(node, true)
				}
			}
		});
		//-->
	</SCRIPT>
	<style type="text/css">
		div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}
		div#rMenu ul li{
			margin: 1px 0;
			padding: 0 5px;
			cursor: pointer;
			list-style: none outside none;
			background-color: #DFDFDF;
		}
	</style>
</HEAD>

<BODY>
<div class="content_wrap">
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
</div>
<div id="rMenu">
	<ul>
		<li id="m_addDep" οnclick="addDep();">增加部门</li>
		<li id="m_editDep" οnclick="editDep();">调整部门</li>
		<li id="m_addPos" οnclick="addPos();">增加岗位</li>
		<li id="m_editPos" οnclick="editPos();">调整岗位</li>
		<li id="m_addEmp" οnclick="addEmp();">增加人员</li>
		<li id="m_delPos" οnclick="removePos();">删除岗位</li>
		<li id="m_delDep" οnclick="removeDep();">删除部门</li>
		<li id="m_delEmp" οnclick="removeEmp();">删除人员</li>
	</ul>
</div>
</BODY>
</HTML>


附件

注：需要放到web上才行

demo路径：zTree_v3/demo/cn/core/org.html



逍遥兮容与
关注
Ztree自动展开根节点
qq_32866633的博客
06-27 3185
主要是看ztree的API文档。 异步加载自动展开解决方法如下： 1.设置ztree的加载完成的回调函数: setting = { … callback: { … onAsyncSuccess: zTreeOnAsyncSuccess } }; onAsyncSuccess是指加载完成后要调用的方法，其他节点的设置请参考ztree的官网Demo. 2.编写方法zTreeOnAsyncSuccess...
基于cookie实现ztree树刷新后,展开状态不变-demo
10-30
demo路径：zTree_v3/demo/cn/core/org.html
ztree 更新配置后重新渲染树_基于cookie实现zTree树刷新后展开状态不变
weixin_35355560的博客
01-13 365
基于cookie实现zTree树刷新后，展开状态不变。1、除了引用jQuery和zTree的JS外，引用cookie的JS：2、JS代码：$(function () {//ztree设置var setting = {data: {simpleData: {enable: true,idKey: "id",pIdKey: "pId",rootPId: null}},callback: {onExpa...
zTree 异步加载实现 点击加载
最新发布
YP~杨小西
08-21 154
效果图如下 每级最多显示5000条数据，点击加载 会再次加载5000条数据。可以监听滚动条 动态加载 我这没实现这种方式。
ztree展开节点信息存cookie，刷新自动显示之前展开信息
weixin_30873847的博客
08-16 222
var callbackClick = function (event, treeId, treeNode) { var tree = $.fn.zTree.getZTreeObj(treeId); mainFrame.execute(tree, event, treeId, treeNode); tree.expandN...
ztree刷新(重置)整棵树，并且刷新完之后选中刷新之前的节点，展开之前展开的节点
笑到世界都狼狈的博客
06-16 1万+
首先说一件脑壳很疼的事情，就是在项目中用到了很多ztree，这块是我最头疼的，因为测试每天提的bug都是这块问题的，说来说去，就是一句话，做这些操作的时候只要刷新一下(或重新加载一下这颗树)就好了。 那么重点来了，怎样才能做到在操作节点的时候刷新这颗树呢，我尝试了很多次都不能成功，最后，终于解决了。。。。。。内心那是无比的开心呀。。。 刷新操作的时候，首先要重置这些树，并且获取到刷新之前选中的节点...
基于cookie实现zTree树刷新后展开状态不变
08-31
总的来说，这个方案利用了Cookie的持久性存储特性，将用户的交互状态（zTree节点的展开/折叠）保存在客户端，使得在页面刷新后能恢复到用户之前的状态。这样不仅提高了用户体验，也为开发者提供了一种简单有效的方法...
zTree实现节点修改的实时刷新功能
08-31
zTree实现节点修改的实时刷新功能 zTree是一个功能强大且灵活的JavaScript树插件，能够满足各种树形结构的需求。在实际应用中，经常会遇到动态操作树各节点的需求，例如增加、删除、修改节点等。因此，zTree实现...
zTree树形菜单展开收缩插件
12-30
在本项目中，"zTree树形菜单展开收缩插件"是其核心应用，主要特性包括节点的动态展开与收缩，以及支持关键字模糊查询筛选功能。 1. **zTree基本概念** - **树形结构**：zTree展示的数据结构为树状，每一级节点可以...
zTree实现节点修改的实时刷新
热门推荐
张叔的博客
02-24 6万+
一、应用场景 在实际应用中会遇到动态操作树各节点的需求，在增加树节点后如何实时动态刷新树就十分有必要了。 二、项目实践 比如要在test1234节点下新建子节点，首先要选中test1234节点，添加成功后，根据test1234结点的TID去后台请求对应子节点数据，实现动态刷新。删除节点类似。 三、代码实现 1、初始化时必须设置配置 &lt;span style="fo...
vertica集群增加节点（扩容）
hmxz2nn的博客
08-28 1175
该博客翻译整理自：https://www.vertica.com/blog/expanding-cluster-new-nodes/ 若想对原有的vertica数据库集群扩容（增加一些节点），可以参考以下步骤： 备份现有数据库 保险起见，操作前需要对数据进行备份。但是，如果数据库数据量特别巨大呢？ 删除旧的或未使用的表分区 感觉这一步应该放在最前面，以减少备份的数据量。参考命令： SELE...
ztree 选中刷新之后选中不变
03-12
在原html上可能浏览不到想要的功能，需要放到程序上运行才可以
Ztree 局部刷新功能 （VS2022+Mysql 8.0.22）
qq_35634771的博客
01-03 649
使用Ztree 刷新局部节点
ztree 定时刷新树并模拟点击展现原节点
kingwin28的博客
04-08 545
ztree 定时刷新树并模拟点击展现原节点
20190605 关于加载ztree后页面的刷新
do what you like && brave
06-05 332
ztree刷新后记住上次展开收起的菜单
lixiaonaaa的博客
01-11 638
1，需求 树结构展开和收起某个菜单，经过某个操作后需要刷新菜单，要求菜单刷新后的树结构跟上一次保持一致。 2，思路：设置一个变量，来存储树节点的展开节点的id,刷新树时，根据此变量来循环展开上一次展开的节点 3，代码 //初始化变量 this.treeName = 'zt'; //菜单树id this.zTree; //展开节点变量 this.zTreeSelect; //选中的节点 展开收起方法 //展开节点 function onExpand(event, treeId, tree
zTree selectNode 后，被选中节点没在屏幕可视范围
m0_60526787的博客
10-21 1009
前两天改了一个bug ，是关于zTree的，由于之前没用过，所以查询了很多资料，摸索了很久 首先是ztree的官方文档：API Document [zTree -- jQuery tree plug-ins.]zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发，尤其是 树状菜单、树状数据的Web显示、权限管理等等。zTree 是开源免费的软件（MIT 许可证）。在开源的作用下，zTree 越来越完善，目前已经拥有
【ztree】删除节点后，刷新页面之后展开状态为删除前状态
hyq_07_27的博客
05-06 191
【代码】【ztree】删除节点后，刷新页面之后展开状态为删除前状态。
ztree刷新后 自动展开刷新前打开的节点
05-26
可以通过保存刷新前打开的节点的id，然后在刷新后使用ztree的`expandNode`方法展开这些节点。具体实现如下： 1. 在ztree加载前，保存需要展开的节点id： ```javascript var zTreeObj; var expandedNodes = []; ...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值