Array 트리 데이터

아래 코드는 트리뷰(TreeView)를 구현하기 위한 Array 데이터 구조 입니다.

1
2
3
4
5
6
7
8
9
10
11
12
var data = [
  [0, "1", "경기도"],
  [0, "1.1", "경기도", "성남시"],
  [0, "1.1.1", "경기도", "성남시", "분당구"],
  [0, "1.2", "경기도", "수원시"],
  [0, "1.2.2", "경기도", "수원시", "팔달구"],
  [0, "1.2.1", "경기도", "수원시", "영통구"],
  [0, "1.1.2", "경기도", "성남시", "수정구"],
  [0, "1.3", "경기도", "안양시"],
  [0, "1.4", "경기도", "의정부시"],
  [0, "1.5", "경기도", "김포시"]
]

Array 트리 데이터

1
2
// setRows()함수로 트리 구현
treeDataProvider.setRows(data, "tree", false, "", "icon");

Array 데이터로 트리 구현

Array 데이터로 트리를 구현하기 위해서 아래 함수를 사용할 수 있습니다.

• TreeDataProvider.setRows()

함수를 호출하는 샘플 코드를 작성해 보겠습니다.

데이터 입력시 정렬을 위해 함수의 needSorting인자를 true로 설정합니다. 정렬에 대한 자세한 설명은 아래 내용을 참고 하세요.

데이터 지우기 정렬하고 입력하기

1
2
3
4
5
6
// 데이터 지우기
treeDataProvider.clearRows();

// 배열형 데이터 정렬하여 입력하기
treeDataProvider.setRows(data, "tree", true, "", "icon");
treeView.expandAll();

데이터 입력시 정렬을 하지 않고 입력 하려면 needSorting인자를 false로 설정합니다. 정렬에 대한 자세한 설명은 아래 내용을 참고 하세요.

데이터 지우기 정렬하지 않고 입력하기

1
2
3
4
5
6
// 데이터 지우기
treeDataProvider.clearRows();

// 배열형 데이터 정렬하지 않고 입력하기
treeDataProvider.setRows(data, "tree", false, "", "icon");
treeView.expandAll();

트리 구현을 위한 Array 데이터 계층 구조

Array 데이터 계층 구조에서 주목할 부분은 treeField 입니다. treeField는 이 데모의 데이터에서 두 번째 항목에 해당하는 필드 입니다. 즉,

1
2
3
4
'1'
'1.1'
'1.1.1'
...

treeField는 트리를 구성하기 위한 문자열이며 설명의 편의상 필드의 값을 트리코드(tree code)라 명명 하겠습니다.

트리코드(tree code)는 바로 전에 입력된 트리코드와 비교하여 문자열의 포함 여부 또는 문자열의 갯수를 기준으로 노드의 깊이(Level)를 판단 합니다. 트리코드에 대한 자세한 설명은 [B9-3 TreeView의 ItemModel 이해하기]를 참조하세요.

배열의 각 항목은 DataProvider에 구성된 필드(Field)들에 순서대로 매핑됩니다.

TreeDataProvider.setRows()함수의 정의는 아래와 같습니다.

1
function setRows(rows, treeField, needSorting, childrenField, iconField) {}

이 함수의 마지막 인자인 iconField에 데이터에서 아이콘 인덱스(icon index)에 해당하는 필드 이름을 넘겨줍니다. 이 함수의 두 번째 인자인 treeField에 데이터에서 트리코드에 해당하는 필드 이름을 넘겨줍니다.

하지만, 트리의 계층 구조가 바뀌어도 자동으로 이 필드의 값이 바뀌지는 않는다는 사실은 주의해야 합니다.

RealGrid 튜토리얼에 계층 구조 표현을 위한 데이터 구조에 대해 좀더 자세히 다루고 있는 문서들이 있습니다. 아래 링크를 참조하세요.

• B9-1 배열형 트리 데이터 구조이해
• B9-2 JSON형 트리 데이터 구조이해
• B9-3 TreeView의 ItemModel 이해하기

treeField값의 정렬

배열형 데이터를 입력할 때 주의할 점은 정렬되지 않은 treeField값을 입력할 경우 정확한 계층 구조를 만들지 못할 수도 있다는 사실입니다.

위의 배열형 데이터를 다시 자세히 보면 8행에 있는 성남시 수정구의 경우 treeField 값이 순방향 정렬 순서에 맞지 않는 곳에 위치해 있습니다.

이처럼 정렬되지 않은 배열 데이터를 입력할 경우 setRows() 함수의 로직으로 인해 원하는 계층 구조가 만들어 지지 않을 수 있습니다. 그러므로, 서버에서 데이터를 가져올때 미리 정렬을 하거나, needSorting인자를 true로 입력하여 트리를 구성하기 전에 반드시 treeField의 값을 정렬하도록 해야 합니다.

트리에 아이콘 표시하기

트리뷰(TreeView)에는 각 노드에 아이콘을 표시할 수 있습니다.

아래 트리 구현 함수들에서는 함수의 마지막 인자인 iconField에 트리컬럼에 표시할 아이콘의 index값이 들어 있는 필드명을 입력합니다. 이 필드에 들어있는 값이 트리노드의 기본 아이콘 인덱스(icon index)가 됩니다.

• TreeDataProvider.setRows()
• TreeDataProvider.setJsonRows()
• TreeDataProvider.setXmlRows()

또 다른 트리 구현 함수인 아래 함수들에서는 두 번째 인자인 options 즉, DataFillOptions의 rows속성의 값으로 위 속성명인 'rows'를 넘겨 주어야 합니다.

• TreeDataProvider.fillJsonData()
• TreeDataProvider.fillXmlData()
• TreeDataProvider.fillCsvData()

트리 아이콘 표시

트리뷰에서 사용할 아이콘의 목록을 ImageList로 작성하고 만들어진 ImageList를 TreeView.registerImageList()함수로 TreeView에 등록하면 아이콘 필드에 입력된 index값에 해당 하는 아이콘에 트리노드에 표시됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 이미지 리스트 만들기
var imgFiles = [
              "kr.png",
              "br.png",
              "fr.png",
              "mx.png",
              "pt.png",
              "es.png",
              "gb.png",
              "us.png",
              "ve.png",
              "icon_folder_col",
              "icon_folder_exp"
  ];
var imageList = new RealGridJS.ImageList("images", "/resource/image/smallflag/");
imageList.addUrls(imgFiles);

// 트리뷰에 이미지 리스트 등록하기
treeView.registerImageList(imageList);
treeView.setTreeOptions({
    iconImages: imageList.getName(),
    iconWidth: 20
});

트리 노드 아이콘 변경 하기

트리 노드의 아이콘 인덱스(icon index)를 가져오고 지정하기 위해

• TreeDataProvider.getIconIndex()
• TreeDataProvider.setIconIndex()

함수를 사용합니다.

현재 노드의 아이콘 변경하기

1
2
3
4
5
6
7
8
9
10
// 현재 노드의 아이콘을 9 또는 10으로 변경하기
var current = treeView.getCurrent();
if (current && current.dataRow) {
  var iidx = treeDataProvider.getIconIndex(current.dataRow);
  if (iidx == 9) {
    treeDataProvider.setIconIndex(current.dataRow, 10);
  } else {
    treeDataProvider.setIconIndex(current.dataRow, 9);
  }
}