TreeView 웹 서버 컨트롤 개요

아티클
10/22/2014

업데이트: 2007년 11월

TreeView 웹 서버 컨트롤은 목차나 파일 디렉터리와 같은 계층적 데이터를 트리 구조로 표시하는 데 사용됩니다.

이 항목의 내용은 다음과 같습니다.

기능
배경
코드 예제
클래스 참조

기능

TreeView 컨트롤은 다음과 같은 기능을 지원합니다.

컨트롤의 노드를 XML 문서와 같은 계층적 데이터로 바인딩할 수 있는 자동 데이터 바인딩을 지원합니다.
SiteMapDataSource 컨트롤이 통합된 사이트 탐색을 지원합니다.
선택 가능한 텍스트 또는 하이퍼링크로 노드 텍스트를 표시할 수 있습니다.
테마, 사용자 정의 이미지 및 스타일을 통해 모양을 사용자 지정할 수 있습니다.
TreeView 개체 모델을 프로그래밍 방식으로 액세스하여 트리 만들기, 노드 채우기, 속성 설정 등을 동적으로 수행할 수 있습니다.
지원되는 브라우저에서 서버에 대한 클라이언트측 콜백으로 노드 채우기를 수행할 수 있습니다.
각 노드 옆에 확인란을 표시할 수 있습니다.

맨 위로 이동

배경

TreeView 컨트롤은 사용자 작업에 대한 응답으로 몇 가지 다른 데이터 형식을 표시할 수 있습니다. 여기에는 컨트롤에 선언적으로 지정되는 정적 데이터, 컨트롤에 바인딩되는 데이터, TreeView 컨트롤에 프로그래밍 방식으로 추가되는 데이터가 포함됩니다.

정적 데이터 표시

TreeView 컨트롤의 자식인 TreeNode 요소의 컬렉션을 만들어서 TreeView 컨트롤에 정적 데이터를 표시할 수 있습니다. 이러한 자식 요소는 자식 노드라고도 부릅니다.

다음 예제에서는 세 개의 노드가 있고, 그 중 두 노드는 자식 노드를 가진 TreeView 컨트롤에 대한 태그를 보여 줍니다.

<asp:TreeView ID="MyTreeView" Runat="server">
  <Nodes>
    <asp:TreeNode Value="Child1" Expanded="True" Text="1">
      <asp:TreeNode Value="Grandchild1" Text="A" />
      <asp:TreeNode Value="Grandchild2" Text="B" />
    </asp:TreeNode>
    <asp:TreeNode Value="Child2" Text="2" />
    <asp:TreeNode Value="Child3" Expanded="True" Text="3">
      <asp:TreeNode Value="Grandchild1" Text="A" />
    </asp:TreeNode>
  </Nodes>
</asp:TreeView>

TreeView 컨트롤에 데이터 바인딩

XmlDataSource 및 SiteMapDataSource 컨트롤과 같이 IHierarchicalDataSource 인터페이스를 지원하는 데이터 소스에 TreeView 컨트롤을 바인딩할 수 있습니다. 또한 데이터를 바인딩할 때 데이터 소스에서 채워진 필드를 완전히 제어할 수 있습니다. 자세한 내용은 TreeView 웹 서버 컨트롤에 데이터 바인딩을 참조하십시오.

TreeNodeCollection을 사용하여 데이터를 프로그래밍 방식으로 표시

TreeNodeCollection 클래스를 반환하는 Nodes 속성에 액세스하여 프로그래밍 방식으로 TreeView 컨트롤을 데이터로 채울 수 있습니다. TreeNodeCollection은 TreeNode 개체의 강력한 형식의 컬렉션입니다. TreeNode 개체에는 TreeNode 개체를 포함할 수 있는 ChildNodes라는 속성이 포함되기 때문에 TreeNodeCollection 클래스는 TreeView 컨트롤의 모든 노드를 나타내는 계층적 데이터 구조입니다.

Nodes 컬렉션에서 이동하는 방법에 대한 예제는 Nodes를 참조하십시오.

