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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery中的deferred使用方法
Mar 27 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
基于jQuery拖拽事件的封装
Nov 29 jQuery
jquery实现穿梭框功能
Jan 19 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 sprintf()函数用例解析
2011/05/18 PHP
php模拟post提交数据的方法
2015/02/12 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
Python抽象类的新写法
2015/06/18 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
spyder常用快捷键(分享)
2017/07/19 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
实例详解Python装饰器与闭包
2019/07/29 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
django queryset相加和筛选教程
2020/05/18 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
详解Python yaml模块
2020/09/23 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
幼儿园教师节活动方案
2014/02/02 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript