nodejs用ztree实现在两个div之间移动

实现思路：

1、ztree中节点是通过一个json的Array作为数据源、，所以直接操作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>