jQuery使用zTree插件实现了一个可拖动的树示例

在我目前接触到的树插件中，我觉得zTree比较简单易用。曾经，业务需求是树中的对象可以随意拖拽，相当于改变了对象的分组，所以我用zTree学习了一些列。

首先下载zTree需要的相关包，并附上官方下载链接：zTree Download。引入相关文件后，就可以构建zTree了。首先，向页面添加ul标签，然后向树中添加id。calss是ztree，首页已经完成。

注意：以下代码都是根据我自己的要求写的，不完整，只参考配置过程和回调函数的使用。

首页：

ul id=' model tree ' class=' zTree '/ul，然后编写JavaScript。在编写之前，您必须阅读ztree的官方API，上面已经详细解释过了，您只需要一步一步地去做。第一步是配置设置，这是整个zTree的核心配置。除了基本配置之外，我还配置了编辑，因为拖放功能，其中enable必须设置为true，其他参数取决于需求配置。回调中也配置了相关的回调函数。

设置配置：

var设置={ data : { key : { name : ' nodeName ' }，simpledata : { enable : True，idKey: 'nodeId '，pIdKey: 'parentNodeId' }，keep: { leaf:true，parent:true，}，edit : { drag : { iscopy 3360 false，isMove:设置配置完成后，各回调函数全部补充，其内容根据需求确定。我根据父节点的类型和一些其他规则，对拖放是否能成功做了相应的限制。

回调函数：

//拖拽之前调用的函数函数BeforeDraw(TreeID，treeNode){ if(treeNode[0]).nodeType==' GROUP '){ 0返回false} if(TreeNode。ParentId==null TreeNode。车型！=null){ 0返回true} var node=treeNode[0]。getParentNode()；var modelType=treeNode[0].getParentNode().modelTypeif(modelType==' INTERFACE '){ 0返回false} else { return true}}//预留被拖拽的回调函数函数onDrag(事件、treeId、treeNode){ //暂时没用到}//拖拽移动到展开父节点之前调用的函数函数beforeDragOpen(){ 0返回true}//拖拽操作结束之前调用的函数函数beforeDrop(treeId、treeNode、targetNode、moveType){ BRS。文件加载('显示')；定义变量结果=假；if(targetNode==null || (moveType！='内部！目标节点。ParentTid)){ BRS。文件加载(“隐藏”)；返回false} if(targetNode.modelType！=null){ if((目标节点。模型类型==' INTERFACE '移动类型==' inner ')| |目标节点。getparentnode().模型类型==' INTERFACE '){ BRS。文件加载(“隐藏”)；返回false } } var Objdetail={ URL : '/API/model/'树节点[0].id，async:false，} jsonAjax(objDetail)，function(Detail data){ var data={ nodeType : Detail data。节点类型，代码： detailData.code，名称： detailData.name，Buildin : detailData . Buildin，iconUrl : detailData.iconUrl，模型类型： Detail data。模型类型。代码，interfacemodeid : detailData。interfacemodeid，}data.id=treeNode[0]。id；if(moveType！=' inner '){ data。GroupID=TargetNode。ParentID} else { data。GrouP id=TargetNode。id；} var obj={ type:'put '，showSuccessMsg: false，param : { params 3360 JSON。stringify(data)}，async:false，url: '/api/model '，} jsonAjax(obj，function(updateData){ if(updateData！=null){ result=true；ing(' hide ')；返回结果；}//预留拖拽结束的回调函数函数onDrop(事件、treeId、treeNode、targetNode、移动类型){ befod(' hide ')；返回结果；}//预留拖拽结束的回调函数函数onDrop(事件，treeId，treeNode，targetNode，moveType){ beforeClick(treeId，树节点[0])；} 上面的设置和相关函数完成以后，就可以调用zTree的初始化方法，通过埃阿斯请求回来的参数去填充我们所需要的树了。

//初始化对象分组树var TreeObj=$(' # MoDEL tree ')；$.fn.zTree.init(treeObj，设置，数据);zTree _ Menu=$。fn。zTree。getztreeObj('模型树')；最后形成的树（可以拖拽的):

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。