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版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
jQuery treeview树形结构应用
Mar 24 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
解析php5配置使用pdo
2013/07/03 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
了解ESlint和其相关操作小结
2018/05/21 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
Vuex新手的理解与使用详解
2019/05/31 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
班主任评语大全
2014/04/26 职场文书
浅析Python OpenCV三种滤镜效果
2022/04/11 Python