TreeView 노드 형식

TreeView 컨트롤은 하나 이상의 노드로 구성됩니다. 트리의 각 항목은 노드라고 부르며 TreeNode 개체에 의해 표시됩니다. 다음 표에서는 세 가지 다른 형식의 노드를 보여 줍니다.

노드 형식	설명
Root	부모 노드가 없고 하나 이상의 자식 노드가 있는 노드입니다.
Parent	부모 노드가 있고 하나 이상의 자식 노드가 있는 노드입니다.
Leaf	자식 노드가 없는 노드입니다.

일반적인 트리에는 루트 노드가 하나만 있지만 TreeView 컨트롤을 사용하면 트리 구조에 루트 노드를 여러 개 추가할 수 있습니다. 이 기능은 제품 범주 목록에서와 같이 단일 기본 루트 노드를 표시하지 않고 항목 목록을 표시할 때 유용합니다.

각 노드에는 Text 속성 및 Value 속성이 포함됩니다. Text 속성의 값은 TreeView 컨트롤에 표시되며, Value 속성은 노드와 연결된 포스트백 이벤트에 전달된 데이터와 같이 노드에 대한 추가 데이터를 저장하는 데 사용됩니다.

TreeView 컨트롤의 노드를 클릭하면 포스트백을 통한 선택 이벤트를 발생시키거나 다른 페이지로 이동할 수 있습니다. href 속성이 설정되지 않은 경우 노드를 클릭하면 사용자 지정 기능을 제공하도록 처리될 수 있는 SelectedNodeChanged 이벤트를 발생시킵니다. 각 노드에는 노드 확장 또는 축소와 같이 노드가 클릭될 때 발생하는 특정 작업을 결정하는 데 사용될 수 있는 SelectAction 속성도 있습니다. 노드를 클릭할 때 선택 이벤트를 발생시키는 대신 다른 페이지로 이동하도록 하려면 노드의 href 속성을 빈 문자열("")이 아닌 값으로 설정합니다.

요청 시 TreeNode 데이터 채우기

데이터 구조를 정적으로 정의하는 것은 실용적이지 않을 수 있으며, 데이터가 런타임에 수집되는 정보에 의존할 수도 있습니다. 데이터를 동적으로 표시하기 위해 TreeView 컨트롤은 동적 노드 채우기를 지원합니다. TreeView 컨트롤이 요청 시 데이터를 채우도록 구성된 경우 사용자가 노드를 확장하면 컨트롤이 이벤트를 발생시킵니다. 이벤트 처리기는 적절한 데이터를 검색한 다음 사용자가 클릭한 노드를 채웁니다. 요청 시에 TreeNode 개체에 데이터를 채우려면 노드의 PopulateOnDemand 속성을 true로 설정하고 TreeNodePopulate 이벤트 처리기를 만들어서 TreeNode 개체에 데이터를 채웁니다.

클라이언트측 TreeView 노드 채우기

브라우저 기능 구성 파일에서 SupportsCallback 속성이 true로 설정된 브라우저는 클라이언트측 노드 채우기를 지원합니다.

클라이언트측 노드 채우기를 사용하면 TreeView 컨트롤에서 서버로 전체 포스트백을 수행할 필요 없이 클라이언트 스크립트에서 서버의 TreeNodePopulate 이벤트를 호출하여 노드를 채울 수 있습니다. 클라이언트측 노드 채우기에 대한 자세한 내용은 PopulateNodesFromClient를 참조하십시오.

클라이언트 스크립트 설정

기본적으로 상위 수준 브라우저에서 TreeView 컨트롤의 노드에 대한 확장/축소 기능은 클라이언트 스크립트를 사용하여 수행됩니다. 클라이언트 스크립트를 사용하면 컨트롤이 새 구성을 렌더링하기 위해 서버에 포스트백할 필요가 없기 때문에 효율적으로 렌더링할 수 있습니다.

