트리 구현 - JSON 데이터

트리뷰(TreeView)를 구현하기 위해 JSON 데이터를 사용할 수 있습니다. JSON 데이터의 구조와 트리 구현 방법을 오른쪽 devbox에서 확인할 수 있습니다.

JSON 트리 데이터

아래 코드는 트리를 구현하기 위한 JSON형식의 데이터 입니다.

var data = {
  "rows":[
    { "icon":0, "do":"경기도",
      "rows":[
        { "icon":0, "do":"경기도", "si":"성남시",
          "rows":[
            { "icon":0, "do":"경기도", "si":"성남시", "gu":"분당구" },
            { "icon":0, "do":"경기도", "si":"성남시", "gu":"수정구" }
          ]
        },
        { "icon":0, "do":"경기도", "si":"수원시",
          "rows":[
            { "icon":0, "do":"경기도", "si":"수원시", "gu":"팔달구" },
            { "icon":0, "do":"경기도", "si":"수원시", "gu":"영통구" }
          ]
        },
        { "icon":0, "do":"경기도", "si":"안양시" },
        { "icon":0, "do":"경기도", "si":"의정부시" },
        { "icon":0, "do":"경기도", "si":"김포시" }
      ]
    }
  ]
}

JSON 데이터로 트리 구현 `(Only JS Support)`

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

먼저 setJsonRows() 함수를 호출하여 트리를 구현해 보겠습니다.

setJsonRows()로 트리 구현

// setJsonRows()로 트리 구현
treeDataProvider.setJsonRows(data, "rows", "", "icon");
treeView.expandAll();

같은 데이터를 fillJsonData() 함수를 사용해 트리를 구현해 보겠습니다.

데이터 지우기 fillJsonData()로 트리 구현

// 데이터 지우기
treeDataProvider.clearRows();

// fillJsonData()로 트리 구현
treeDataProvider.fillJsonData(data, {rows: "rows", icon: "icon"});
treeView.expandAll();

두 함수의 실행 결과는 동일 합니다.

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

트리를 구현하기 위한 JSON 데이터의 구조에 대해 조금 더 알아보겠습니다.

이 데모의 JSON 데이터 구조에서 주목할 부분은 rows라는 이름의 배열 속성 입니다. 이 속성은 트리의 계층구조를 표현하기 위한 속성명 입니다. rows 속성은 자식 노드를 위한 속성입니다. 즉, JSON 에서 계층 구조는 계층을 표현하기 위한 속성(여기서는 rows)에 하위 노드의 데이터를 배열로 넣어주면 됩니다.

이 속성명은 JSON데이터로 트리를 구현하기 위한 함수의 인자 또는 옵션의 속성으로 넘겨주게 됩니다.

아래는 TreeDataProvider.setJsonRows()함수의 정의 입니다. 위 속성명인 'rows'는 이 함수의 두 번째 인자인 rowsProp의 값으로 넘겨 주어야 합니다.

function setJsonRows(json, rowsProp, childrenProp, iconProp) {}

다음은 TreeDataProvider.fillJsonData()함수의 정의 입니다. 두 번째 인자인 options 즉 DataFillOptions의 rows속성의 값으로 위 속성명인 'rows'를 넘겨 주어야 합니다.

function fillJsonData(data, options) {}

일반적으로 SQL을 통해 데이터를 쿼리하는 방식으로 계층 데이터를 만들어내는 것은 쉽지 않습니다. 하지만, JSON 데이터가 가지는 계층 구조를 직접 트리뷰 구현에 사용할 수 있기 때문에 NoSQL, Document방식의 데이터를 트리뷰에 표현하기 위해 이 보다 좋은 방법은 없습니다.

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

트리에 아이콘 표시하기

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

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

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

트리 아이콘 표시

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

// 이미지 리스트 만들기
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)를 가져오고 지정하기 위해

함수를 사용합니다.

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

// 현재 노드의 아이콘을 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);
  }
}

RealGrid

RealPivot