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将标签元素的高设为屏幕的百分比
Apr 19 jQuery
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
第十二节--类的自动加载
2006/11/16 PHP
一个PHP分页类的代码
2011/05/18 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
JavaScript 常用函数库详解
2009/10/21 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
全站最详细的Vuex教程
2018/04/13 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
Python中asyncore的用法实例
2014/09/29 Python
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
在Python程序中操作MySQL的基本方法
2015/07/29 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
python多线程同步之文件读写控制
2021/02/25 Python
python调用接口的4种方式代码实例
2019/11/19 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
学子宴答谢词
2014/01/25 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
详解java如何集成swagger组件
2021/06/21 Java/Android
Python编写冷笑话生成器
2022/04/20 Python
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS