1. 제품
  2.   뷰어
  3.   JavaScript
  4.   jsTree
 
  

jsTree: jQuery로 인터랙티브 트리 구조 구축

이 강력한 트리 플러그인으로 계층적 데이터를 생성, 관리 및 시각화하세요.

jsTree API란?

jsTree는 복잡한 JSON 데이터를 인터랙티브한 계층적 트리 구조로 변환하여 개발자에게 중첩된 JSON 객체를 시각화하고 탐색할 수 있는 강력한 방법을 제공합니다. jQuery 플러그인으로 구축된 이 도구는 원시 JSON을 확장/축소 가능한 노드 트리로 변환합니다. API 응답, 구성 파일 또는 모든 계층적 데이터 세트를 검사하는 데 이상적입니다.

JSON 시각화를 위한 주요 기능:

  • JSON-트리 변환: JSON 배열/객체를 부모-자식 노드로 자동 렌더링
  • 인터랙티브 탐색: 노드 확장/축소로 심층 JSON 구조 분석
  • 동적 로딩: 대규모 JSON 데이터 세트 지연 로딩으로 성능 최적화
  • 사용자 정의 노드 렌더링: JSON 데이터 유형(배열, 객체, 값)에 기반한 노드 스타일링
  • 검색 & 필터링: 복잡한 JSON 트리에서 키/값 빠르게 찾기

평면 JSON 뷰어와 달리 jsTree는 데이터의 계층 구조와 관계를 유지하므로 API 디버깅 또는 중첩된 JSON 스키마 문서화에 이상적입니다.

GitHub

GitHub 통계

이름:
언어:
별:
포크:
특허:
저장소가 마지막으로 업데이트된 시간:

jsTree를 선택해야 하는 이유

  • 검증된 솔루션: 10년 이상의 활발한 개발 이력
  • 경량: jQuery만 종속성으로 필요
  • 접근성: WCAG 2.0 준수
  • 풍부한 문서: 완벽한 API 참조
  • MIT 라이선스: 상용 사용 무료

설치

jsTree는 패키지 관리자를 통해 설치하거나 CDN에서 직접 포함할 수 있습니다.

NPM 설치


npm install jstree

참고: jsTree 전에 jQuery를 포함하는 것을 잊지 마세요.

코드 예제

다음 예제로 jsTree의 기능을 탐색하세요:

jsTree

예제 1: HTML 기반 기본 트리

jsTree를 생성하는 가장 간단한 방법은 중첩된 HTML 목록을 변환하는 것입니다. 이 접근 방식은 트리 구조가 정적이거나 프로토타이핑할 때 이상적입니다. 플러그인은 중첩된 UL/LI 구조를 확장/축소 기능이 있는 인터랙티브 트리로 자동 변환합니다. 기본 구현에는 최소한의 JavaScript만 필요하며 간단한 탐색 메뉴나 콘텐츠 구조에 적합합니다.

시연된 기능:

  • HTML-트리 변환
  • 확장/축소 기능
  • 기본 테마

예제 2: JSON을 통한 데이터 로딩

동적 애플리케이션의 경우 jsTree는 JSON에서 데이터를 로드할 수 있습니다. 이 접근 방식은 더 유연하며 프로그램 방식으로 트리 구조를 구축할 수 있습니다. JSON 형식은 직관적이며 각 노드에는 "id", "text", "children", "state" 등의 속성이 있습니다. 또한 각 노드에 아이콘, 비활성 상태 및 기타 속성을 지정할 수 있습니다. 이 방법은 트리 데이터가 데이터베이스나 API에서 오는 경우에 특히 유용합니다.

예제 3: 체크박스와 드래그 앤 드롭

jsTree는 핵심 기능을 확장하는 플러그인을 제공합니다. 체크박스 플러그인은 각 노드에 선택 가능한 체크박스를 추가하고 dnd 플러그인은 드래그 앤 드롭 작업을 가능하게 합니다. 이러한 기능은 사용자가 여러 항목을 선택하거나 계층 구조를 재구성해야 하는 파일 관리자 또는 권한 시스템과 같은 인터페이스를 구축할 때 필수적입니다. 이 플러그인들은 수백 개의 노드가 있어도 트리의 성능을 유지합니다.

고급 기능

jsTree는 전문적인 워크플로를 지원합니다:

  • 지연 로딩: 요청 시 노드 로드:

    지연 로딩

    
    $('#tree').jstree({
      'core': {
        'data': {
          'url': '/nodes/',
          'data': function (node) {
            return { 'id': node.id };
          }
        }
      }
    });
  • 이벤트 처리: 트리 상호작용에 응답:

    이벤트 리스너

    
    $('#tree').on('changed.jstree', function (e, data) {
      console.log('선택된 노드:', data.selected);
    });
  • 사용자 정의 테마: 트리 스타일링:

    사용자 정의 테마

    
    $('#tree').jstree({
      'themes': {
        'name': 'custom',
        'dots': false,
        'icons': false
      }
    });

결론

jsTree는 계층적 데이터 시각화를 위한 강력한 솔루션을 제공합니다. 다음에 이상적입니다:

  • 파일 브라우저: 디렉터리 구조 탐색
  • 탐색 메뉴: 다단계 메뉴 생성
  • CMS 인터페이스: 콘텐츠 계층 관리
  • 구성 도구: 중첩된 설정 편집

풍부한 플러그인 시스템과 활발한 유지보수로 jsTree는 웹 애플리케이션에서 트리 구조를 위한 핵심 솔루션으로 남아 있습니다.

유사한 제품

 한국인