이 글에서는 "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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
