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 =[ var zNodes =[ var zNodes =[ var zNodes =[ true}, { id: 11, pId:1, name:"葉子節點1-1",open:true}, { id:111, pId:11, "葉 112, pId:11, name:"葉節點11-2"}, { id:12, pId:1, name:"葉節點1-2 121, pId:12, name:"葉子節點12-1"}, { id:122, pId:12, name:"葉子木1, name:"葉子節點1-3"}, { id:2, pId:0, name:"父節點2", open:true}, name:"葉子節點2-1"}, { id:22, pId:2, name:"葉子節點2-2"}, 節點2-3"}, { id:3, pId:0, name:"父節點3", open:true}, -1"}, { id:32, pId:3, name:"葉子節點3-2"}, ];

for(var i=0;i } } length-1); leftDivStr ="]"; rightDivStr = "]"; parentNodes = "{id:" treeNode.id ",pId:" treeNode.pId if(treeNode != null && treeNode.getParentNode()!= null){ parentNodes } return parentNodes; } //移動節點 function moveNodes(zTreeFrom,treeNode,zTreeTo,divStr // //////////treeNode所有的父節點 var parentNodes ="["; parentNodes = findParentNodes(treeNode,parentNodes); parentNodes = parentNodes.substring(0,parentNodes.length-1);

ParentNodes ="]"; Nodes); //////////////// / ///////////////// var Nodes = "["; , name:"" treeNode.name "",open:" treeNode.open "},"; Nodes = operChildrenNodes(treeNode,nodes) 🠎> ) ; 節點="]"; var NodesArray = eval(nodes); var divToArray = eval(divStrTo); for(var i = 0;i for(var j = = 0;j divFromArray.splice(j,1) } , divToArray = divToArray.concat(parentNodesArray);

/// // ////////////////////////////////////////////// ///////////////////////////////////////////////去重複 divFromArray = divFromArray.unique(); ///// ///////////// /// //////////////////////////////////////////// /////// //////////////// //////////////////////去重複

if(zTreeFrom. setting.treeId == "treeDemo"){ leftDivStr = divFromArray .toSource, 🎜> $.fn.zTree.init($ ("#treeDemo") , 設定, divFromArray); $.fn.zTree.init ($("#treeDemo2"), > leftDivStr = divToArray.toSource(); 🎜> $.fn.zTree. init($("# treeDemo"), 設定,divToArray); } }

//與所有子節點尋找指定節點下的所有子節點 if(treeNode.children!= undefined){//是父節點，有子點 為(var j = 0;j tree nodes ="{id:" childNode.id " ,pId:" childNode.pId ",name:"" childNode.name "",open:" childNode.open "},"; } } else{//沒子節點 } > $(document).ready(function(){ zTreeObj1 = $.fn. zTree.init($("#treeDemo"), setting, zNodes); zTreeObj2 = $.fn.zTree.init($("#treeDemo2"), setting); ) { $("#toRight").click(function() { Nodes()[0],zTreeObj2,leftDivStr,rightDivStr); }); moveNodes(zTreeObj2,zTreeObj2.get),Divj2.getSelected. 🎜> }); "#show").click(function(){ var leftDivStrArray = eval(leftDivStr); i ){ leftDiv[i] = } var rightDiv = new Array(); i = 0;i } alert(leftDiv); alert(rightDiv);

}); }); });

html代碼：

複製程式碼 程式碼如下： >> >