jQuery가 zTree 플러그인을 사용하여 드래그 앤 드롭 기능을 구현하는 방법을 설명하는 예

지금까지 접한 트리 플러그인 중에서 zTree는 비교적 간단하고 사용하기 쉬운 것 같아요. 비즈니스 요구 사항 중 하나는 특정 개체를 그룹으로 그룹화하는 것이었습니다. 트리의 개체를 마음대로 끌어서 놓을 수 있었는데 이는 개체 그룹화를 변경하는 것과 같습니다. 따라서 zTree를 사용하여 이에 대한 몇 가지 연구를 수행했습니다. 이번 글에서는 js에서 드래그 가능한 트리를 구현하기 위해 zTree 플러그인을 사용하는 예제를 주로 소개합니다. 편집자는 꽤 괜찮다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

먼저 zTree에 필요한 관련 패키지를 다운로드하고 공식 다운로드 링크인 zTree 다운로드를 첨부하세요. 관련 파일을 소개한 후 zTree를 빌드할 수 있습니다. 먼저 페이지에 ul 태그를 추가한 다음 트리에 id를 추가하면 calss는 ztree가 되고 프런트엔드 페이지가 완성됩니다.

참고: 아래 코드는 모두 내 필요에 따라 작성되었으며 불완전하므로 구성 프로세스 및 콜백 기능 사용을 참조하세요.

Front-end 페이지:

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

그런 다음 JavaScript를 작성하기 전에 zTree의 공식 API를 읽어야 합니다. 위에서 자세히 설명했습니다. 첫 번째는 설정을 구성하는 것입니다. 전체 zTree의 핵심 구성입니다. 기본 구성 외에 드래그 앤 드롭 기능이 필요하므로 edit를 구성했는데, 다른 매개변수는 반드시 true로 설정해야 합니다. 필수 구성에 대해. 콜백에는 관련 콜백 함수도 구성되어 있습니다.

설정 구성 :

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

설정을 구성한 후 각 콜백 기능을 완료하고 필요에 따라 내용을 결정합니다. 여기서는 부모 유형에 따라 드래그 앤 드롭이 가능한지 결정합니다. 노드 및 기타 규칙에는 드래그가 성공할 수 있는지 여부에 대한 제한이 있습니다.

콜백 함수:

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

형성된 최종 트리(드래그 가능):

관련 권장 사항

zTree 플러그인 다중 선택 드롭다운 메뉴 예제 code_javascript 기술

jQuery는 다음을 사용하여 구현됩니다. zTree 플러그인 트리 메뉴 및 비동기 loading_jquery

zTree 플러그인 드롭다운 트리 사용 tutorial_javascript 기술

위 내용은 jQuery가 zTree 플러그인을 사용하여 드래그 앤 드롭 기능을 구현하는 방법을 설명하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!