본문 바로가기

Programming/.NET

[ASP.NET] TreeView

 1. TreeView

 

TreeView 컨트롤은 계층화된 데이터구조를 표현하는데 사용되는 컨트롤입니다. 때문에 TreeView 의 데이터소스로는 XmlDataSource 나 SiteMapDataSource 컨트롤(IHierarchicalDataSource 인터페이스를 상속받는)만이 사용될 수 있습니다.

 

 2. SiteMap 연동

 

프로젝트에 존재하는 sitemap 파일을 TreeView와 연동하려면 먼저 sitemap데이터를 연결짓는 SiteMapDataSource 컨트롤을 배치하고 TreeView의 DataSourceID에 해당 Data컨트롤의 ID를 지정하면 됩니다.

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"></asp:TreeView>

참고로 SiteMapDataSource 는 해당 프로젝트에 Web.sitemap 과 같은 사이트맵 파일이 존재해야 합니다.

 

 

위 예제는 SiteMapDataSource 컨트롤과 TreeView컨트롤을 매핑한 결과입니다.

 

 3. XML 연동

 

XML은 XML파일을 바인딩하는 XmlDataSource 컨트롤을 통해서 연동이 가능합니다. 우선 다음글에서와 같은 내용의 books.xml파일을 생성하고

 

2016/01/18 - [Programming/ASP.NET] - [ASP.NET] XML - 1

 

XmlDataSource 컨트롤로 해당 XML파일을 연결해 보겠습니다.

 

<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/books.xml">

</asp:XmlDataSource>

 

그리고 TreeView의 DataSourceID를 XmlDataSource의 ID값으로 설정하면 XML내용이 완벽히 바인딩됩니다.

 

 

 

하지만 경우에 따라 바인딩되는 요소를 제어하고 싶은 경우가 있는데 그럴때는 TreeView의 하위 요소인 DataBindings 요소를 사용하면 됩니다.

 

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSource1">
    <DataBindings>
        <asp:TreeNodeBinding DataMember="catalog" Text="서적관리" />
        <asp:TreeNodeBinding DataMember="book" TextField="id" />
        <asp:TreeNodeBinding DataMember="author" TextField="#InnerText" />
    </DataBindings>
</asp:TreeView>

 

TreeNodeBinding 요소는 XML 의 요소와 1:1로 매핑되며 DataMember 속성으로 실제 매핑될 XML요소를 지정합니다. Text 속성은 XML요소의 내용과는 상관없이 원하는 문자열을 표시하지만 TextField속성을 사용하여 XML요소의 속성을 지정하면 해당 속성값이 문자열로 표시됩니다. 예제에서의 두번째 TextField에는 #InnerText 가 지정되었는데 이것은 속성이 아닌 XML내부의 문자열을 가져오겠다는 의미입니다.

 

 4. 내장 스타일

 

Visual Studio의 디자인 모드에서 스마트태그를 선택하면 다음과 같이 자체지원하는 스타일을 적용할 수 있습니다.

 

 

내장 스타일을 적용하면 해당 스타일 고유의 노드아이콘이 표시되지만 원하는 경우 직접 제작한 이미지를 노드아이콘으로 적용할 수 있습니다.

 

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSource1" ShowCheckBoxes="All" 

CollapseImageUrl="~/dc.gif"></asp:TreeView>


CollapselmageUrl 속성은 하위 노드를 접었을 경우 보여지는 이미지를 의미합니다. 이 밖에 ExpandImageUrl은 하위 노드를 펼쳤을 경우에, LeafNodeStyle-ImageUrl은 최하위 노드에, NoExpandImageUrl은 펼침이 불가능한 노드에, ParentNodeStyle-ImageUrl은 상위노드에, RootNodeStyle-ImageUrl은 루트노드에 대한 노드이미지를 의미합니다.

 

이와 더불어 ShowLines 속성을 True로 설정하면 각 노드간에 연결선을 보여줄 수 있으며 스마트태그를 사용하면 라인과 노드이미지에 대한 전체적인 디자인을 지정할 수 있습니다.(Line에 관한 스타일은 ShowLines가 True로 되어 있어야 사용이 가능합니다.)

 

 5. 노드 선택

 

TreeView는 기본적으로 각 항목을 트리형태로 표시하는 걸로 끝내지만 CheckBox처럼 각 항목에 선택가능한 기능을 부여할 수 있습니다.

 

<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/books.xml"></asp:XmlDataSource>
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSource1" ShowCheckBoxes="All">

</asp:TreeView>

 

