Tree

Tree(트리) 구조의 컨트롤의 사용법이나 개념이 궁금하다면 해당 페이지가 도움이 될 수 있습니다.

컨트롤 설명

데이터가 계층으로 구성된 경우 Tree 컨트롤을 사용할 수 있습니다.

트리 구조란 그래프의 일종으로, 한 노드에서 시작해서 다른 정점들을 순회하여 자기 자신에게 돌아오는 순환이 없는 연결 그래프입니다.

트리에서 최상위 노드를 루트 노드(root node 뿌리 노드)라고 합니다. 또한 노드 A가 노드 B를 가리킬 때 A를 B의 부모 노드(parent node), B를 A의 자식 노드(child node)라고 합니다. 자식 노드가 없는 노드를 잎 노드(leaf node 리프 노드) 또는 말단 노드 (terminal node)라고 합니다. 잎 노드가 아닌 노드를 내부 노드(internal node)라고 합니다.

아래 화면을 보면서 트리 구조에 대해 설명해보겠습니다. A는 최상위 노드로 루트 노드입니다. A를 펼치면 두개의 자식 노드인 B, C가 있습니다. A는 B, C의 부모 노드가 됩니다. B를 펼치면 자식 노드 D,E 가 있습니다. B는 D, E의 부모 노드가 됩니다. D를 펼치면 자식 노드 I가 있습니다. D는 I의 부모 노드가 되고 I는 더이상 자식 노드가 없으므로 리프 노드 입니다.

따라서 아래의 트리는 루트 노드 A 이고 내부 노드 B, C, D, E, F, G 이며 리프 노드 H, I , J, K 로 구성된 트리입니다.

디자인(Design) 모드

디자인 속성

선택한 아이템 디자인 적용

선택한 트리 노드의 텍스트와 배경 디자인을 선택할 수 있습니다. 텍스트의 색상, 사이즈, 볼드 값을 설정 할 수 있고 배경 색상을 설정 할 수 있습니다.

공통 디자인 속성

개발(Dev) 모드

전체 접기 및 펼치기 사용

트리의 상단에 트리의 전체 노드들을 접고 펼칠 수 있는 버튼을 추가할 수 있습니다.

트리 데이터 검색 사용

트리 데이터를 검색기능이 필요할 때 사용할 수 있는 기능입니다. 검색어에 입력한 키워드가 포함된 트리 노드를 조회합니다. 조회된 노드의 부모 노드가 있으면 루트 노드까지 보여줍니다.

Data

트리 멀티 선택 - 데이터 다중 선택 사용

해당 기능을 사용하면 트리에서 1개 이상의 노드를 체크박스를 사용하여 선택할 수 있습니다. 다중 선택 값은 연결한 카테고리에 컬렉션키의 값으로 저장됩니다.

상위 데이터 연결과 연결관계 설정을 한 경우 해당 값이 같이 저장됩니다.

[심화] 카테고리 연결관계에서 연결관계에 대한 이해를 도울 수 있습니다.

트리 노드를 선택하면 카테고리의 컬렉션키와 맵핑한 데이터소스의 키값이 들어가는걸 확인 할 수 있습니다.

// [개발(Dev)] - [DataSource] - [Fixed] 에서 고정데이터(JSON)을 활용한 예시
[
    {
        Title : "A",
        NodeId : "1" 
    },
    {
        Title : "B",
        NodeId : "2", 
        ParentId : "1"
    },
    {
        Title : "C",
        NodeId : "3",
        ParentId : "1"
    },
    {
        Title : "D",
        NodeId : "4",
        ParentId : "2"
    },
    {
        Title : "E",
        NodeId : "5",
        ParentId : "2"
    },
    {
        Title : "F",
        NodeId : "6",
        ParentId : "3"
    },
    {
        Title : "G",
        NodeId : "7",
        ParentId : "3"
    },
    {
        Title : "H",
        NodeId : "8",
        ParentId : "5"
    },
    {
        Title : "I",
        NodeId : "9",
        ParentId : "4"
    },
    {
        Title : "J",
        NodeId : "10",
        ParentId : "6"
    },
    {
        Title : "K",
        NodeId : "11",
        ParentId : "7"
    },
    {
        Title : "카페",
        NodeId : "12"
    },
    {
        Title : "에스프레소",
        NodeId : "13",
        ParentId : "12"
    },
    {
        Title : "콜드브루",
        NodeId : "14",
        ParentId : "12"
    },
    {
        Title : "티",
        NodeId : "15",
        ParentId : "12"
    },
    {
        Title : "아메리카노",
        NodeId : "16",
        ParentId : "13"
    },
    {
        Title : "라떼",
        NodeId : "17",
        ParentId : "13"
    },
    {
        Title : "아이스티",
        NodeId : "18",
        ParentId : "15"
    },
    {
        Title : "콜드브루",
        NodeId : "19",
        ParentId : "14"
    },
    {
        Title : "바닐라크림콜드브루",
        NodeId : "20",
        ParentId : "14"
    },
    {
        Title : "허브티",
        NodeId : "21",
        ParentId : "15"
    }
]

데이터소스 명 트리컨트롤에서 사용하고 싶은 데이터를 연결 할 수 있습니다.
컬렉션-데이터소스 키 연결 연결한 데이터 소스와 키 값들을 연결해야 트리에서 데이터를 사용할 수 있습니다. 데이터소스의 키값과 연결시키고 싶은 컬렉션 키값을 맵핑해줍니다.
노드의 키, 상위 노드 키 항목 설정 데이터소스에서 노드키로 사용할 키 값을 입력합니다. 부모 노드로 사용할 키 값도 입력해줍니다.
타이틀 타이틀 항목이 실제 트리에서 보이는 텍스트 값입니다. 데이터소스에서 타이틀에 해당하는 값을 입력해줍니다.