ztree_javascript スキルを使用して 2 つの 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、name:"リーフノード 1-1",open:true}, 112、pId:11、名前:「リーフノード 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:" 親ノード 3 ", Open: TRUE}, {id: 31, pid: 3, name:" リーフ ノード 3 3 -1 "}、 {id：32、pid：3、name：" leaf node 3-2 "}、

stos 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:" time.id ", pid:" time.pid "、name:" "time.name" ""、open: "time.open"}、"; If (Treenode! = Null && Treenode.getparentnode ()! = Null) } Return Parentnodes; } //ノードを移動 function moveNodes(zTreeFrom,treeNode,zTreeTo,divStrFrom,divStrTo){ /////////// ///////////////////TreeNodeのすべての親ノード var parentnodes = "["; treeNode parentNodesのすべての親ノード=parentNodes.substring(0,parentNodes.length-1);

parentNodes = "]"; // alert（parentnodes）; var parentnodesArray = eval（parentnodes）; /////////// ///////////////// var ノード = "["; ノード = "{id:"treeNode.id ",pId:"treeNode.pId ", name:""treeNode.name "",open:"treeNode.open "},"; ノード = operChildrenNodes(treeNode,nodes); ノード = nodes.substring(0,nodes.length-1) ; ノード ="]"; 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"), settings, divFromArray); $ .fn.zTree.init ($("#treeDemo2"), settings,divToArray);

}else{ leftDivStr = divToArray.toSource(); rightDivStr =divFromArray.toSour ce(); $. fn.zTree.init($("#treeDemo2"), settings, divFromArray); $.fn.zTree.init($("#treeDemo"), settings,divToArray); } }（var j = 0; j＆lt; treeNode.children.length; j）{ var Childnode = treenode.children [j]; nodes = "{id {id :" id " ,pId:" childNode.pId ",name:"" childNode.name "",open:" childNode.open "},"; ノード = operChildrenNodes(childNode, ノード); } else{/ /子ノードなし } ノードを返します; }

zTreeObj1 = $.fn. init($("#treeDemo"), 設定, zNodes); zTreeObj2 = $.fn.zTree.init($("#treeDemo2"), settings); $(function() { $("#toRight").click(function() { }）; （ "#toleft"）。click（function（）{ movenodes（ztreeobj2、ztreeobj2.getSelectedNodes（）[0]、ztreeobj1、rightdivstr、regfdivstr）; "＃show"）。クリック（＃show "）。 function(){ for(var i = 0;i = eval (rightDivStr); i アラート(leftDiv); アラート(rightDiv);

}); }); });

html代：

复制代 代码如下: >> show

ztree_javascript スキルを使用して 2 つの div 間でノードを移動する

関連記事