테이블 시트 테이블 시트 시작하기 8 - 데이터 계층 구조 표시
페이지 정보
작성자 GCK루카스
작성일 2023-09-05 11:32 조회 316회
댓글 0건
본문
관련링크
이번 스터디에서는 SpreadJS에서 제공하는 테이블 시트의 계층 구조 표시 기능을 소개합니다.
테이블 시트 다중 그룹화에 대한 내용은 이전 글을 참고해 주세요!
데이터 계층 구조 표시
이번에는 데이터를 계층 구조로 표시하는 방법에 대해서 설명합니다.
테이블 시트에서는 계층 구조를 포함하는 JSON 데이터를 바인딩하여
다음과 같이 데이터를 계층 구조로 표시할 수 있습니다.
테이블 시트에 의한 계층 표시
계층 구조 표시에서 사용할 수 있는
JSON 데이터 유형
데이터를 계층 구조로 표시하기 위해 테이블 시트는 다음 네 가지 유형의 JSON 데이터 구조를 지원합니다.
1. id 및 parentId 요소를 포함하는 계층 데이터
// id와 parentId 요소를 포함하는 계층 데이터의 예
[
{ id: 1, parentId: -1 },
{ id: 2, parentId: 1 },
{ id: 3, parentId: 2 },
]2. children 요소가 포함된 계층 데이터
// children 요소를 포함하는 계층 데이터의 예
[
{
name: 'USA',
children: [
{
name: 'Texas',
children: [
{
name: 'Houston',
}
]
}
]
}
]3. level 요소가 포함된 계층 데이터
// level 요소를 포함하는 계층 데이터의 예
[
{ name: 'USA', level: -1, id: 1 },
{ name: 'Texas', level: 0, id: 2 },
{ name: 'Houston', level: 1, id: 3 },
]4. primary key가 포함된 계층 데이터
// primary key를 포함하는 계층 데이터의 예
// "1.1"이나 "1.1.1"이라는 독자적인 요소를
// parent key로 변환하여 계층 표시합니다.
[
{ id: '1' },
{ id: '2' },
{ id: '1.1' },
{ id: '1.1.1' },
]구현 예
테이블 시트에서 데이터 계층 표시를 구현한 예를 소개합니다.
1. 테이블 시트 준비
먼저 테이블 시트를 준비합니다.
테이블 시트 시작하기 1 - 기능 개요 및 데이터 표시에서 소개한 방법을 사용해
테이블 시트를 초기화합니다.
2. 데이터 및 열 준비
이번에는 테이블 시트가 지원하는 네 종류의 데이터 구조 중
'level 요소를 포함한 계층 데이터'를 사용하여 계층 표시를 구현합니다.
이전 글에서 준비한 테이블 시트의 바인드 데이터(변수명: orderData)를
다음과 같은 데이터로 바꿉니다.
또한 변수 이름을 orderData에서 data1로 변경합니다.
var data1 = [
{ id: 1, 폴더: '공유 문서', 수정한날짜: '2023/03/07', 수정한사람: '김성태', level: 0 },
{ id: 2, 폴더: '전사 공통', 수정한날짜 '2022/03/12', 수정한사람: '홍길동', level: 1 },
{ id: 3, 폴더: '사칙', 수정한날짜: '2022/03/11', 수정한사람: '임준호', level: 2 },
{ id: 4, 폴더: '총무 부서', 수정한날짜: '2023/04/17', 수정한사람: '강하영', level: 1 },
{ id: 5, 폴더: '업무 매뉴얼', 수정한날짜: '2023/09/07', 수정한사람: '구지성', level: 2 },
{ id: 6, 폴더: '인사 부서', 수정한날짜: '2020/12/07', 수정한사람: '오지수', level: 1 },
{ id: 7, 폴더: '시스템 부서', 수정한날짜: '2020/01/07', 수정한사람: '오지수', level: 1 },
{ id: 8, 폴더: '개발 부서', 수정한날짜: '2021/01/08', 수정한사람: '임준호', level: 0 },
{ id: 9, 폴더: '공사 표준안', 수정한날짜: '2020/03/07', 수정한사람: '홍길동', level: 1 },
{ id: 10, 폴더: '하드웨어 사양서', 수정한날짜: '2014/08/07', 수정한사람: '강하영', level: 2 },
{ id: 11, 폴더: '소프트웨어 사양서', 수정한날짜: '2023/03/07', 수정한사람: '임준호', level: 2 },
{ id: 12, 폴더: '인터페이스 사양서', 수정한날짜: '2023/02/07', 수정한사람: '홍길동', level: 2 },
{ id: 13, 폴더: 'OS사양서', 수정한날짜: '2023/01/07', 수정한사람: '강하영', level: 2 },
{ id: 14, 폴더: 'IO사양서', 수정한날짜: '2023/02/07', 수정한사람: '오지수', level: 2 },
{ id: 15, 폴더: '옵션 사양서', 수정한날짜: '2022/11/07', 수정한사람: '홍길동', level: 2 },
{ id: 16, 폴더: '소스 코드', 수정한날짜: '2023/07/07', 수정한사람: '이유리', level: 1 },
{ id: 17, 폴더: '샘플 파일', 수정한날짜: '2023/04/07', 수정한사람: '이유리', level: 2 },
{ id: 18, 폴더: '오류 사양서', 수정한날짜: '2023/03/07', 수정한사람: '홍길동', level: 1 },
{ id: 19, 폴더: '경비', 수정한날짜: '2020/03/07', 수정한사람: '임준호', level: 0 },
{ id: 20, 폴더: '정산', 수정한날짜: '2023/08/07', 수정한사람: '홍길동', level: 1 },
{ id: 21, 폴더: '예산 신청', 수정한날짜: '2014/09/07', 수정한사람: '강하영', level: 1 },
];원래 코드의 addTable 부분을 다음과 같이 변경하고
위 데이터의 각 요소를 열로 테이블 시트에 설정합니다.
// 데이터 매니저에 테이블을 추가합니다.
var productTable = dataManager.addTable('계층 표시', {
data: data1,
// 스키마 정보를 설정합니다.
schema: {
// 열 정보를 설정합니다.
columns: {
Folder: { dataName: '폴더' },
UpdateDate: { dataName: '수정한날짜' },
User: { dataName: '수정한사람' },
HierarchyLevel: { dataName: 'level' },
Id: { dataName: 'id', isPrimaryKey: true },
},
},
});3. 계층 정보 설정
데이터의 계층 구조 정보를 테이블 시트와 연결합니다.
hierarchy 속성을 사용하여 이전 설정에 이어 다음 코드를 추가합니다.
// 데이터 매니저에 테이블을 추가합니다.
var productTable = dataManager.addTable('계층 표시', {
data: data1,
// 스키마 정보를 설정합니다.
schema: {
// 열 정보를 설정합니다.
columns: {
Folder: { dataName: '폴더' },
UpdateDate: { dataName: '수정한날짜' },
User: { dataName: '수정한사람' },
HierarchyLevel: { dataName: 'level' },
Id: { dataName: 'id', isPrimaryKey: true },
},
// 계층 정보를 설정합니다.
hierarchy: {
// 설정할 JSON 데이터의 종류를 설정합니다.（지금은 "Level"）
type: 'Level',
// 계층 정보가 포함된 열을 지정합니다.
column: 'HierarchyLevel',
// 계층 표시할 열을 지정합니다.
outlineColumn: {
value: 'Folder',
},
},
},
});덧붙여, hierarchy 속성에서는 위 설정 이외에도,
사용하는 JSON 데이터의 종류에 맞춰 다양한 계층 표시 관련 설정이 가능합니다.
자세한 내용은 SpreadJS API 도움말에서 IHierarchyOption을 참고하시기 바랍니다.
4. 뷰 설정
원래 코드에 있는 뷰의 열 정보를 이번에 사용하는 JSON 데이터에 맞추어
아래와 같이 설정하면 계층 표시 준비가 완료됩니다.
// 뷰의 열 정보를 정의합니다.
var columnInfos = [
{ value: "Folder", caption: "폴더", width: 280},
{ value: "UpdateDate", caption: "수정한 날짜", style: { formatter: "yyyy년mm월dd일", } },
{ value: "User", caption: "수정한 사람" },
];여기까지 구현한 코드의 데모를 아래에 구현하였습니다.
테이블 시트에 바인딩한 데이터가 계층으로 표현되었는지 확인할 수 있습니다.
5. 각 계층에 체크박스와 아이콘 표시
테이블 시트의 계층 표시 기능에서도 각 계층 별 아이콘 이미지를 설정하거나
트리의 부모/자식 관계와 연동하여 동작하는 체크박스를 설정할 수 있습니다.
예를 들어, 체크 박스는 이전에 설정한 schema 속성을 아래와 같이 설정합니다.
// 계층 정보를 설정합니다.
hierarchy: {
// 설정할 JSON 데이터의 종류를 설정합니다.（지금은 "Level"）
type: 'Level',
// 계층 정보가 포함된 열을 지정합니다.
column: 'HierarchyLevel',
// 계층 표시할 열을 지정합니다.
outlineColumn: {
value: 'Folder',
// 체크박스를 설정합니다.
showCheckBox: true,
},
},또한, 아이콘 이미지를 설정하려면 다음과 같이 구현합니다.
// 계층 정보를 설정합니다.
hierarchy: {
// 설정할 JSON 데이터의 종류를 설정합니다.（지금은 "Level"）
type: 'Level',
// 계층 정보가 포함된 열을 지정합니다.
column: 'HierarchyLevel',
// 계층 표시할 열을 지정합니다.
outlineColumn: {
value: 'Folder',
// 체크박스를 설정합니다.
showCheckBox: true,
//아이콘 이미지를 설정합니다.
showImage: true,
images: ['./archiverFolder.png', './newFolder.png', './docFile.png' ],
},
},이미지 설정은 또한 계층의 접기 및 펼치기를 위한 UI를 변경할 수 있습니다.
이 경우 다음과 같이 expandIndicator 속성과 collapseIndicator 속성을 설정합니다.
// 계층 정보를 설정합니다.
hierarchy: {
// 설정할 JSON 데이터의 종류를 설정합니다.（지금은 "Level"）
type: 'Level',
// 계층 정보가 포함된 열을 지정합니다.
column: 'HierarchyLevel',
// 계층 표시할 열을 지정합니다.
outlineColumn: {
value: 'Folder',
// 체크박스를 설정합니다.
showCheckBox: true,
//아이콘 이미지를 설정합니다.
showImage: true,
images: ['./archiverFolder.png', './newFolder.png', './docFile.png' ],
//접기 및 펼치기 UI 이미지를 설정합니다.
expandIndicator: './increaseIndicator.png',
collapseIndicator: './decreaseIndicator.png',
},
},위의 코드 실행 데모는 다음과 같습니다.
이러한 방식으로 체크 박스와 이미지를 설정하면,
테이블 시트의 계층 구조를 보다 효과적으로 표시할 수 있습니다.
이상으로 테이블 시트의 계층 구조 표시 기능까지 총 8편의 테이블 시트 시리즈를 마칩니다.
SpreadJS의 테이블 시트 기능이 여러분의 개발에 도움이 되셨길 바랍니다!
감사합니다.
지금 바로 SpreadJS를 다운로드하여 직접 테스트해 보세요!
댓글목록
등록된 댓글이 없습니다.
