视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
nodejs用ztree实现在两个div之间移动
2020-11-27 19:34:43 责编:小采
文档


本文介绍了“node在两个p之间移动,用ztree实现”的方法,需要的朋友可以参考一下

实现思路:

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

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

<link rel="stylesheet" href="demo.css" type="text/css">
<link rel="stylesheet" href="zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.ztree.core-3.5(1).js"></script>
<script type="text/javascript">
 var zTreeObj1;
 var zTreeObj2;
 var leftpStr = "[";
 var rightpStr = "[";
 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<this.length;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 < n; i++) {
 for(var x = 0, y = r.length; x < y; 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<zNodes.length;i++){
leftpStr+="{id:"+zNodes[i].id+",pId:"+zNodes[i].pId+",
name:\""+zNodes[i].name+"\",open:"+zNodes[i].open+"},";
 }
 leftpStr = leftpStr.substring(0,leftpStr.length-1);
 leftpStr+="]";
 rightpStr += "]";

 //查找被移动节点的所有父节点
 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,pStrFrom,pStrTo){
 /////////////////////////////////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 pFromArray = eval(pStrFrom);
 var pToArray = eval(pStrTo);
 for(var i = 0;i<nodesArray.length;i++){//删除节点
 for(var j = 0;j<pFromArray.length;j++){
 if(pFromArray[j].id == nodesArray[i].id){
 pFromArray.splice(j,1);
 }
 }
 }

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

 //////////////////////去重复
 pFromArray = pFromArray.unique();
 pToArray = pToArray.unique();
 ////////////////////////去重复

 if(zTreeFrom.setting.treeId == "treeDemo"){
 leftpStr = pFromArray.toSource();
 rightpStr =pToArray.toSource();
 $.fn.zTree.init($("#treeDemo"), setting, pFromArray);
 $.fn.zTree.init($("#treeDemo2"), setting,pToArray);

 }else{
 leftpStr = pToArray.toSource();
 rightpStr =pFromArray.toSource();
 $.fn.zTree.init($("#treeDemo2"), setting, pFromArray);
 $.fn.zTree.init($("#treeDemo"), setting,pToArray);
 }
 }

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

 }); 
 $("#show").click(function(){
 var leftp = new Array();
 var leftpStrArray = eval(leftpStr);
 for(var i = 0;i<leftpStrArray.length;i++){
 leftp[i] = leftpStrArray[i].id;
 }
 var rightpStrArray = eval(rightpStr);
 var rightp = new Array();
 for(var i = 0;i<rightpStrArray.length;i++){
 rightp[i] = rightpStrArray[i].id;
 }
 alert(leftp);
 alert(rightp);

 }); 
 });
 });

 
 </script>

html代码:

<body style="cursor: auto;">
<p class="content_wrap">
 <p class="zTreeDemoBackground left">
 <ul id="treeDemo" class="ztree"></ul>
 </p>
 <button id="toRight">>></button>
 <button id="toLeft"><<</button>
 <button id="show">show</button>
 <p class="right">
 <ul id="treeDemo2" class="ztree"></ul>
 </p>
</p>
</body>

下载本文
显示全文
专题