TreeView 아키텍처

TreeView 아키텍처는 매우 간단합니다. 왜냐하면 많은 작업을 브라우저의 DOM에 위임하기 때문입니다.

이 컨트롤은 100% 데이터 바인딩 방식입니다. itemsSource 속성은 노드를 나타내는 데이터 항목 배열을 정의하며, 이 배열은 childItemsPath 속성에 의해 정의된 대로 자식 요소를 포함할 수 있습니다. displayMemberPath 속성은 트리 노드에 표시될 텍스트를 포함하는 항목의 속성 이름을 정의합니다.

바인딩 속성 중 하나가 변경되면, 컨트롤은 itemsSource 배열을 스캔하여 DOM 요소를 생성하고, 이를 통해 노드를 표시합니다.

가상화는 사용되지 않기 때문에 사용자가 컨트롤을 스크롤하거나 노드를 접거나 펼칠 때 DOM 요소의 수는 일정하게 유지됩니다. 하지만 이는 큰 제약이 되지 않으며, TreeView는 지연 로딩(lazy-loading)을 지원하여 특정 노드를 펼칠 때 데이터를 로드할 수 있습니다.

TreeView에는 selectedItem 속성이 있어 현재 선택된 데이터 항목을 itemsSource 배열에서 가져오거나 설정할 수 있습니다. 또한 selectedNode 속성이 있어 현재 항목을 감싸고 있는 트리 노드를 가져오거나 설정할 수 있습니다. selectedNode 속성을 사용하여 노드를 접거나 펼치거나 선택을 이동할 수 있습니다. 또한 getNode 메서드를 사용하여 특정 데이터 항목을 나타내는 노드에 대한 참조를 얻을 수 있습니다.

트리를 변경하려면 itemsSource 배열을 변경하고 loadTree 메서드를 호출하여 노드를 재생성해야 합니다.

TreeView 컨트롤은 단일 선택과 다중 선택 기능을 모두 지원합니다:

• allowMultiSelect: 다중 선택을 활성화하는 boolean 속성으로, true 로 설정하면 다중 선택이 가능합니다. 기본값은 false로, 이 경우 단일 노드 선택 동작이 제공됩니다.

• selectedNodes: 다중 선택이 활성화된 경우, 현재 선택된 모든 노드 목록을 가져오는 속성입니다.

또한, TreeView 컨트롤은 다음과 같은 키보드 명령을 지원합니다: