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

在目前接触到的树插件中，我觉得ztree比较简单，也容易上手。有一次业务需求是将某对象分组树上的对象可以随意拖拽，相当于改变了对象的分组，因此我用到了ztree，对其进行了一些列学习。

 首先下载ztree所需的相关包，附上官方下载连接：ztree下载，引入相关文件后就可以进行ztree的构建了。首先在页面上加ul标签，然后为树加上id，calss为ztree，前端页面就完成了。

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

前端页面：

 <ul id="modeltree" class="ztree"></ul> 

然后写javascript，写之前一定要多多阅读ztree的官方api，上面已经解释的很详细了，只需要照着一步一步做即可。首先就是配置setting，这个是整个ztree的核心配置，我这里除了基本配置外，因为需要拖拽功能，因此配置了edit，其中enable一定要设为true，其他参数看需求配置。callback中也配置相关的回调函数。

 setting配置：

 var setting = {
 data: {
  key:{
   name:'nodename'
  },
  simpledata: {
   enable: true,
   idkey: 'nodeid',
   pidkey: 'parentnodeid'
  },
  keep:{
   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,
 },

 callback: {
  beforeclick: beforeclick,

  beforedrag:beforedrag,
  beforedragopen:beforedragopen,
  beforedrop:beforedrop,
  ondrag:ondr},
}; 

 配置完setting，将各个回调函数补充完整，根据需求来定里面的内容，我这里根据父节点的类型以及一些其他一些规则对能否拖拽，拖拽能否成功进行了相应的限制。

 回调函数：

 //拖拽之前调用的函数
function beforedrag(treeid,treenode){
 if(treenode[0].nodetype == 'group'){
  return false;
 }
 if(treenode.parentid == null && treenode.modeltype !=null){
  return true;
 }
 var node = treenode[0].getparentnode();
 var modeltype = treenode[0].getparentnode().modeltype;
 if(modeltype == 'interface'){
  return false;
 }else {
  return true;
 }
}

//预留被拖拽的回调函数
function ondrag(event, treeid, treenode){
 //暂时没用到
}

//拖拽移动到展开父节点之前调用的函数
function beforedragopen(){
 return true;
}

//拖拽操作结束之前调用的函数
function beforedrop(treeid, treenode, targetnode, movetype){
 brs.fileloading('show');
 var result = false;
 if(targetnode == null || (movetype != "inner" && !targetnode.parenttid)){
  brs.fileloading('hide');
  return false;
 }
 if(targetnode.modeltype != null){
  if((targetnode.modeltype == 'interface' && movetype == 'inner') || targetnode.getparentnode().modeltype == 'interface'){
   brs.fileloading('hide');
   return false;
  }
 }
 var objdetail = {
  url: '/api/model/' + treenode[0].id,
  async:false,
 }
 jsonajax(objdetail,function (detaildata) {
  var data = {
   nodetype : detaildata.nodetype,
   code : detaildata.code,
   name : detaildata.name,
   builtin : detaildata.builtin,
   iconurl : detaildata.iconurl,
   modeltype : detaildata.modeltype.code,
   interfacemodelid : detaildata.interfacemodelid,
  };
  data.id = treenode[0].id;
  if(movetype != 'inner'){
   data.groupid = targetnode.parentid;
  }else{
   data.groupid = targetnode.id;
  }
  var obj = {
   type:"put",
   showsuccessmsg: false,
   param: {
    params:json.stringify(data)
   },
   async:false,
   url: '/api/model',
  }
  jsonajax(obj,function(updatedata){
   if(updatedata != null){
    result = true;
  ing('hide');
 return result;
}

//预留拖拽结束的回调函数
function ondrop(event, treeid, treenode, targetnode, movetype){
 befod('hide');
 return result;
}

//预留拖拽结束的回调函数
function ondrop(event, treeid, treenode, targetnode, movetype){
 beforeclick(treeid, treenode[0]);
} 

上面的设置和相关函数完成以后，就可以调用ztree的初始化方法，通过ajax请求回来的参数去填充我们所需要的树了。

// 初始化对象分组树
 var treeobj = $("#modeltree");
 $.fn.ztree.init(treeobj, setting, data);
 ztree_menu = $.fn.ztree.getztreeobj("modeltree"); 

最后形成的树（可以拖拽的）：

 

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