jQuery 는 ztree 플러그 인 을 사용 하여 끌 수 있 는 트 리 예제 를 구현 합 니 다.

현재 접 하고 있 는 트 리 플러그 인 에서 저 는 ztree 가 비교적 간단 하고 손 에 넣 기 쉽다 고 생각 합 니 다.한 번 의 업무 수 요 는 특정한 대상 을 나 누 어 트 리 에 있 는 대상 을 마음대로 끌 어 당 길 수 있 고 대상 의 그룹 을 바 꾸 는 것 과 같 기 때문에 저 는 ztree 를 사용 하여 열 학습 을 했 습 니 다.
 먼저 ztree 에 필요 한 관련 패 키 지 를 다운로드 하고 공식 다운로드 연결 을 첨부 합 니 다:ztree 다운로드,관련 파일 을 도입 하면 ztree 구축 이 가능 합 니 다.먼저 페이지 에 얼 라벨 을 붙 이 고 트 리 에 id 를 붙 이 고 calss 는 ztree 이 며 전단 페이지 가 완성 되 었 습 니 다.
메모:아래 의 모든 코드 는 제 가 원 하 는 대로 쓴 것 이 고 완전 하지 않 습 니 다.주로 설정 절차 와 리 셋 함수 의 사용 을 참고 하면 됩 니 다.
전단 페이지:

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

그리고 자 바스 크 립 트 를 쓰 세 요.쓰기 전에 ztree 의 공식 API 를 많이 읽 으 세 요.위 에 설명 되 어 있 습 니 다.한 걸음 한 걸음 만 하면 됩 니 다.우선 setting 을 설정 하 는 것 입 니 다.이것 은 전체 ztree 의 핵심 설정 입 니 다.저 는 기본 설정 을 제외 하고 드래그 기능 이 필요 하기 때문에 edit 를 설정 하 였 습 니 다.그 중에서 enable 은 반드시 true 로 설정 하고 다른 매개 변 수 는 필요 한 설정 을 봐 야 합 니 다.callback 에서 도 관련 반전 함 수 를 설정 합 니 다.
 설정 설정:

 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"); 

마지막 으로 형 성 된 나무(끌 어 당 길 수 있 는):
 
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.