ztree_javascript 기술을 사용하여 두 div 사이에서 노드 이동

구현 아이디어:

1. ztree의 노드는 json 배열을 데이터 소스로 사용하므로 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;

; ; 11, pId:1, 이름:"리프 노드 1-1",open:true}, > 121 , pId:12, 이름:"리프 노드 12-1"}, > ~ > ~ 노드 2-3 "}, {id: 3, pid: 0, name:" Father Node 3 ", Open: TRUE}, {id: 31, pid: 3, name:" 리프 노드 3 3 -1 "}, {id: 32, pid: 3, 이름:" 리프 노드 3-2 "}, {ID: 33, PID: 3, 이름:" 리프 노드 3-3 "} ~ | DivStr = leftDivStr.substring( 0,leftDivStr.length-1); leftDivStr ="]"; rightDivStr = "]";

//이동된 노드의 모든 상위 노드 찾기 function findParentNodes(treeNode , parentNodes){ ParentNodes = "{id:" time.id ", pid:" time.pid ", name:" "time.name" "", open: "time.open"}, "; If (Treenode! = Null && Treenode.getparentnode ()! = Null) } 부모 노드 반환; } //노드 이동 function moveNodes(zTreeFrom,treeNode,zTreeTo, divStrFrom,divStrTo){ ////////////////////// //////////treeNode의 모든 상위 노드 var parentNodes ="["; > parentNodes = parentNodes.substring(0,parentNodes.length-1);

parentNodes ="]"; //alert(parentNodes); var parentNodesArray = eval(parentNodes); ///////////// //////////////// var 노드 = "["; 노드 = "{id:" treeNode.id ",pId:" treeNode.pId ", 이름:"" treeNode.name "",open:" treeNode.open "},"; 노드 = operChildrenNodes(treeNode,nodes); 노드 = node.substring(0,nodes.length-1) ; 노드 ="]"; var nodeArray = eval(nodes); var divFromArray = eval(divStrFrom); var divToArray = eval(divStrTo); for(var i = 0;i for(var j = 0;j if(divFromArray[j].id == nodeArray[ 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"), 설정, divFromArray); $.fn.zTr ee.init ($("#treeDemo2"), 설정,divToArray);

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

// 지정된 노드 아래의 모든 하위 노드를 찾습니다. Function OpelChildrenNodes (Treenode, NodeS) { if (time.children! = Undefine) {// 부모입니다. 노드, 일부 하위 노드 for(var j = 0;j var childNode = treeNode.children[j]; 노드 =" {id:" id " ,pId:" childNode.pId ",name:"" childNode.name "",open:" childNode.open "},"; 노드 = operChildrenNodes(childNode, 노드); } else{//자식 없음 노드 } 노드 반환; }

zTreeObj1 = $.fn.zTree.init($("#tree. 데모"), 설정, zNodes); zTreeObj2 = $ .fn.zTree.init($("#treeDemo2"), 설정); $(function() { $("#toRight").click(function() { }); ("#toLeft").click(function(){ ~ moveNodes(zTreeObj2,zTreeObj2.getSelectedNodes()[0],zTreeObj1,rightDivStr,leftDivStr); "#show").click (함수() { for(var i = 0;i | Array.length;i ){ 경보(leftDiv); 경보(rightDiv);

}); }); });

html代码：

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

ztree_javascript 기술을 사용하여 두 div 사이에서 노드 이동

관련 기사