참고:
클라이언트 스크립트가 브라우저에 설정되지 않았거나 브라우저가 클라이언트 스크립트를 지원하지 않는 경우 TreeView 컨트롤은 하위 수준 모드로 전환하여 사용자가 노드를 클릭할 때마다 서버에 포스트백을 수행합니다.

TreeView 포스트백

기본적으로 TreeView 컨트롤은 브라우저가 클라이언트 스크립트를 지원하지 않거나 EnableClientScript 속성이 false로 설정되지 않은 한 클라이언트의 확장/축소 기능을 처리합니다. PopulateNodesFromClient 속성이 true로 설정되어 있고 브라우저에서 클라이언트 스크립트를 지원하면 TreeView 컨트롤은 전체 페이지를 포스트백하지 않고 서버에서 데이터를 검색합니다.

TreeView 컨트롤이 선택 모드인 경우 사용자가 노드를 클릭할 때마다 서버에 대한 포스트백이 발생하고 SelectedNodeChanged 이벤트가 발생합니다.

일반적으로 TreeView 컨트롤이 선택 모드이거나 노드가 동적으로 채워지는 경우 포스트백 이벤트를 처리해야 합니다. 그 이유는 PopulateOnDemand 또는 PopulateNodesFromClient 속성이 true로 설정되어 있기 때문입니다.

UpdatePanel 컨트롤에서 TreeView 컨트롤 사용

포스트백을 통해 전체 페이지를 업데이트하는 대신 UpdatePanel 컨트롤을 사용하여 페이지의 선택한 영역을 업데이트할 수 있습니다. UpdatePanel 컨트롤 내부에서 TreeView 컨트롤을 사용하려면 다음 제한을 준수해야 합니다.

TreeView 콜백은 비동기 포스트백과 연결되어야 하며 그렇지 않은 경우에는 콜백 이벤트 유효성 검사가 실패합니다. TreeNode 컨트롤의 PopulateOnDemand 속성을 true로 설정해야 콜백을 사용할 수 있습니다. 다음 방법 중 하나를 사용하여 TreeView 콜백에서 UpdatePanel 컨트롤을 사용할 수 있습니다.
- TreeView 컨트롤이 UpdatePanel 컨트롤 내부에 없으면 비동기 포스트백의 일부가 아닌 TreeNode 컨트롤에서 콜백을 사용할 수 없습니다. 이 작업을 수행하려면 PopulateOnDemand 속성을 false로 설정합니다.
- 비동기 포스트백 동안 콜백을 등록하는 모든 컨트롤을 프로그래밍 방식으로 새로 고칩니다. 예를 들어 TreeView 컨트롤을 UpdatePanel 컨트롤 내부에 배치할 수 있습니다. TreeView 컨트롤을 포함하는 UpdatePanel 컨트롤을 새로 고치면 TreeView 컨트롤은 비동기 포스트백이 발생한 UpdatePanel 컨트롤에 있지 않아도 됩니다.
CSS 스타일시트 클래스에 대한 참조를 사용하여 스타일을 적용해야 합니다. 예를 들어 property-subproperty 특성을 사용하여 NodeStyle 속성을 설정하는 대신 property-CssClass 특성을 사용하여 스타일을 설정합니다. 마찬가지로 NodeStyle 템플릿을 사용하여 스타일을 설정할 때는 템플릿의 CssClass 특성을 사용합니다.
EnableClientScript 속성이 true여야 합니다(기본값). 또한 TreeView 컨트롤에서 콜백을 사용하는 경우에는 비동기 포스트백 간에 EnableClientScript 속성을 변경할 수 없습니다.

UpdatePanel 컨트롤 사용에 대한 자세한 내용은 UpdatePanel 컨트롤 개요 및 부분 페이지 렌더링 개요를 참조하십시오.

TreeNode 렌더링

각 TreeNode 개체에는 다음 이미지에 표시되고 아래 표에 설명된 네 개의 UI 요소가 포함됩니다.

TreeNode UI 요소

