단일 페이지에서 두 zTree를 연결하는 방법

이번에는 단일 페이지에서 두 개의 zTree 연결을 구현하는 방법을 보여 드리겠습니다. 단일 페이지에서 두 개의 zTree 연결을 구현하기 위한 주의 사항은 무엇입니까?

소개

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

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

• 한 페이지에서 동시에 여러 개의 Tree 인스턴스 생성 가능

• JSON 데이터 지원

• 일회성정적생성 및 Ajax 비동기식 두 가지 방법 지원 loading

• 다양한 이벤트응답 및 피드백

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

• 스킨/개인 아이콘 변경 지원(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 메서드에서 이 메서드를 호출하고 상황에 맞게 매개변수를 전달한 다음 연결을 구현합니다.

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

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

추천 자료:

JS 클래스, 생성자 및 팩토리 함수를 사용하는 방법

nodejs에서 WeChat 공유 기능을 호출하는 방법

위 내용은 단일 페이지에서 두 zTree를 연결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!