29zTree - 用 zTree 方法 移动 / 复制节点

效果图：

代码：

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - copyNode / moveNode</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>
<SCRIPT type="text/javascript">
<!--
var setting = {
view: {
selectedMulti: false
},
edit: {
enable: true,
showRemoveBtn: false,
showRenameBtn: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeDrag: beforeDrag,
beforeClick: beforeClick
}
};

var zNodes =[
{ id:1, pId:0, name:"父节点 1", open:true},
{ id:11, pId:1, name:"叶子节点 1-1"},
{ id:12, pId:1, name:"叶子节点 1-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"}
];

function fontCss(treeNode) {
var aObj = $("#" + treeNode.tId + "_a");
aObj.removeClass("copy").removeClass("cut");
if (treeNode === curSrcNode) {
if (curType == "copy") {
aObj.addClass(curType);
} else {
aObj.addClass(curType);
}
}
}

function beforeDrag(treeId, treeNodes) {
return false;
}

function beforeClick(treeId, treeNode) {
return !treeNode.isCur;
}

var curSrcNode, curType;
function setCurSrcNode(treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
if (curSrcNode) {
delete curSrcNode.isCur;
var tmpNode = curSrcNode;
curSrcNode = null;
fontCss(tmpNode);
}
curSrcNode = treeNode;
if (!treeNode) return;

curSrcNode.isCur = true;
zTree.cancelSelectedNode();
fontCss(curSrcNode);
}
function copy(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getSelectedNodes();
if (nodes.length == 0) {
alert("请先选择一个节点");
return;
}
curType = "copy";
setCurSrcNode(nodes[0]);
}
function cut(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getSelectedNodes();
if (nodes.length == 0) {
alert("请先选择一个节点");
return;
}
curType = "cut";
setCurSrcNode(nodes[0]);
}
function paste(e) {
if (!curSrcNode) {
alert("请先选择一个节点进行 复制 / 剪切");
return;
}
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getSelectedNodes(),
targetNode = nodes.length>0? nodes[0]:null;
if (curSrcNode === targetNode) {
alert("不能移动，源节点 与 目标节点相同");
return;
} else if (curType === "cut" && ((!!targetNode && curSrcNode.parentTId === targetNode.tId) || (!targetNode && !curSrcNode.parentTId))) {
alert("不能移动，源节点 已经存在于 目标节点中");
return;
} else if (curType === "copy") {
targetNode = zTree.copyNode(targetNode, curSrcNode, "inner");
} else if (curType === "cut") {
targetNode = zTree.moveNode(targetNode, curSrcNode, "inner");
if (!targetNode) {
alert("剪切失败，源节点是目标节点的父节点");
}
targetNode = curSrcNode;
}
setCurSrcNode();
delete targetNode.isCur;
zTree.selectNode(targetNode);
}

$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
$("#copy").bind("click", copy);
$("#cut").bind("click", cut);
$("#paste").bind("click", paste);
});
//-->
</SCRIPT>
<style type="text/css">
.ztree li a.copy{padding-top:0; background-color:#316AC5; color:white; border:1px #316AC5 solid;}
.ztree li a.cut{padding-top:0; background-color:silver; color:#111; border:1px #316AC5 dotted;}
</style>
</HEAD>

<BODY>
<h1>用 zTree 方法 移动 / 复制节点</h1>
<h6>[ 文件路径: exedit/drag_fun.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1、copyNode / moveNode 方法操作说明</h2>
<ul class="list">
<li>利用 copyNode / moveNode 方法也可以实现 复制 / 移动 节点的目的，这里简单演示使用方法</li>
<li><p>对节点进行 复制 / 剪切，试试看：<br/>
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="copy" href="#" title="复制" onclick="return false;">复制</a> ]
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="cut" href="#" title="剪切" onclick="return false;">剪切</a> ]
&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="paste" href="#" title="粘贴" onclick="return false;">粘贴</a> ]</p>
<li class="highlight_red">使用 zTreeObj.copyNode / moveNode 方法，详细请参见 API 文档中的相关内容</li>
</ul>
</li>
<li class="title"><h2>2、setting 配置信息说明</h2>
<ul class="list">
<li>同 "拖拽 节点 基本控制"</li>
</ul>
</li>
<li class="title"><h2>3、treeNode 节点数据说明</h2>
<ul class="list">
<li>同 "拖拽 节点 基本控制"</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>
————————————————
版权声明：本文为CSDN博主「杨林伟」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_20042935/article/details/89556198

原文地址：https://www.cnblogs.com/ljs-13/p/12425039.html

时间： 2024-08-30 03:46:19

29zTree - 用 zTree 方法 移动 / 复制节点的相关文章

remove() 删除节点 | detach() 删除节点 | empty() 清空节点的内容 | clone() 复制节点

<html> <head> <title></title> <script src="jquery-2.1.3.js"></script> </head> <body> <div> <ul> <li>中国</li> <li>美国</li> <li>德国</li> <li>俄国</

zTree实现删除树节点

生活中的单例 中国(China),位于东亚,是一个以华夏文明为主体.中华文化为基础,以汉族为主要民族的统一多民族国家,通用汉语.中国疆域内的各个民族统称为中华民族,龙是中华民族的象征.古老的中国凭借自身的发展依旧美丽的屹立于东方民族之林,闪耀着她动人的光彩,世界上只有一个中国,任何部分都是祖国不可分割的一部分,今天我们的设计模式就从伟大的祖国开始说起---单例模式. 详解单例模式 单例模式是什么?跟我们的祖国有着怎样的关系呢?首先我们来看一下单例,从"单例"字面意思上理解为-一个类只有

zTree实现更新根节点中第i个节点的名称

1.实现源代码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href=

jQuery DOM操作-复制节点、替换节点、包裹节点

clone(): 复制节点,默认无事件,如果传递了一个参数true,则表示在复制节点的同时复制元素中所绑定的事件. 1 <script type="text/javascript"> 2 $(function(){ 3 var $apple = $("ul li:eq(0)").clone(); 4 $("ul").append($apple); 5 }); 6 </script> replaceWith(): 将所有匹配

jQuery 复制节点的元素实现添加到购物车功能

描述: 用户点击左边div中的商品,对应商品会自动添加到右面的div中,类似电子商城中的添加到购物车功能. 主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将相应信息进行克隆,然后添加到右面的div中. 效果如果: show you code: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery test</tit

zTree实现获取一级节点数据

1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href=&

Mongodb延迟复制节点配置

背景: 我们一般配置的Mongodb主从,或者Mongodb复制集,数据同步都是实时的.但如果在主节点上进行了错误的数据操作,这时候就会导致整个集群的数据都出错.因此,我们可以在一个集群中,挑选一个mongodb实例,用作复制延迟.当在主节点上误操作的时候,集群中有一个实例是不受影响的.这时候就可以利用这台不受影响的实例进行数据恢复. 以上就是mongodb的延迟复制节点的功能,当主节点进行一次数据操作后,延迟复制节不立马进行数据同步操作,而是在一段时间后,才同步数据. 配置: 以我的实验环境为

ztree中获取选中节点下的所有叶子节点

ztree中获取选中节点下的所有叶子节点 var setting = {     data: {         simpleData: {             enable: true        }     },     callback: {         onClick: treenodeClick     } }; //点击树节点,获取节点的所有叶子节点idfunction treenodeClick(event, treeId, treeNode, clickFlag) {

DOM 复制节点案例

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript"> function copyDiv(flag){ var divNode=document.getElementById("div1");