syidaxgrid
홈 가격 내 정보

GRID FEATURE · PRO

트리 데이터

트리는 폴더·조직도처럼 부모와 자식 관계가 있는 데이터를 들여쓰기와 펼침 버튼으로 보여 줍니다. 동일한 값끼리 묶는 행 그룹과 달리 부모 관계가 데이터에 이미 존재합니다.

Markdown 원문 Features

동작 원리와 선택 기준

경로 배열을 반환하는 getDataPath 또는 ID와 부모 ID 필드를 사용합니다. 둘을 함께 설정하면 경로 방식이 우선하므로 한 화면에서는 하나의 규칙을 정하는 것이 좋습니다.

이 기능을 제품에서 사용하려면 Pro 패키지와 유효한 라이선스가 필요합니다. 설정 이름이 같더라도 Community에서 Pro 기능이 활성화되는 것은 아닙니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

예제 1. 경로 배열로 조직 표시

각 행의 path 배열에 루트부터 현재 항목까지의 경로를 넣습니다.

javascript
grid.rowData = [
  { id: 'eng', name: '개발', path: ['회사', '개발'] },
  { id: 'web', name: '웹', path: ['회사', '개발', '웹'] },
];
grid.getRowId = row => row.id;
grid.columnDefs = [{ field: 'name', headerName: '조직' }];
grid.getDataPath = row => row.path;

결과 확인: 개발 아래에 웹이 나타납니다. 경로 라벨 변경과 안정적인 행 ID 변경은 서로 다른 작업입니다.

예제 2. 부모 ID로 연결

서버가 평면 목록을 반환하면 경로 배열로 변환하는 대신 연결 필드를 지정할 수 있습니다.

javascript
grid.getDataPath = undefined;
grid.rowData = [
  { id: 'root', parentId: null, name: '본사' },
  { id: 'sales', parentId: 'root', name: '영업' },
];
grid.treeIdField = 'id';
grid.treeParentField = 'parentId';
grid.treeLabelField = 'name';

결과 확인: id와 parentId의 관계로 트리가 구성됩니다. 중복 ID·순환 부모·없는 부모는 데이터를 공급하기 전에 검사하세요.

예제 3. 처음에는 요약만 표시

초기 데이터를 반영한 뒤 모든 가지를 접고 필요한 경로만 펼칩니다.

javascript
await grid.collapseAllTreeNodes();
// 경로 방식 예제에 적용할 때:
await grid.setTreeNodeExpanded(['회사', '개발'], true);

결과 확인: 자식이 없는 잎 노드는 펼칠 대상이 아닙니다. 실제 존재하는 경로인지 확인하고 호출합니다.

조합할 때와 문제를 해결할 때

트리의 표시 순서나 들여쓰기를 이용해 서버의 부모 ID를 역으로 만들지 마세요. 원본 관계를 별도로 유지합니다.

트리를 사용하지 않는 화면으로 전환할 때는 getDataPath와 연결 필드를 함께 정리해 이전 계층 설정이 남지 않게 합니다.

함께 읽기