zTree가 비동기적으로 로드될 때 하위 노드 추가가 항상 반복되는 문제를 해결하는 방법

이번에는 zTree가 비동기적으로 로드될 때 항상 자식 노드 추가가 반복되는 문제를 해결하는 방법을 보여드리겠습니다. 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에 따라 다름)
매우 유연한 체크박스 또는 라디오 선택 기능 지원
다양한
• 이벤트

  응답 콜백 제공

유연한 편집(추가/삭제/수정/확인) 기능을 사용하면 원하는 대로 노드를 끌어서 놓을 수 있고 여러 노드를 끌어서 놓을 수도 있습니다.
한 페이지에서 동시에 여러 개의 Tree 인스턴스를 생성할 수 있습니다
간단한 매개변수 구성으로 유연하고 변경 가능한 기능을 얻을 수 있습니다

원래 질문

//添加结点, 产品和版本
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");

이 기사의 사례를 읽으신 후 방법을 익히셨을 것입니다. 자세한 내용은 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요! recomedended reader : ajax가 드롭 다운 상자를 구현하는 방법 방출 상자 없음 링크를 구현하지 않고 구조를 구현하는 방법은 드롭-드롭- 아래 메뉴 탐색

위 내용은 zTree가 비동기적으로 로드될 때 하위 노드 추가가 항상 반복되는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!