亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery使用zTree插件實(shí)現(xiàn)可拖拽的樹示例

 更新時(shí)間:2017年09月23日 14:29:14   作者:計(jì)算機(jī)-程浩  
本篇文章主要介紹了js使用zTree插件實(shí)現(xiàn)可拖拽的樹示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

在目前接觸到的樹插件中,我覺(jué)得zTree比較簡(jiǎn)單,也容易上手。有一次業(yè)務(wù)需求是將某對(duì)象分組樹上的對(duì)象可以隨意拖拽,相當(dāng)于改變了對(duì)象的分組,因此我用到了zTree,對(duì)其進(jìn)行了一些列學(xué)習(xí)。

 首先下載zTree所需的相關(guān)包,附上官方下載連接:zTree下載,引入相關(guān)文件后就可以進(jìn)行zTree的構(gòu)建了。首先在頁(yè)面上加ul標(biāo)簽,然后為樹加上id,calss為ztree,前端頁(yè)面就完成了。

注意:下面所有的代碼是根據(jù)我自己的需求寫的,且不完整,主要參考配置流程和回調(diào)函數(shù)的使用即可。

前端頁(yè)面:

 <ul id="modelTree" class="ztree"></ul> 

然后寫JavaScript,寫之前一定要多多閱讀zTree的官方API,上面已經(jīng)解釋的很詳細(xì)了,只需要照著一步一步做即可。首先就是配置setting,這個(gè)是整個(gè)zTree的核心配置,我這里除了基本配置外,因?yàn)樾枰献Чδ?,因此配置了edit,其中enable一定要設(shè)為true,其他參數(shù)看需求配置。callback中也配置相關(guān)的回調(diào)函數(shù)。

 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: "刪除節(jié)點(diǎn)",
  renameTitle: "編輯節(jié)點(diǎn)名稱",
  showRemoveBtn: false,
  showRenameBtn: false,
 },

 callback: {
  beforeClick: beforeClick,

  beforeDrag:beforeDrag,
  beforeDragOpen:beforeDragOpen,
  beforeDrop:beforeDrop,
  onDrag:onDr},
}; 

 配置完setting,將各個(gè)回調(diào)函數(shù)補(bǔ)充完整,根據(jù)需求來(lái)定里面的內(nèi)容,我這里根據(jù)父節(jié)點(diǎn)的類型以及一些其他一些規(guī)則對(duì)能否拖拽,拖拽能否成功進(jìn)行了相應(yīng)的限制。

 回調(diào)函數(shù):

 //拖拽之前調(diào)用的函數(shù)
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;
 }
}

//預(yù)留被拖拽的回調(diào)函數(shù)
function onDrag(event, treeId, treeNode){
 //暫時(shí)沒(méi)用到
}

//拖拽移動(dòng)到展開父節(jié)點(diǎn)之前調(diào)用的函數(shù)
function beforeDragOpen(){
 return true;
}

//拖拽操作結(jié)束之前調(diào)用的函數(shù)
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;
}

//預(yù)留拖拽結(jié)束的回調(diào)函數(shù)
function onDrop(event, treeId, treeNode, targetNode, moveType){
 befod('hide');
 return result;
}

//預(yù)留拖拽結(jié)束的回調(diào)函數(shù)
function onDrop(event, treeId, treeNode, targetNode, moveType){
 beforeClick(treeId, treeNode[0]);
} 

上面的設(shè)置和相關(guān)函數(shù)完成以后,就可以調(diào)用zTree的初始化方法,通過(guò)Ajax請(qǐng)求回來(lái)的參數(shù)去填充我們所需要的樹了。

// 初始化對(duì)象分組樹
 var treeObj = $("#modelTree");
 $.fn.zTree.init(treeObj, setting, data);
 zTree_Menu = $.fn.zTree.getZTreeObj("modelTree"); 

