jQuery zTree는 비동기 프로세스 중에 하위 노드를 반복적으로 추가합니다.

이번에는 비동기 프로세스 중 jQuery zTree의 하위 노드 반복 추가에 대해 알려드리겠습니다. 살펴보자.
zTree

소개

zTree는 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가 직접 새로 고쳐집니다. 그러면 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");

I을 사용하세요. 이 기사의 사례를 읽으셨다면, 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주의 깊게 살펴보시기 바랍니다.

추천 자료:

jquery로 웹팩을 구성하는 방법

jQuery EasyUI 작업 접이식 패널 아코디언 세부 단계

jQuery 작업 목록 군인들이 동적으로 새 요소를 추가합니다

위 내용은 jQuery zTree는 비동기 프로세스 중에 하위 노드를 반복적으로 추가합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!