ztree仅并列同级进行推拽(同一个组织下不同部门排序拖拽)
实现仅同一个组织下不同部门排序拖拽是判断当前拖拽的节点pId和目标节点的pId是否相等，否则禁止拖拽，
拖拽的重点方法是以下两个：callback: {
beforeDrag: beforeDrag,
beforeDrop: beforeDrop｝
inner: false 拖拽到目标节点时，设置是不允许成为目标节点的子节点
edit: {drag: { prev: true, next: true,inner: false}}
function beforeDrag(treeId, treeNodes) {
for (var i=0,l=treeNodes.length; i<l; i++) {
dragId = treeNodes[i].pId;
if (treeNodes[i].drag === false) {
return false;
}
}
return true;
}
function beforeDrop(treeId, treeNodes, targetNode, moveType) {
if(targetNode.pId == dragId){
return true;
}else{
return false;
}
}
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ztree仅并列同级进行推拽(同一个组织下不同部门排序拖拽)</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-3.1.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.1.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.1.js"></script>
<SCRIPT type="text/javascript">
<!--
var dragId;
var setting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
edit: {
enable: true,
showRemoveBtn: setRemoveBtn,
drag: {
prev: true,
next: true,
inner: false
},
editNameSelectAll: true
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeDrag: beforeDrag,
beforeEditName: beforeEditName,
beforeRemove: beforeRemove,
beforeRename: beforeRename,
onRemove: onRemove,
onRename: onRename,
beforeDrag: beforeDrag,
beforeDrop: beforeDrop
}
};
var zNodes =[
{ id:1, pId:0, name:"总公司", open:true, iconSkin:"pIcon01"},
{ id:2, pId:1, name:"一分公司", open:true, iconSkin:"pIcon02"},
{ id:3, pId:2, name:"总经办", open:true, iconSkin:"pIcon02"},
{ id:4, pId:3, name:"总经理", open:true, iconSkin:"pIcon01"},
{ id:5, pId:4, name:"研发经理", open:true, iconSkin:"pIcon01"},
{ id:6, pId:5, name:"研发部", iconSkin:"icon01"},
{ id:7, pId:3, name:"销售经理"},
{ id:8, pId:3, name:"售后经理"},
{ id:9, pId:1, name:"二分公司",open:true, iconSkin:"icon02"}
];
var log, className = "dark";
function beforeDrag(treeId, treeNodes) {
return false;
}
function beforeEditName(treeId, treeNode) {
className = (className === "dark" ? "":"dark");
showLog("[ "+getTime()+" beforeEditName ] " + treeNode.name);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
return true;
}
function beforeRemove(treeId, treeNode) {
className = (className === "dark" ? "":"dark");
showLog("[ "+getTime()+" beforeRemove ] " + treeNode.name);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
}
function onRemove(e, treeId, treeNode) {
showLog("[ "+getTime()+" onRemove ] " + treeNode.name);
}
function beforeRename(treeId, treeNode, newName) {
className = (className === "dark" ? "":"dark");
showLog("[ "+getTime()+" beforeRename ] " + treeNode.name);
if (newName.length == 0) {
alert("节点名称不能为空.");
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
setTimeout(function(){zTree.editName(treeNode)}, 10);
return false;
}
return true;
}
function onRename(e, treeId, treeNode) {
showLog("[ "+getTime()+" onRename ] " + treeNode.name);
}
function showLog(str) {
if (!log) log = $("#log");
log.append("<li class='"+className+"'>"+str+"</li>");
if(log.children("li").length > 8) {
log.get(0).removeChild(log.children("li")[0]);
}
}
function getTime() {
var now= new Date(),
h=now.getHours(),
m=now.getMinutes(),
s=now.getSeconds(),
ms=now.getMilliseconds();
return (h+":"+m+":"+s+ " " +ms);
}
var newCount = 1;
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.id).length>0) return;
var addStr = "<button type='button' class='add' id='addBtn_" + treeNode.id
+ "' title='add node' onfocus='this.blur();'></button>";
sObj.append(addStr);
var btn = $("#addBtn_"+treeNode.id);
if (btn) btn.bind("click", function(){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
return false;
});
}
function setRemoveBtn(treeId, treeNode) {
if(treeNode.level == 0)
return false;
else
return true;
}
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.id).unbind().remove();
};
function beforeDrag(treeId, treeNodes) {
for (var i=0,l=treeNodes.length; i<l; i++) {
dragId = treeNodes[i].pId;
if (treeNodes[i].drag === false) {
return false;
}
}
return true;
}
function beforeDrop(treeId, treeNodes, targetNode, moveType) {
if(targetNode.pId == dragId){
return true;
}else{
return false;
}
}
function selectAll() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.setting.edit.editNameSelectAll = $("#selectAll").attr("checked");
};
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
$("#selectAll").bind("click", selectAll);
});
-->
</SCRIPT>
<style type="text/css">
.ztree li button.pIcon01_ico_open{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/1_open.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.pIcon01_ico_close{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/1_close.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.pIcon02_ico_open, .ztree li button.pIcon02_ico_close{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/2.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon01_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/3.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon02_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/4.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon03_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/5.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon04_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/6.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon05_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/7.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon06_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/8.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
</style>
</HEAD>
<BODY>
<div style="height:500px;">
<ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>
分享到：
相关推荐
ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网...
ztree实现公司组织结构树状显示，用的是SSM框架，TOMCAT服务器，包含了数据库以及每层的源码，全都在压缩文件中，可以直接运行。
ztree全套的增删改查实例,包括编辑排序子节点操作,demo仅供参考,希望给需要的朋友带来帮助，谢谢支持！
不同种类的jqueryztree,里面有api，什么ztree树都是齐全的
zTree -- jQuery 树插件
一个简单的ztree小例子 代码简洁 适合初学者
该资源原理说明与博客《异步&同步加载树节点----zTree(一)》相一致。
ztree脚本、ztree下载、包含ztree文件、ztree的pdf教程、ztree的chm教程
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 zTree 是开源免费的软件（MIT 许可证）。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去，...
基于最新版本ztree而开发的下拉树插件，还拥有搜索功能
ztree使用说明
前端框架ztree前端框架ztree
ztree 异步加载 拖拽 右键菜单 功能
它与 IE、FireFox、Chrome 等浏览器保持兼容，在一个页面内可同时生成多个Tree 实例，支持一次性静态生成和Ajax 异步加载两种方式，能够响应和反馈多种事件。它提供了个性化的定制服务，支持灵活的参数配置，用户...
仿ztree部分实现的一个树插件，只供学习使用，不得用作商业用途
里面三个压缩包的代码，ztree filter demo ztree的一些代码，供写ztree的人查看使用。
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
zTree组件api，官方可用chm版(zTree api)
最新版的ztree插件源码zTree-zTree_v3.5.17！
•zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载 •采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀 •兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器 •支持 ...