node在两个div之间移动,用ztree实现_javascript技巧

实现思路：

1、ztree中节点是通过一个json的Array作为数据源、，所以直接操作json字符串，然后转为json对象数组。

2、然后用新构成的json数组对象重新初始化ztree对象。

复制代码 代码如下: 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; } ; //初始数据 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 leftDivStr+="{id:"+zNodes[i].id+",pId:"+zNodes[i].pId+",name:\""+zNodes[i].name+"\",open:"+zNodes[i].open+"},"; } leftDivStr = leftDivStr.substring(0,leftDivStr.length-1); leftDivStr+="]"; rightDivStr += "]";

//查找被移动节点的所有父节点 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,divStrFrom,divStrTo){ /////////////////////////////////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 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); } }

//查找指定节点下的所有子节点 function operChildrenNodes(treeNode,nodes){ if(treeNode.children!= undefined){//是父节点，有子节点 for(var j = 0;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,leftDivStr,rightDivStr); }); $("#toLeft").click(function(){ moveNodes(zTreeObj2,zTreeObj2.getSelectedNodes()[0],zTreeObj1,rightDivStr,leftDivStr);

}); $("#show").click(function(){ var leftDiv = new Array(); var leftDivStrArray = eval(leftDivStr); for(var i = 0;i leftDiv[i] = leftDivStrArray[i].id; } var rightDivStrArray = eval(rightDivStr); var rightDiv = new Array(); for(var i = 0;i rightDiv[i] = rightDivStrArray[i].id; } alert(leftDiv); alert(rightDiv);

}); }); });

html代码：

复制代码 代码如下:

>> show

node在两个div之间移动,用ztree实现_javascript技巧

Articles Liés