1. 需要下载的文件
1. zTree相关的js和css文件,文件下载地址:http://download.csdn.net/detail/lypf19900912/8629625
2. 效果图
加载出来树形结构之后,可以自由的拖拽节点进行节点的重新排序。效果图如下
3. 代码
js
//zTree参数设置
var zTree;
var demoIframe;
var zNodes ;
var setting = {
treeId:"applicationTree",
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
edit: {
drag: {
autoExpandTrigger: true,
prev: dropPrev,
inner: dropInner,
next: dropNext
},
enable: true,
showRemoveBtn: false,
showRenameBtn: false
},
data: {
key:{
name:"applicationName"
},
simpleData: {
enable:true,
idKey: "id",
pIdKey: "applicationParentId",
rootPId: "0"
}
},
callback: {
onClick: zTreeOnClick,
beforeDrag: beforeDrag, //拖拽前:捕获节点被拖拽之前的事件回调函数,并且根据返回值确定是否允许开启拖拽操作
beforeDrop: beforeDrop, //拖拽中:捕获节点操作结束之前的事件回调函数,并且根据返回值确定是否允许此拖拽操作
beforeDragOpen: beforeDragOpen, //拖拽到的目标节点是否展开:用于捕获拖拽节点移动到折叠状态的父节点后,即将自动展开该父节点之前的事件回调函数,并且根据返回值确定是否允许自动展开操作
onDrag: onDrag, //捕获节点被拖拽的事件回调函数
onDrop: onDrop, //捕获节点拖拽操作结束的事件回调函数
onExpand: onExpand //捕获节点被展开的事件回调函数
}
};
function dropPrev(treeId, nodes, targetNode) {
var pNode = targetNode.getParentNode();
if (pNode && pNode.dropInner === false) {
return false;
} else {
for (var i=0,l=curDragNodes.length; i<l; i++) {
var curPNode = curDragNodes[i].getParentNode();
if (curPNode && curPNode !== targetNode.getParentNode() && curPNod