Beispiele zur Erläuterung, wie jQuery das zTree-Plugin verwendet, um Drag-and-Drop-Funktionalität zu implementieren

Unter den Baum-Plug-ins, die mir bisher begegnet sind, halte ich zTree für relativ einfach und leicht zu bedienen. Eine Geschäftsanforderung bestand darin, bestimmte Objekte im Baum nach Belieben zu gruppieren, was einer Änderung der Gruppierung von Objekten gleichkam. Deshalb habe ich zTree verwendet und einige Studien dazu durchgeführt. In diesem Artikel wird hauptsächlich das Beispiel von js vorgestellt, das das zTree-Plug-in zum Implementieren eines ziehbaren Baums verwendet. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Laden Sie zunächst die für zTree erforderlichen relevanten Pakete herunter und hängen Sie den offiziellen Download-Link an: zTree-Download. Nachdem Sie die relevanten Dateien eingegeben haben, können Sie zTree erstellen. Fügen Sie zuerst das ul-Tag zur Seite hinzu, dann fügen Sie die ID zum Baum hinzu, der Calss ist ztree und die Front-End-Seite ist fertig.

Hinweis: Alle folgenden Codes wurden nach meinen eigenen Bedürfnissen geschrieben und sind unvollständig. Beziehen Sie sich lediglich auf den Konfigurationsprozess und die Verwendung von Rückruffunktionen.

Frontend-Seite:

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

Dann müssen Sie vor dem Schreiben die offizielle API von zTree lesen Es wurde oben ausführlich erklärt. Befolgen Sie es einfach Schritt für Schritt. Die erste besteht darin, die Einstellung zu konfigurieren. Da ich zusätzlich zur Grundkonfiguration die Drag-and-Drop-Funktion benötige, muss die Einstellung auf „true“ gesetzt werden auf die erforderliche Konfiguration. Verwandte Rückruffunktionen werden auch im Rückruf konfiguriert.

Einstellungskonfiguration:

 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},
};

Nachdem Sie die Einstellung konfiguriert haben, schließen Sie jede Rückruffunktion ab und bestimmen Sie den Inhalt entsprechend Ihren Anforderungen. Es gibt entsprechende Einschränkungen, ob das Ziehen durchgeführt werden kann und ob das Ziehen erfolgreich sein kann, basierend auf dem Typ des übergeordneten Knotens und einigen anderen Regeln.

Rückruffunktion:

 //拖拽之前调用的函数
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]);
}

Nachdem die oben genannten Einstellungen und zugehörigen Funktionen abgeschlossen sind, können Sie die Initialisierungsmethode von zTree aufrufen und anfordern durch Ajax Die zurückgegebenen Parameter werden zum Ausfüllen des von uns benötigten Baums verwendet.

// 初始化对象分组树
 var treeObj = $("#modelTree");
 $.fn.zTree.init(treeObj, setting, data);
 zTree_Menu = $.fn.zTree.getZTreeObj("modelTree");

Der endgültige Baum wurde gebildet (kann gezogen werden):

Verwandte Empfehlungen; 🎜>

Beispielcode für das Mehrfachauswahl-Dropdown-Menü des zTree-Plug-Ins_Javascript-Kenntnisse

jQuery verwendet das zTree-Plug-In, um das Baummenü und das asynchrone Laden_jquery zu implementieren

Tutorial zur Verwendung des ZTree-Plug-in-Dropdown-Baums_Javascript-Kenntnisse

Das obige ist der detaillierte Inhalt vonBeispiele zur Erläuterung, wie jQuery das zTree-Plugin verwendet, um Drag-and-Drop-Funktionalität zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!