이 글에서는 "ztree를 사용하여 두 ps 사이에서 노드를 이동하는 방법"을 소개합니다. 필요한 친구는 이를 참조할 수 있습니다.
구현 아이디어:
1. ztree의 노드는 데이터 소스로 사용됩니다. json 문자열을 직접 조작한 다음 이를 json 객체 배열로 변환합니다.
2. 그런 다음 새로 형성된 json 배열 객체로 ztree 객체를 다시 초기화합니다.
<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 코드:
<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>
위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항:
위 내용은 nodejs는 ztree를 사용하여 두 div 사이를 이동합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!