Move node between two divs using ztree_javascript skills

Implementation ideas:

1. The nodes in ztree use a json Array as the data source, so the json string is directly manipulated and then converted into a json object array.

2. Then re-initialize the ztree object with the newly formed json array object.

Copy code The code is as follows: var zTreeObj1; var zTreeObj2; var leftDivStr = "["; var rightDivStr = "["; 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 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 for(var x = 0, y = r.length; x if(r[x].id == this[i].id) { continue label; } } r[r.length] = this[i]; } return r;

; ; 11, pId:1, name:"Leaf node 1-1",open:true}, 112, pId:11, name:"Leaf node 11-2"}, 121, pId:12, name:"Leaf node 12-1"}, 1, name: "Leaf node 1-3"}, name:"leaf node 2-1"}, Node 2-3 "}, {id: 3, pid: 0, name:" Father Node 3 ", Open: TRUE}, {id: 31, pid: 3, name:" Leaf Nodes 3 3 -1"}, { id:32, pId:3, name: "Leaf node 3-2"}, through i].pId ",name:"" zNodes[i].name "",open:" zNodes[i].open "},"; } leftDivStr = leftDivStr.substring(0,leftDivStr. length-1); leftDivStr ="]"; rightDivStr = "]";

//Find all parent nodes of the moved node function findParentNodes(treeNode, parentNodes){ ParentNodes = "{id:" time.id ", pid:" time.pid ", name:" "time.name" "", open: "time.open"}, "; If (Treenode! = Null && Treenode.getparentnode ()! = Null) } Return Parentnodes; } //Move nodes function moveNodes(zTreeFrom,treeNode,zTreeTo,divStrFrom,divStrTo){ //////////////////////// //////////All parent nodes of treeNode var parentNodes ="["; All parent nodes of treeNode 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 divFromArray = eval(divStrFrom); var divToArray = eval(divStrTo); for(var i = 0;i for(var j = 0;j if(divFromArray[j].id == nodesArray[i].id){ divFromArray.splice(j,1); } } }

divToArray = divToArray.concat(nodesArray);//增加节点 divToArray = divToArray.concat(parentNodesArray);

///////////////////////////////////////////////////////////////////////////////////////去重复 divFromArray = divFromArray.unique(); divToArray = divToArray.unique(); ///////////////////////////////////////////////////////////////////////////////////////////去重复

if(zTreeFrom.setting.treeId == "treeDemo"){ leftDivStr = divFromArray.toSource(); rightDivStr =divToArray.toSource(); $.fn.zTree.init($("#treeDemo"), setting, divFromArray); $.fn.zTree.init($("#treeDemo2"), setting,divToArray);

}else{ leftDivStr = divToArray.toSource(); rightDivStr =divFromArray.toSource(); $.fn.zTree.init($("#treeDemo2"), setting, divFromArray); $.fn.zTree.init($("#treeDemo"), setting,divToArray); } }

// Find all sub -nodes under the specified node Function OpelChildrenNodes (Treenode, NodeS) { if (time.children! = Undefined) {// It is a parent node, some Child node for(var j = 0;j var childNode = treeNode.children[j]; nodes =" {id:" id " ,pId:" childNode.pId ",name:"" childNode.name "",open:" childNode.open "},"; nodes = operChildrenNodes(childNode, nodes); } else{//No child nodes } return nodes; }

zTreeObj1 = $.fn. zTree.init($("#treeDemo"), setting, zNodes); zTreeObj2 = $.fn.zTree.init($("#treeDemo2"), setting); $(function() { $("#toRight").click(function() { }); ("#toLeft").click(function(){ moveNodes(zTreeObj2,zTreeObj2.getSelectedNodes()[0],zTreeObj1,rightDivStr,leftDivStr); "#show").click(function(){ for(var i = 0;i = eval (rightDivStr); i = 0;i alert(leftDiv); alert(rightDiv);

}); }); });

html代码：

复制代码 代码如下: >> show

Move node between two divs using ztree_javascript skills

Related articles