두 개의 zTree는 어떻게 서로 상호 작용합니까?

이번에는 두 개의 zTree가 어떻게 상호 작용할 수 있는지 보여 드리겠습니다. 두 개의 zTree가 서로 상호 작용할 때 주의 사항은 무엇입니까? 다음은 실제 사례입니다. 함께 살펴보겠습니다.

소개

zTree는 JQuery의 핵심 코드를 사용하여 가장 일반적인 기능을 완료할 수 있는 Tree 플러그인 세트를 구현합니다.

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

• 하나의 다중 트리 인스턴스가 페이지에서 동시에 생성될 수 있습니다

• JSON 데이터 지원

• 일회성 정적 생성 및 Ajax 비동기 로딩 지원

• 다중 이벤트 응답 및 피드백 지원

• 트리 지원 노드 이동, 편집, 삭제

• 스킨/개인 아이콘 변경 지원(CSS 기반)

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

• 유연성을 달성하기 위한 간단한 매개변수 구성 기능

소개

오늘 개발할 때 요구 사항으로 인해 같은 페이지의 왼쪽과 오른쪽에 두 개의 트리를 구현해야 했습니다. 트리도 선택됩니다. (두 트리는 서로 연관되어 있습니다. 물론 필요에 따라 연결 조건과 방법을 변경할 수 있습니다.)

구현 트리의 코드는 더 이상 여기에 붙여넣지 않으며 연결을 달성하는 방법만 표시됩니다.

효과는 그림과 같습니다:

효과 그림

코드:

function linkageTreeClick(event, treeId, treeNode) {
  var param = treeNode.id; //获得点击树的ID
  var otherTree = $.fn.zTree.getZTreeObj(treeId);
  // 选取树的所有节点
  var nodes = otherTree.getNodesByParam(param);
  //遍历树的节点
  for (var i in nodes) {
   if(param==nodes[i].id){
    otherTree.selectNode(nodes[i]);
    return;
   }
  }
 }

여기서 treeId는 연결하려는 트리의 ID입니다. 에서 이 메서드를 호출하세요. zTree의 onclick 메소드를 사용하여 상황에 맞게 매개변수를 전달한 후 연결을 구현하세요.

MethodselectNode()매개변수는 트리의 노드이며, 그 기능은 노드를 선택하도록 하는 것입니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

webpack을 사용하여 jquery 환경 구성을 작성하는 방법

jQuery의 Validate 플러그인이 입력 값을 확인하는 방법

Ajax 요청 후 반영이 없으면 어떻게 해야 합니까? 백그라운드 데이터 성공

jQuery EasyUI 접이식 패널 사용

위 내용은 두 개의 zTree는 어떻게 서로 상호 작용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!