테이블 시트 시작하기 1 - 기능 개요 및 데이터 표시 > 온라인 스터디

테이블 시트 테이블 시트 시작하기 1 - 기능 개요 및 데이터 표시

추천0

페이지 정보

작성자 GCK루카스

작성일 2023-03-22 14:15 조회 323회 댓글 0건

본문

관련링크

이 글에서는 SpreadJS에서 제공하는 테이블 시트 기능에 대한 기본적인 사용법과 간단한 응용 예를 소개합니다.

목차
테이블 시트란?
데이터의 유연한 표시를 지원하는 '데이터 매니저'
테이블 시트 사용해보기
구현
실행 및 기능 확인

테이블 시트란?

SpreadJS의 '테이블 시트'는 스프레드시트와 그리드 뷰의 특성을 결합한 획기적인 기능입니다.

스프레드시트와 그리드 뷰의 특징을 결합한 테이블 시트

테이블 시트 기능을 활용하여 SpreadJS가 가지고 있는 강력한 표 계산 기능이나 Excel 친화적인 사용법과 같은 스프레드시트의 특징은 그대로 두고, 아래와 같은 그리드 뷰 기능을 사용한 데이터 표시를 시트 상에 구현할 수 있습니다.

양방향 데이터 바인딩
데이터 그룹화 표시 및 집계
행/열 고정

데이터의 유연한 표시를 지원하는 '데이터 매니저'

테이블 시트 기능의 사용에 있어서는 데이터 관리 컴포넌트인 "데이터 매니저"에 대해 반드시 알아야 합니다. 데이터 매니저는 테이블 시트와 연동되는 데이터 엔진 컴포넌트입니다.

데이터 매니저의 역할

데이터 매니저를 사용하여 서버 등으로부터 데이터 원본을 가져와 다양한 형태의 테이블 형식 데이터로 바인딩하여 테이블 시트에서 다양한 데이터 표시를 구성할 수 있습니다.

테이블 시트 사용해보기

이번에는 실제로 테이블 시트를 사용하여 데이터를 표시하는 순서를 소개합니다.

구현

1. 테이블 시트 추가

첫 번째로 진행할 것은 워크북에 테이블 시트를 추가하는 것입니다. SpreadJS를 초기화하면 아래와 같이 addSheetTab 메소드를 이용하여 워크북에 테이블 시트를 추가합니다.

// SpreadJS 인스턴스를 생성합니다.
let spread = new GC.Spread.Sheets.Workbook("ss");
// workbook에 테이블 시트를 추가합니다.
let tableSheet = spread.addSheetTab(0, "tableSheet", GC.Spread.Sheets.SheetType.tableSheet);

2. 데이터 매니저의 초기화와 테이블 생성

그 다음, 데이터 매니저를 초기화합니다.

// 데이터 매니저를 초기화합니다.
let dataManager = spread.dataManager();

이 데이터 매니저에서는 테이블 시트로 표시하는 다양한 데이터를 데이터 소스마다 테이블 형식으로 가지고 있습니다.

이번에는 다음과 같은 JSON 데이터를 데이터 소스로 활용하여 테이블을 작성합니다.

(다음은 데이터 소스의 일부입니다.)

let orderData = [
    { "orderId": 1, "categoryId": 1, "categoryName": "음료", "productName": "에일", "unitsInStock": 55, "unitsOnOrder": 55, "orderDate": "2021/6/9", "customerId": 13 },
    { "orderId": 2, "categoryId": 3, "categoryName": "과자", "productName": "사탕", "unitsInStock": 36, "unitsOnOrder": 40, "orderDate": "2021/9/9", "customerId": 24 },
    { "orderId": 3, "categoryId": 5, "categoryName": "곡류", "productName": "크래커", "unitsInStock": 66, "unitsOnOrder": 93, "orderDate": "2021/12/8", "customerId": 38 },
    { "orderId": 4, "categoryId": 1, "categoryName": "음료", "productName": "커피", "unitsInStock": 82, "unitsOnOrder": 95, "orderDate": "2021/6/15", "customerId": 47 },
    { "orderId": 5, "categoryId": 5, "categoryName": "곡류", "productName": "시리얼", "unitsInStock": 38, "unitsOnOrder": 50, "orderDate": "2022/7/13", "customerId": 35 },
    { "orderId": 6, "categoryId": 2, "categoryName": "조미료", "productName": "소스", "unitsInStock": 53, "unitsOnOrder": 36, "orderDate": "2021/10/20", "customerId": 23 },
    /*이하 생략*/

데이터 매니저에 대한 테이블의 생성과 추가는 다음과 같이 addTable 메소드를 사용합니다.

//데이터 매니저를 통해 테이블을 추가합니다
let productTable = dataManager.addTable("주문정보", {
    data: orderData,
});

이 때 설정할 수 있는 파라미터는 다음과 같습니다.

인수	개요
name	테이블 이름
dataSourceOption	테이블을 작성하는 데이터 소스 옵션

두 번째 인수인 dataSourceOption에는 다양한 파라미터를 설정할 수 있지만 이번에는 표시 데이터로서 방금 전의 JSON 데이터만을 설정합니다.

또한 로컬의 JSON 데이터 참조가 아니라, Web API 등으로부터 데이터를 가져오는 경우에는 아래와 같이 URL을 설정하는 것도 가능합니다.

// 데이터 매니저에 테이블을 추가합니다.
var productTable = dataManager.addTable("주문정보", {
    read: {
        // 설정 예 - 데이터를 가져올 웹 API의 엔드포인트를 지정합니다.
        url: "https://demodata.grapecity.com/northwind/api/v1/orders"
    }
});

3. 보기 만들기

테이블을 만든 후 데이터의 모양을 정의하는 "보기"를 설정하고 데이터 관리자에 추가합니다.

// 보기의 열 정보를 정의합니다.
var columnInfos = [
    { value: "orderId", caption: "주문ID"}, 
    { value: "orderDate", caption: "수주일", style: { formatter: "yyyy년mm월dd일", } }, 
    { value: "categoryName", caption: "카테고리" }, 
    { value: "productName", caption: "제품명" }, 
    { value: "unitsOnOrder", caption: "수주량" } 
];

// 보기의 옵션을 정의합니다.
var viewOption = { 
    // 열 너비의 기본 값을 설정합니다.
    defaultColumnWidth: 150
}

// 테이블 시트에 표시할 보기를 설정합니다.
var view = productTable.addView( "수주관리", columnInfos, true, viewOption );

4. 데이터 가져오기 및 표시

테이블 시트, 데이터 매니저, 테이블, 보기의 준비가 되면 마지막으로 데이터 표시 단계입니다.

다음과 같이 테이블에서 데이터 가져오기를 실행하고 테이블 시트에서 방금 작성한 보기를 설정하여 데이터를 표시합니다.

// 테이블에 설정할 데이터를 가져오고, 성공 시 콜백 함수를 실행합니다.
productTable.fetch().then(function () {
    // 테이블 시트에 보기를 설정하여 표시합니다.
    tableSheet.setDataView(view);
});

실행 및 기능 확인

여기까지 구현한 코드의 실행 샘플을 아래에서 확인해 보실 수 있습니다.

↓↓↓ 아래의 JS 탭을 클릭하여 전체 코드도 확인하실 수 있습니다.

Excel의 특징인 시트 탭, 필터 정렬, 컨텍스트 메뉴와 같은 기능은 시트 형태로 남아있으면서 그리드 뷰와 같은 데이터 목록이 표시되었습니다.