ShowCheckBoxes 속성은 실제 TreeView에 체크박스를 표시하는데 All값은 모든 노드에, leaf는 최하위 노드에만, None은 없음, Parent는 하위노드가 존재하는 상위노드에만, Root는 최상위 노드에만 체크박스를 적용합니다.

 

사용자가 TreeView의 노드를 선택하고 나면 이를 판단할 수 있는 방법도 있어야 하는데 이 때는 CheckedNodes 속성으로 확인할 수 있습니다.

 

TreeView1.ShowCheckBoxes = TreeNodeTypes.All;

if (TreeView1.CheckedNodes.Count > 0) {

}

 

다만 이것은 선택된 항목이 있는가를 판단하는 것이고 실제 선택된 노드의 요소를 가져오려면 foreach구문을 통해 순회처리를 하면 됩니다.

 

string msg = string.Empty;
foreach (TreeNode tn in TreeView1.CheckedNodes) {
    msg = tn.Text + "가 선택됨";
}

 

 6. 노드 조작

 

TreeView의 노드를 조작하는 작업의 대부분은 프로그램 구현을 통해 이루어 지게 됩니다. 우선 간단하게 다음 메소드를 호출하여 TreeView의 노드를 펼치거나 닫아보겠습니다.

 

TreeView1.ExpandAll();
TreeView1.CollapseAll();

 

페이지가 로드될때 위와 같은 작업을 하고자 한다면 Page_Load안에 넣어서는 안되고 DataBound 이벤트를 선언하여 해당 이벤트 처리기 안에 위 코드를 넣어야 합니다.

 

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSource1" ShowCheckBoxes="All" 

ShowLines="True" OnDataBound="TreeView1_DataBound"></asp:TreeView>

protected void TreeView1_DataBound(object sender, EventArgs e)
{
    TreeView1.CollapseAll();
}

 

만약 특정노트만을 접거나 펼치려면 원하는 해당 노드에 직접적으로 펼침이나 접음메소드를 호출하면 됩니다.

 

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSource1" ShowCheckBoxes="All" 

ShowLines="True" OnDataBound="TreeView1_DataBound">
    <DataBindings>
        <asp:TreeNodeBinding DataMember="catalog" Text="서적관리" />
        <asp:TreeNodeBinding DataMember="book" TextField="id" />
    </DataBindings>
</asp:TreeView>

 

protected void TreeView1_DataBound(object sender, EventArgs e)
{
    TreeView1.CollapseAll();
    TreeView1.FindNode("서적관리").Expand(); //또는 Expanded = true; 로 해도 같음
    TreeView1.FindNode("서적관리/bk102").Expand();
}

 

처리 순서는 먼저 모든 노드를 접은다음 가장 루트노드(서적관리)노드를 펼치고 그 하위에 bk102노드를 펼치도록 합니다. 이때 각 노드의 경로는 '/' 문자로 구분합니다.

 

노드 조작에는 위와 같이 접거나 펼치는것 이외에도 필요에 따라 특정 노드를 추가하거나 삭제해야 하는 경우도 있습니다.

 

우선 노드를 추가하는 것에 대해 알아보자면 TreeNode의 객체를 생성하고 해당 노드에 대한 필요한 속성을 처리한 다음 원하는 위치에 추가하는 순서로 진행됩니다.

 

<asp:Button ID="Button1" runat="server" Text="노드추가" OnClick="Button1_Click" />

protected void Button1_Click(object sender, EventArgs e)
{
    TreeNode tn = new TreeNode();

    tn.Text = "추가된노드";

    TreeView1.Nodes[0].ChildNodes[1].ChildNodes.Add(tn);
}

 

보시는 바와 같이 Nodes나 하위 노드를 지정하는 ChildNodes를 통해서도 노드를 선택할 수 있으며 선택된 노드에 대해 Add메소드를 호출하여 노드를 추가하고 있습니다. 하지만 오해하지 마십시오. TreeView의 노드를 추가하거나 삭제한다 해도 TreeView와 연결된 소스를 변경되지 않습니다.

 

TreeNode tn = TreeView1.FindNode("서적관리/bk102");
TreeView1.Nodes[0].ChildNodes.Remove(tn);

 

위 예제는 검색된 노드를 삭제합니다.

'Programming > .NET' 카테고리의 다른 글

[ASP.NET] 웹서비스(Web Service)  (0) 2016.09.27
[ASP.NET] URL 매핑 (URL 라우팅)  (0) 2016.09.21
[ASP.NET] TreeView  (0) 2016.09.13
[ASP.NET] WCF - 2  (0) 2016.09.07
[ASP.NET] WCF - 1  (0) 2016.08.31
[C#] Stream  (0) 2016.08.24

태그