nodejs uses ztree to move between two divs
This article introduces the method of "moving a node between two ps, using ztree". Friends who need it can refer to
Implementation ideas:
1. The nodes in ztree are A json Array is used as the data source, so the json string is directly manipulated and then converted into an array of json objects.
2. Then re-initialize the ztree object with the newly formed json array object.
<link rel="stylesheet" href="demo.css" type="text/css"> <link rel="stylesheet" href="zTreeStyle.css" type="text/css"> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <script type="text/javascript" src="jquery.ztree.core-3.5(1).js"></script> <script type="text/javascript"> var zTreeObj1; var zTreeObj2; var leftpStr = "["; var rightpStr = "["; var setting = { edit: { enable: false, showRemoveBtn: false, showRenameBtn: false }, data: { simpleData: { enable: true } }, callback: { //onClick : menuOnClick } }; function menuOnClick(event, treeId, treeNode, clickFlag) { } //注册toSource函数,解决ie不支持Array的toSource()方法的问题 Array.prototype.toSource = function (){ var str = "["; for(var i = 0 ;i<this.length;i++){ str+="{id:\""+this[i].id+ "\",pId:\""+this[i].pId +"\",name:\""+this[i].name +"\",isParent:\""+this[i].isParent +"\",file:\""+this[i].file +"\",icon:\""+this[i].icon +"\",open:\""+this[i].open +"\"},"; } if(this.length != 0){ str = str.substring(0, str.length-1); } str +="]"; return str; } ; //注册unique函数,去掉array中重复的对象(id相同即为同一对象) Array.prototype.unique = function (){ var r = new Array(); label:for(var i = 0, n = this.length; i < n; i++) { for(var x = 0, y = r.length; x < y; x++) { if(r[x].id == this[i].id) { continue label; } } r[r.length] = this[i]; } return r; } ; //初始数据 var zNodes =[ { id:1, pId:0, name:"父节点 1", open:true}, { id:11, pId:1, name:"叶子节点 1-1",open:true}, { id:111, pId:11, name:"叶子节点 11-1"}, { id:112, pId:11, name:"叶子节点 11-2"}, { id:12, pId:1, name:"叶子节点 1-2",open:true}, { id:121, pId:12, name:"叶子节点 12-1"}, { id:122, pId:12, name:"叶子节点 12-2"}, { id:13, pId:1, name:"叶子节点 1-3"}, { id:2, pId:0, name:"父节点 2", open:true}, { id:21, pId:2, name:"叶子节点 2-1"}, { id:22, pId:2, name:"叶子节点 2-2"}, { id:23, pId:2, name:"叶子节点 2-3"}, { id:3, pId:0, name:"父节点 3", open:true}, { id:31, pId:3, name:"叶子节点 3-1"}, { id:32, pId:3, name:"叶子节点 3-2"}, { id:33, pId:3, name:"叶子节点 3-3"} ]; for(var i=0;i<zNodes.length;i++){ leftpStr+="{id:"+zNodes[i].id+",pId:"+zNodes[i].pId+", name:\""+zNodes[i].name+"\",open:"+zNodes[i].open+"},"; } leftpStr = leftpStr.substring(0,leftpStr.length-1); leftpStr+="]"; rightpStr += "]"; //查找被移动节点的所有父节点 function findParentNodes(treeNode, parentNodes){ parentNodes += "{id:"+treeNode.id+",pId:"+treeNode.pId+ ",name:\""+treeNode.name+"\",open:"+treeNode.open+"},"; if(treeNode != null && treeNode.getParentNode()!= null){ parentNodes =findParentNodes(treeNode.getParentNode(),parentNodes); } return parentNodes; } //移动节点 function moveNodes(zTreeFrom,treeNode,zTreeTo,pStrFrom,pStrTo){ /////////////////////////////////treeNode的所有父节点 var parentNodes ="["; if(treeNode.pId != null){ parentNodes = findParentNodes(treeNode,parentNodes); parentNodes = parentNodes.substring(0,parentNodes.length-1); } parentNodes +="]"; //alert(parentNodes); var parentNodesArray = eval(parentNodes); /////////////////////////////// var nodes = "["; nodes+= "{id:"+treeNode.id+",pId:"+treeNode.pId+", name:\""+treeNode.name+"\",open:"+treeNode.open+"},"; nodes = operChildrenNodes(treeNode,nodes); nodes = nodes.substring(0,nodes.length-1); nodes+="]"; var nodesArray = eval(nodes); var pFromArray = eval(pStrFrom); var pToArray = eval(pStrTo); for(var i = 0;i<nodesArray.length;i++){//删除节点 for(var j = 0;j<pFromArray.length;j++){ if(pFromArray[j].id == nodesArray[i].id){ pFromArray.splice(j,1); } } } pToArray = pToArray.concat(nodesArray);//增加节点 pToArray = pToArray.concat(parentNodesArray); //////////////////////去重复 pFromArray = pFromArray.unique(); pToArray = pToArray.unique(); ////////////////////////去重复 if(zTreeFrom.setting.treeId == "treeDemo"){ leftpStr = pFromArray.toSource(); rightpStr =pToArray.toSource(); $.fn.zTree.init($("#treeDemo"), setting, pFromArray); $.fn.zTree.init($("#treeDemo2"), setting,pToArray); }else{ leftpStr = pToArray.toSource(); rightpStr =pFromArray.toSource(); $.fn.zTree.init($("#treeDemo2"), setting, pFromArray); $.fn.zTree.init($("#treeDemo"), setting,pToArray); } } //查找指定节点下的所有子节点 function operChildrenNodes(treeNode,nodes){ if(treeNode.children!= undefined){//是父节点,有子节点 for(var j = 0;j<treeNode.children.length;j++){ var childNode = treeNode.children[j]; nodes+="{id:"+childNode.id+",pId:"+childNode.pId+", name:\""+childNode.name+"\",open:"+childNode.open+"},"; nodes = operChildrenNodes(childNode,nodes); } }else{//没子节点 } return nodes; } $(document).ready(function(){ zTreeObj1 = $.fn.zTree.init($("#treeDemo"), setting, zNodes); zTreeObj2 = $.fn.zTree.init($("#treeDemo2"), setting); $(function() { $("#toRight").click(function() { moveNodes(zTreeObj1,zTreeObj1.getSelectedNodes()[0], zTreeObj2,leftpStr,rightpStr); }); $("#toLeft").click(function(){ moveNodes(zTreeObj2,zTreeObj2.getSelectedNodes()[0], zTreeObj1,rightpStr,leftpStr); }); $("#show").click(function(){ var leftp = new Array(); var leftpStrArray = eval(leftpStr); for(var i = 0;i<leftpStrArray.length;i++){ leftp[i] = leftpStrArray[i].id; } var rightpStrArray = eval(rightpStr); var rightp = new Array(); for(var i = 0;i<rightpStrArray.length;i++){ rightp[i] = rightpStrArray[i].id; } alert(leftp); alert(rightp); }); }); }); </script>
html code:
<body style="cursor: auto;"> <p class="content_wrap"> <p class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </p> <button id="toRight">>></button> <button id="toLeft"><<</button> <button id="show">show</button> <p class="right"> <ul id="treeDemo2" class="ztree"></ul> </p> </p> </body>
The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
Introduction to LDAP query under node.js
Methods to prevent SQL injection in node-mysql
The above is the detailed content of nodejs uses ztree to move between two divs. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to handle file upload? The following article will introduce to you how to use express to handle file uploads in the node project. I hope it will be helpful to you!

How to delete node with nvm: 1. Download "nvm-setup.zip" and install it on the C drive; 2. Configure environment variables and check the version number through the "nvm -v" command; 3. Use the "nvm install" command Install node; 4. Delete the installed node through the "nvm uninstall" command.

This article will share with you Node's process management tool "pm2", and talk about why pm2 is needed, how to install and use pm2, I hope it will be helpful to everyone!

Detailed explanation and installation guide for PiNetwork nodes This article will introduce the PiNetwork ecosystem in detail - Pi nodes, a key role in the PiNetwork ecosystem, and provide complete steps for installation and configuration. After the launch of the PiNetwork blockchain test network, Pi nodes have become an important part of many pioneers actively participating in the testing, preparing for the upcoming main network release. If you don’t know PiNetwork yet, please refer to what is Picoin? What is the price for listing? Pi usage, mining and security analysis. What is PiNetwork? The PiNetwork project started in 2019 and owns its exclusive cryptocurrency Pi Coin. The project aims to create a one that everyone can participate

How to package nodejs executable file with pkg? The following article will introduce to you how to use pkg to package a Node project into an executable file. I hope it will be helpful to you!

npm node gyp fails because "node-gyp.js" does not match the version of "Node.js". The solution is: 1. Clear the node cache through "npm cache clean -f"; 2. Through "npm install -g n" Install the n module; 3. Install the "node v12.21.0" version through the "n v12.21.0" command.

Authentication is one of the most important parts of any web application. This tutorial discusses token-based authentication systems and how they differ from traditional login systems. By the end of this tutorial, you will see a fully working demo written in Angular and Node.js. Traditional Authentication Systems Before moving on to token-based authentication systems, let’s take a look at traditional authentication systems. The user provides their username and password in the login form and clicks Login. After making the request, authenticate the user on the backend by querying the database. If the request is valid, a session is created using the user information obtained from the database, and the session information is returned in the response header so that the session ID is stored in the browser. Provides access to applications subject to

What is a single sign-on system? How to implement it using nodejs? The following article will introduce to you how to use node to implement a single sign-on system. I hope it will be helpful to you!
