基于cookie实现ztree树刷新后，展开状态不变
来源：互联网 发布：淘宝低价引流 编辑：程序博客网 时间：2024/05/18 02:03
这种方案是基于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" onclick="addDep();">增加部门</li><li id="m_editDep" onclick="editDep();">调整部门</li><li id="m_addPos" onclick="addPos();">增加岗位</li><li id="m_editPos" onclick="editPos();">调整岗位</li><li id="m_addEmp" onclick="addEmp();">增加人员</li><li id="m_delPos" onclick="removePos();">删除岗位</li><li id="m_delDep" onclick="removeDep();">删除部门</li><li id="m_delEmp" onclick="removeEmp();">删除人员</li></ul></div></BODY></HTML>附件
注：需要放到web上才行
demo路径：zTree_v3/demo/cn/core/org.html
0 0
- 基于cookie实现ztree树刷新后，展开状态不变
- 基于cookie实现ztree树刷新后，展开状态不变
- zTree实现单击展开树
- ztree刷新后依然保持之前的选中节点状态
- 用一句代码实现页面刷新后滚动条位置不变
- js实现网页刷新后滚动条位置不变
- 树形菜单，刷新后不变
- 页面刷新后导航不变
- zTree默认展开树节点
- TreeView点击之后保持点击节点的方法 (展开后刷新仍保持展开状态的方法)
- cookie 存菜单的展开状态
- Ztree树节点的层级展开
- JTree---刷新树，保存树的刷新前的展开状态
- KenDoTreeview刷新后展开的节点和选中的节点不变（KenDoTreeview中的数据通过KenDoGrid来进行保存、删除）
- ztree树菜单控制展开到任意几级节点的实现方法
- 基于jQuery的zTree树插件实现筛选
- js实现刷新页面后select标签保持选中状态
- zTree实现节点修改的实时刷新
- mac升级后php 扩展修复
- PL/SQL Developer中调试oracle的存储过程
- Extracting and Composing Robust Features with Denoising Autoencoders(经典文章阅读)
- Windows进程间各种通信方式浅谈
- HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解
- 基于cookie实现ztree树刷新后，展开状态不变
- How Many Processes Should Be Set For The Receiving Transaction Manager (RTM)
- Spring 的Hibernate事务管理机制
- 硅谷风投信心下滑：大批创业公司推迟IPO
- NSString 中提取URL
- iOS中NSUserDefaults的使用
- cocos2d js ScrollView的用法
- MYSQL使用遇到错误汇总
- 没上过大学的“知二代”，35岁如何炼成21亿美元身价？
