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


Posted in jQuery onSeptember 23, 2017

在目前接触到的树插件中,我觉得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");

最后形成的树(可以拖拽的):

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 #jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 #jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 #jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 #jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 #jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 #jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 #jQuery
You might like
用来解析.htgroup文件的PHP类
2012/09/05 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
ant design实现圈选功能
2019/12/17 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
python在windows下实现备份程序实例
2014/07/04 Python
python简单猜数游戏实例
2015/07/09 Python
python实现梯度下降算法
2020/03/24 Python
Python中print和return的作用及区别解析
2019/05/05 Python
Python代码太长换行的实现
2019/07/05 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
教育科学研究生自荐信
2013/10/09 职场文书
大学生求职简历的自我评价
2013/10/14 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
永不妥协观后感
2015/06/10 职场文书
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers