zTree를 사용한 비동기 로딩(자세한 튜토리얼)

zTree는 jQuery로 구현된 다기능 "트리 플러그인"입니다. 이번 글을 통해 jQuery zTree의 비동기 로딩 시 자식 노드를 추가하는 중복 문제에 대해 공유하겠습니다. 필요한 친구들은 참고하시면 됩니다

zTree 소개

zTree는 다기능 "트리 플러그"입니다. -in"은 jQuery로 구현됩니다. 뛰어난 성능, 유연한 구성, 다양한 기능의 결합은 zTree의 가장 큰 장점입니다.

zTree는 오픈 소스이자 무료 소프트웨어(MIT 라이센스)입니다. zTree에 관심이 있거나 zTree의 지속적인 개발에 자금을 지원하고 싶다면 기부할 수 있습니다.

• zTree v3.0은 핵심 코드를 기능별로 나누어 불필요한 코드를 로드할 필요가 없습니다.

• 지연 로딩 기술을 채택하여 수만 개의 노드를 쉽게 로드할 수 있으며 기본적으로 IE6에서도 즉시 판매

• IE, FireFox, Chrome, Opera, Safari 및 기타 브라우저와 호환

• JSON 데이터 지원

• 노드 데이터의 정적 및 Ajax 비동기 로딩 지원

• 모든 것을 지원합니다. 스킨 변경/사용자 정의 아이콘(CSS에 따라 다름)

• 매우 유연한 체크박스 또는 라디오 선택 기능 지원

• 다양한 이벤트 응답 콜백 제공

• 유연한 편집(추가/삭제/수정/확인) 기능, 노드를 마음대로 드래그 앤 드롭할 수 있으며 여러 노드를 드래그할 수 있습니다

• 한 페이지에서 여러 트리 인스턴스를 동시에 생성할 수 있습니다

• 간단한 매개변수 구성으로 유연하고 변경 가능한 기능 구현

원본 질문

//添加结点, 产品和版本
function addNode(event) {
  rMenu.css({ "visibility": "hidden" });
  var treeNode = zTree.getSelectedNodes()[0];
  var pid;
  var nodeName;
  var treelevel;
  if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
   //添加产品结点
pid = 0;
   treeNode = null;
   treelevel = 1;
  } else if (treeNode) {
   //添加版本结点
pid = treeNode.id;
  treelevel = 2;
  }
  $.post(
   "AddNode.action",
   { type: treelevel, id: pid },
   function(nodeIdAndName) {
    var params = /([^\|]+)\|([^\|]+)/.exec(nodeIdAndName);
    if (!((!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) || treeNode.open)) {
     zTree.expandNode(treeNode, true);
    }
    treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel });
   });
}

원래 직접 자식 노드를 추가할 때 부모 노드가 확장되지 않으면 두 개의 동일한 자식 노드가 추가됩니다(처음). 부모 노드가 확장되었는지 판단했는데, 두 개의 동일한 하위 노드를 처음으로 추가할 때 이 문제를 해결하는 방법은 무엇입니까?

방법 1

if (!((!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) || treeNode.open)) {
     zTree.expandNode(treeNode, true);
    }
    treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel });

를

if(!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0)
    {
     treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel });
    }
    else if(treeNode.open)
    {
     if(treeNode.isParent)
     {
      zTree.reAsyncChildNodes(treeNode, "refresh");
     }
     else
     {
      treeNode.isParent=true;
      zTree.reAsyncChildNodes(treeNode, "refresh");
     }
    }
    else
    {
     zTree.expandNode(treeNode, true);
     treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel });
    }

로 변경합니다. 문제는 해결될 수 있지만 최적화 방법이 있나요? 변경하고 나니 코드 카테고리가 너무 많아진 느낌이네요

가장 좋은 방법

그렇게 번거로울 필요는 없을 것 같죠? 이틀 전에도 비슷한 질문에 답했습니다.

1. 하위 노드를 추가하기 위해 클릭한 후 ajax를 직접 백그라운드로 보내 데이터를 저장하고 성공 이벤트를 캡처합니다.

2 ajax가 성공하면 treeNode.zAsync 속성을 사용하여 상위 노드인지 확인할 수 있습니다. false인 경우 reAsyncChildNodes를 직접 새로 고치고, true인 경우 addN을 사용하세요...

if ((!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) || treeNode.zAsync) 
     treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel });
    else
     zTree.reAsyncChildNodes(treeNode, "refresh");

위 내용은 나중에 모두에게 도움이 되기를 바랍니다.

관련 기사:

노드의 Vue 프로젝트에서 프런트엔드와 백엔드 분리를 달성하는 방법

JS에서 스택을 표현하기 위해 두 개의 대기열을 구현하는 방법

Vue에서 구현하는 방법 단일 페이지 스켈레톤 화면

위 내용은 zTree를 사용한 비동기 로딩(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!