最后形成的樹(可以拖拽的):

 

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 用jQuery實(shí)現(xiàn)優(yōu)酷首頁(yè)輪播圖

    用jQuery實(shí)現(xiàn)優(yōu)酷首頁(yè)輪播圖

    本文主要介紹了用jQuery實(shí)現(xiàn)優(yōu)酷首頁(yè)輪播圖的思路與方法。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧
    2017-01-01
  • JQuery 選擇和過(guò)濾方法代碼總結(jié)

    JQuery 選擇和過(guò)濾方法代碼總結(jié)

    JQuery 選擇和過(guò)濾方法代碼總結(jié),學(xué)習(xí)jquery的朋友可以參考下。
    2010-11-11
  • jQuery中scrollLeft()方法用法實(shí)例

    jQuery中scrollLeft()方法用法實(shí)例

    這篇文章主要介紹了jQuery中scrollLeft()方法用法,實(shí)例分析了scrollLeft()方法的功能、定義及獲取或設(shè)置匹配元素相對(duì)滾動(dòng)條左側(cè)的偏移(offset)量時(shí)的使用技巧,需要的朋友可以參考下
    2015-01-01
  • Jquery遍歷Json數(shù)據(jù)的方法

    Jquery遍歷Json數(shù)據(jù)的方法

    這篇文章主要介紹了Jquery遍歷Json數(shù)據(jù)的方法,涉及jQuery遍歷json格式數(shù)據(jù)的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2015-04-04
  • jQuery實(shí)現(xiàn)進(jìn)度條效果代碼

    jQuery實(shí)現(xiàn)進(jìn)度條效果代碼

    這篇文章主要介紹了jQuery實(shí)現(xiàn)進(jìn)度條效果代碼,感興趣的小伙伴們可以參考一下
    2015-12-12
  • Jquery AJAX 用于計(jì)算點(diǎn)擊率(統(tǒng)計(jì))

    Jquery AJAX 用于計(jì)算點(diǎn)擊率(統(tǒng)計(jì))

    Jquery AJAX實(shí)現(xiàn)頁(yè)面的統(tǒng)計(jì)代碼,后臺(tái)用的是php,這篇文章主要是學(xué)習(xí)jquery下ajax的簡(jiǎn)單實(shí)現(xiàn)。
    2010-06-06
  • jQuery中DOM常見操作實(shí)例小結(jié)

    jQuery中DOM常見操作實(shí)例小結(jié)

    這篇文章主要介紹了jQuery中DOM常見操作,結(jié)合實(shí)例形式總結(jié)分析了jQuery針對(duì)dom屬性操作、文檔操作等常用方法與操作技巧,需要的朋友可以參考下
    2019-08-08
  • JQuery 確定css方框模型(盒模型Box Model)

    JQuery 確定css方框模型(盒模型Box Model)

    做過(guò)前臺(tái)設(shè)置的都知道css存在兩種盒模型,W3C標(biāo)準(zhǔn)的方框模型和IE瀏覽器的方框模型。除IE以外的大多數(shù)瀏覽器只支持W3C方框模型。IE瀏覽器能夠根據(jù)頁(yè)面的呈現(xiàn)模式的定義而是用對(duì)性的方框模式。已用哪中呈現(xiàn)的模式取決于頁(yè)面上的DOCTYPE的聲明。
    2010-01-01
  • jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax輔助方法

    jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax輔助方法

    我們都知道在AjaxPro的方法AjaxPro.Utility.RegisterTypeForAjax(typeof(所在類的類名));會(huì)將標(biāo)記有[Ajax.AjaxMethod]方法注冊(cè)在客戶端。
    2011-09-09
  • jQuery實(shí)現(xiàn)模擬flash頭像裁切上傳功能示例

    jQuery實(shí)現(xiàn)模擬flash頭像裁切上傳功能示例

    這篇文章主要介紹了jQuery實(shí)現(xiàn)模擬flash頭像裁切上傳功能,結(jié)合實(shí)例形式分析了jQuery圖像剪切與文件傳輸相關(guān)操作技巧,需要的朋友可以參考下
    2016-12-12

最新評(píng)論