node在两个div之间移动,用ztree实现_Javascript教程-查字典教程网
node在两个div之间移动,用ztree实现
node在两个div之间移动,用ztree实现
发布时间:2016-12-30 来源:查字典编辑
摘要:实现思路:1、ztree中节点是通过一个json的Array作为数据源、,所以直接操作json字符串,然后转为json对象数组。2、然后用新...

实现思路:

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 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<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++){

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<nodesArray.length;i++){//删除节点

for(var j = 0;j<divFromArray.length;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<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,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<leftDivStrArray.length;i++){

leftDiv[i] = leftDivStrArray[i].id;

}

var rightDivStrArray = eval(rightDivStr);

var rightDiv = new Array();

for(var i = 0;i<rightDivStrArray.length;i++){

rightDiv[i] = rightDivStrArray[i].id;

}

alert(leftDiv);

alert(rightDiv);

});

});

});

</script>

html代码:

复制代码 代码如下:

<body>

<div>

<div>

<ul id="treeDemo"></ul>

</div>

<button id="toRight">>></button>

<button id="toLeft"><<</button>

<button id="show">show</button>

<div>

<ul id="treeDemo2"></ul>

</div>

</div>

</body>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类