이번에는 두 개의 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 요청 후 반영이 없으면 어떻게 해야 합니까? 백그라운드 데이터 성공
위 내용은 두 개의 zTree는 어떻게 서로 상호 작용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!