首頁  >  文章  >  web前端  >  實例講解jQuery使用zTree插件實作可拖曳功能

實例講解jQuery使用zTree插件實作可拖曳功能

小云云
小云云原創
2017-12-27 10:45:491898瀏覽

在目前接觸到的樹插件中,我覺得zTree比較簡單,也容易上手。有一次業務需求是將某物件分組樹上的物件可以隨意拖拽,相當於改變了物件的分組,因此我用到了zTree,對其進行了一些列學習。本文主要介紹了js使用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:&#39;nodeName&#39;
  },
  simpleData: {
   enable: true,
   idKey: &#39;nodeId&#39;,
   pIdKey: &#39;parentNodeId&#39;
  },
  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 == &#39;GROUP&#39;){
  return false;
 }
 if(treeNode.parentId == null && treeNode.modelType !=null){
  return true;
 }
 var node = treeNode[0].getParentNode();
 var modelType = treeNode[0].getParentNode().modelType;
 if(modelType == &#39;INTERFACE&#39;){
  return false;
 }else {
  return true;
 }
}

//预留被拖拽的回调函数
function onDrag(event, treeId, treeNode){
 //暂时没用到
}

//拖拽移动到展开父节点之前调用的函数
function beforeDragOpen(){
 return true;
}

//拖拽操作结束之前调用的函数
function beforeDrop(treeId, treeNode, targetNode, moveType){
 BRS.fileLoading(&#39;show&#39;);
 var result = false;
 if(targetNode == null || (moveType != "inner" && !targetNode.parentTId)){
  BRS.fileLoading(&#39;hide&#39;);
  return false;
 }
 if(targetNode.modelType != null){
  if((targetNode.modelType == &#39;INTERFACE&#39; && moveType == &#39;inner&#39;) || targetNode.getParentNode().modelType == &#39;INTERFACE&#39;){
   BRS.fileLoading(&#39;hide&#39;);
   return false;
  }
 }
 var objDetail = {
  url: &#39;/api/model/&#39; + 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 != &#39;inner&#39;){
   data.groupId = targetNode.parentId;
  }else{
   data.groupId = targetNode.id;
  }
  var obj = {
   type:"put",
   showSuccessMsg: false,
   param: {
    params:JSON.stringify(data)
   },
   async:false,
   url: &#39;/api/model&#39;,
  }
  jsonAjax(obj,function(updateData){
   if(updateData != null){
    result = true;
  ing(&#39;hide&#39;);
 return result;
}

//预留拖拽结束的回调函数
function onDrop(event, treeId, treeNode, targetNode, moveType){
 befod(&#39;hide&#39;);
 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");

最後形成的樹(可以拖曳的):

 

##相關推薦;


zTree外掛程式之多選下拉式選單實例程式碼_javascript技巧

#jQuery使用zTree外掛程式實作樹狀選單和非同步載入_jquery

#zTree外掛下拉樹使用入門教學_javascript技巧#

以上是實例講解jQuery使用zTree插件實作可拖曳功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn