jQuery使用zTree插件实现可拖拽的树示例资源.pdfVIP

jQuery使使用用zTree插插件件实实现现可可拖拖拽拽的的树树示示例例

本篇文章主要介绍了js使用zTree插件实现可拖拽的树示例，小编觉得挺不错的，现在享给大家，也给大家做

个参考。一起跟随小编过来看看吧

在目前接触到的树插件中，我觉得zTree比较简单，也容易上手。有一次业务需求是将某对象组树上的对象可以随意拖拽，

相当于改变了对象的组，因此我用到了zTree，对其进行了一些列学习。

首先下载zTree所需的相关包，附上官方下载连接：zTree下载，引入相关文件后就可以进行zTree的构建了。首先在页面上加

ul标签，然后为树加上id，calss为ztree，前端页面就完成了。

注意：下面所有的代码是根据我自己的需求写的，且不完整，主要参考配置流程和回调函数的使用即可。

前端页面：

ulid=modelTreeclass=ztree/ul

然后写JavaScript，写之前一定要多多阅读zTree的官方API，上面已经解释的很详细了，只需要照着一步一步做即可。首先就

是配置setting，这个是整个zTree的核心配置，我这里除了基本配置外，因为需要拖拽功能，因此配置了edit，其中enable一

定要设为true，其他参数看需求配置。callbac中也配置相关的回调函数。

setting配置：

varsetting={

data:{

ey:{

name:nodeName

},

simpleData:{

enable:true,

idKey:nodeId,

pIdKey:parentNodeId

},

eep:{

leaf:true,

parent:true,

}

},

edit:{

drag:{

isCopy:false,

isMove:true,

prev:true,

next:true,

inner:true,

autoOpenTime:0,

minMoveSize:10

},

enable:true,

editNameSelectAll:true,

removeTitle:删除节点,

renameTitle:编辑节点名称,

showRemoveBtn:false,

showRenameBtn:false,

},

callbac:{

beforeClic:beforeClic,

beforeDrag:beforeDrag,

beforeDragOpen:beforeDragOpen,

beforeDrop:beforeDrop,

onDrag:onDr},

};

配置完setting，将各个回调函数补充完整，根据需求来定里面的内容，我这里根据父节点的类型以及一些其他一些规则对能

否拖拽，拖拽能否成功进行了相应的限制。

回调函数：

//拖拽之前调用的函数

functionbeforeDrag(treeId,treeNode){

if(treeNode[0].nodeType==GROUP){

returnfalse;

}

if(treeNode.parentId==nulltreeNode.modelType!=null){

returntrue;

}

varnode=treeNode[0].getParentNode();

varmodelType=treeNode[0].getParentNode().modelType;

if(modelType==INTERFACE){

returnfalse;

}else{

returntrue;

}

}

//预留被拖拽的回调函数

functiononDrag(event,treeId,treeNode){

//暂时没用到

}

//拖拽移动到展开父节点之前调用的函数

functionbeforeDragOpen(){

returntrue;

}

//拖拽操作结束之前调用的函数

functionbeforeDrop(treeId,treeNode,targetNode,moveType){

BRS.f