항목	설명
확장/축소 이미지	자식 노드를 표시하도록 노드를 확장할 수 있는지 여부를 나타내는 선택적 이미지. 기본적으로 노드를 확장할 수 있으면 + 기호가 표시되고 노드를 축소할 수 있으면 - 기호가 표시됩니다.
확인란	사용자가 특정 노드를 선택할 수 있도록 선택적으로 확인란을 설정할 수 있습니다.
노드 이미지	노드 텍스트 옆에 표시할 노드 이미지를 지정할 수 있습니다.
노드 텍스트	노드 텍스트는 TreeNode 개체에 표시되는 실제 텍스트입니다. 노드 텍스트는 탐색 모드의 하이퍼링크나 선택 모드의 단추와 같이 작동할 수 있습니다.

TreeView 컨트롤은 자체 속성 외에도 각 노드 형식에 대한 TreeNodeStyle 컨트롤의 속성을 지원합니다. 이러한 스타일 속성은 모든 노드 형식에 적용되는 NodeStyle 속성을 재정의합니다.

TreeView에는 또한 모든 노드에 대한 들여쓰기 수준을 지정하는 NodeIndent 속성이 있습니다. 노드는 TreeView 컨트롤을 렌더링하는 방향으로 들여써집니다. 왼쪽에서 오른쪽으로 렌더링하는 로캘의 경우에는 왼쪽 면으로부터 들여쓰며, 오른쪽에서 왼쪽으로 렌더링하는 로캘의 경우에는 오른쪽 면으로부터 들여씁니다.

또한 노드를 선택하거나 마우스로 가리킬 때의 노드 스타일을 다르게 적용할 수 있습니다. 노드의 Selected 속성을 true로 설정하면 선택한 노드의 선택되지 않은 스타일 속성을 재정의하는 SelectedNodeStyle 속성이 적용됩니다. 마우스로 노드를 가리키면 HoverNodeStyle 속성이 적용됩니다. 다음 이미지와 표에서는 TreeNodeStyle 속성에 대해 설명합니다.

TreeNodeStyle 속성

노드 속성	설명
NodeSpacing	전체 현재 노드와 근처 위아래 노드의 수직 간격 크기를 지정합니다.
VerticalPadding	TreeNode 텍스트의 위와 아래에서 렌더링되는 공간 크기를 지정합니다.
HorizontalPadding	TreeNode 텍스트의 왼쪽과 오른쪽에서 렌더링되는 공간 크기를 지정합니다.
ChildNodesPadding	TreeNode의 자식 노드 위아래의 공간 크기를 지정합니다.
ImageUrl	TreeNode 옆에 표시되는 이미지의 경로를 지정합니다.

자세한 내용은 TreeView 웹 서버 컨트롤의 모양과 느낌 사용자 지정을 참조하십시오.

TreeView 노드 옆에 확인란 표시

TreeView 컨트롤의 또 다른 사용자 지정 렌더링 기능은 ShowCheckBoxes 속성을 사용하여 노드 텍스트와 이미지 사이의 확인란을 렌더링하는 기능입니다. 확인란을 표시하면 사용자가 여러 노드를 한 번에 선택할 수 있으며, 이 기능은 사용자가 여러 뉴스그룹을 동시에 선택하고 구독할 수 있도록 하는 뉴스그룹 트리와 같은 인터페이스에 특히 유용합니다. 확인란 사용에 대한 자세한 내용은 TreeView 웹 서버 컨트롤의 선택, 이동 및 확인란을 참조하십시오.

ExpandDepth 속성 사용

기본적으로 TreeView 컨트롤은 확장된 트리의 모든 노드를 표시합니다. 처음에 모든 수준을 표시하도록 TreeView 컨트롤을 구성할 수 있습니다. 이렇게 하려면 ExpandDepth 속성을 표시하려는 노드 수준을 나타내는 숫자로 설정하면 됩니다. 예를 들어 ExpandDepth 속성을 2로 설정하면 클라이언트에서 사이트를 처음에 렌더링할 때 두 수준의 노드 또는 두 개의 자식 노드가 표시됩니다.