node在兩個(gè)div之間移動(dòng),用ztree實(shí)現(xiàn)
實(shí)現(xiàn)思路:
1、ztree中節(jié)點(diǎn)是通過(guò)一個(gè)json的Array作為數(shù)據(jù)源、,所以直接操作json字符串,然后轉(zhuǎn)為json對(duì)象數(shù)組。
2、然后用新構(gòu)成的json數(shù)組對(duì)象重新初始化ztree對(duì)象。
<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) {
}
//注冊(cè)toSource函數(shù),解決ie不支持Array的toSource()方法的問(wèn)題
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;
} ;
//注冊(cè)u(píng)nique函數(shù),去掉array中重復(fù)的對(duì)象(id相同即為同一對(duì)象)
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;
} ;
//初始數(shù)據(jù)
var zNodes =[
{ id:1, pId:0, name:"父節(jié)點(diǎn) 1", open:true},
{ id:11, pId:1, name:"葉子節(jié)點(diǎn) 1-1",open:true},
{ id:111, pId:11, name:"葉子節(jié)點(diǎn) 11-1"},
{ id:112, pId:11, name:"葉子節(jié)點(diǎn) 11-2"},
{ id:12, pId:1, name:"葉子節(jié)點(diǎn) 1-2",open:true},
{ id:121, pId:12, name:"葉子節(jié)點(diǎn) 12-1"},
{ id:122, pId:12, name:"葉子節(jié)點(diǎn) 12-2"},
{ id:13, pId:1, name:"葉子節(jié)點(diǎn) 1-3"},
{ id:2, pId:0, name:"父節(jié)點(diǎn) 2", open:true},
{ id:21, pId:2, name:"葉子節(jié)點(diǎn) 2-1"},
{ id:22, pId:2, name:"葉子節(jié)點(diǎn) 2-2"},
{ id:23, pId:2, name:"葉子節(jié)點(diǎn) 2-3"},
{ id:3, pId:0, name:"父節(jié)點(diǎn) 3", open:true},
{ id:31, pId:3, name:"葉子節(jié)點(diǎn) 3-1"},
{ id:32, pId:3, name:"葉子節(jié)點(diǎn) 3-2"},
{ id:33, pId:3, name:"葉子節(jié)點(diǎn) 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 += "]";
//查找被移動(dòng)節(jié)點(diǎn)的所有父節(jié)點(diǎn)
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;
}
//移動(dòng)節(jié)點(diǎn)
function moveNodes(zTreeFrom,treeNode,zTreeTo,divStrFrom,divStrTo){
/////////////////////////////////treeNode的所有父節(jié)點(diǎn)
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++){//刪除節(jié)點(diǎn)
for(var j = 0;j<divFromArray.length;j++){
if(divFromArray[j].id == nodesArray[i].id){
divFromArray.splice(j,1);
}
}
}
divToArray = divToArray.concat(nodesArray);//增加節(jié)點(diǎn)
divToArray = divToArray.concat(parentNodesArray);
///////////////////////////////////////////////////////////////////////////////////////去重復(fù)
divFromArray = divFromArray.unique();
divToArray = divToArray.unique();
///////////////////////////////////////////////////////////////////////////////////////////去重復(fù)
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);
}
}
//查找指定節(jié)點(diǎn)下的所有子節(jié)點(diǎn)
function operChildrenNodes(treeNode,nodes){
if(treeNode.children!= undefined){//是父節(jié)點(diǎn),有子節(jié)點(diǎn)
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{//沒(méi)子節(jié)點(diǎn)
}
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 style="cursor: auto;">
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<button id="toRight">>></button>
<button id="toLeft"><<</button>
<button id="show">show</button>
<div class="right">
<ul id="treeDemo2" class="ztree"></ul>
</div>
</div>
</body>
- bootstrap treeview 擴(kuò)展addNode方法動(dòng)態(tài)添加子節(jié)點(diǎn)的方法
- DevExpress實(shí)現(xiàn)自定義TreeListNode的Tooltip的方法
- DevExpress實(shí)現(xiàn)禁用TreeListNode CheckBox的方法
- JavaScript NodeTree導(dǎo)航欄(菜單項(xiàng)JSON類型/自制)
- 用js腳本控制asp.net下treeview的NodeCheck的實(shí)現(xiàn)代碼
- TreeNodeCheckChanged事件觸發(fā)方法代碼實(shí)例
相關(guān)文章
基于JavaScript實(shí)現(xiàn)圖片剪切效果
這篇文章主要介紹了用JavaScript實(shí)現(xiàn)圖片剪切效果,本文給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03CSS(js)限制頁(yè)面顯示的文本字符長(zhǎng)度
限制頁(yè)面顯示的字符長(zhǎng)度,一直被眾多網(wǎng)友傾睬,本人也是一fans利用閑暇時(shí)間搜集整理了一些實(shí)用技巧,需要了解的朋友可以參考下2012-12-12微信小程序如何刷新當(dāng)前界面的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序如何刷新當(dāng)前界面的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06淺談Webpack4 Tree Shaking 終極優(yōu)化指南
這篇文章主要介紹了淺談Webpack4 Tree Shaking 終極優(yōu)化指南,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11網(wǎng)站頁(yè)面自動(dòng)跳轉(zhuǎn)實(shí)現(xiàn)方法PHP、JSP(下)
很多時(shí)候我們需要Web頁(yè)具備有自動(dòng)跳轉(zhuǎn)功能,例如,論壇中的用戶登錄、發(fā)帖及回復(fù)或留言簿中的留言和回復(fù)等操作成功后,若用戶沒(méi)有任何鼠標(biāo)點(diǎn)擊操作,過(guò)了一定的時(shí)間,頁(yè)面自動(dòng)跳轉(zhuǎn)到預(yù)設(shè)的頁(yè)面。2010-08-08超輕量級(jí)的js時(shí)間庫(kù)miment使用解析
這篇文章主要介紹了超輕量級(jí)的js時(shí)間庫(kù)miment使用解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08IE中鼠標(biāo)經(jīng)過(guò)option觸發(fā)mouseout的解決方法
這篇文章主要介紹了IE中鼠標(biāo)經(jīng)過(guò)option觸發(fā)mouseout的解決方法,分析了IE中鼠標(biāo)移到option時(shí)window.event.toElement返回值為null的原因及解決方法,需要的朋友可以參考下2015-01-01