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 相关文章推荐
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jQuery实现评论模块
Aug 19 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
html中两种获取标签内的值的方法
Jun 16 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
PHP Cookie的使用教程详解
2013/06/03 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
laravel安装和配置教程
2014/10/29 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
python实现抖音点赞功能
2019/04/07 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
Python reduce函数作用及实例解析
2020/05/08 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
Python Selenium库的基本使用教程
2021/01/04 Python
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
2015年学校减负工作总结
2015/05/19 职场文书