[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

SpreadJS 컴포넌트와 통합

데이터 매니저는 고급 SpreadJS 컴포넌트에서 사용하는 구조화된 데이터 모델을 제공합니다.

데이터 매니저는 UI를 렌더링하거나 상호 작용을 처리하지 않습니다.

대신 컴포넌트는 Workbook의 데이터 매니저에 정의된 구조화된 테이블 또는 View에 바인딩됩니다.

통합 패턴

통합은 일관된 모델을 따릅니다.

  1. Workbook의 데이터 매니저에 접근

  2. 테이블 정의

  3. 필요에 따라 스키마 및 관계 구성

  4. View 생성(필요한 경우)

  5. View 또는 테이블을 컴포넌트에 바인딩

각 컴포넌트는 모델을 서로 다른 방식으로 사용하지만 모두 동일한 데이터 매니저 인스턴스에 의존합니다.

테이블 시트

테이블 시트는 View에 바인딩됩니다.

const dataManager = spread.dataManager();

// 테이블 정의
const table = dataManager.addTable("Employees", {
    data: [
        { id: 1, name: "John" },
        { id: 2, name: "Jane" }
    ]
});

// View 생성
const view = table.addView("employeeView", [
    { value: "id", caption: "ID" },
    { value: "name", caption: "Name" }
]);

await view.fetch();

// 테이블 시트에 바인딩
const tableSheet = spread.addSheetTab(
    0,
    "Employees",
    GC.Spread.Sheets.SheetType.tableSheet
);

tableSheet.setDataView(view);

테이블 시트는 테이블의 View 투영을 사용합니다.

모든 구조 로직은 데이터 매니저 내부에 유지됩니다.

컴포넌트 구성에 대한 자세한 내용은 테이블 시트 문서를 참조하세요.

간트 시트

간트 시트는 계층형 View에 바인딩됩니다.

const dataManager = spread.dataManager();

const taskTable = dataManager.addTable("Tasks", {
    data: [
        { id: 1, name: "Planning", parentId: null },
        { id: 2, name: "Execution", parentId: 1 }
    ],
    schema: {
        hierarchy: {
            type: "Parent",
            column: "parentId"
        },
        columns: {
            id: { isPrimaryKey: true }
        }
    }
});

const view = taskTable.addView("taskView", [
    { value: "name", caption: "Task Name" }
]);

await view.fetch();

const ganttSheet = spread.addSheetTab(
    0,
    "Gantt",
    GC.Spread.Sheets.SheetType.ganttSheet
);

ganttSheet.bindGanttView(view);

계층 구조 구성은 스키마에 정의됩니다.

간트 시트는 계층 구조를 렌더링합니다.

컴포넌트 구성에 대한 자세한 내용은 간트 시트 문서를 참조하세요.

리포트 시트

리포트 시트는 데이터 바인딩을 사용하여 테이블에 직접 바인딩됩니다.

const dataManager = spread.dataManager();

const orders = dataManager.addTable("Orders", {
    data: [
        { orderId: 1001, customer: "A" },
        { orderId: 1002, customer: "B" }
    ]
});

await orders.fetch();

const reportSheet = spread.addSheetTab(
    0,
    "Report",
    GC.Spread.Sheets.SheetType.reportSheet
);

const template = reportSheet.getTemplate();

template.setTemplateCell(1, 0, {
    type: "List",
    binding: "Orders[orderId]"
});

reportSheet.refresh();

리포트 시트는 바인딩 식을 통해 구조화된 테이블 데이터를 사용합니다.

컴포넌트 구성에 대한 자세한 내용은 리포트 시트 문서를 참조하세요.

데이터 차트

데이터 차트는 시각화를 위해 테이블 데이터를 사용합니다.

const dataManager = spread.dataManager();

const price = dataManager.addTable("Price", {
    data: [
        { product: "ItemA", price: 100 },
        { product: "ItemB", price: 120 }
    ]
});

await price.fetch();

const sheet = spread.getActiveSheet();

const chart = sheet.dataCharts.add("chart", 10, 10, 400, 300);

chart.setChartConfig({
    tableName: "Price",
    plots: [{
        type: GC.Spread.Sheets.DataCharts.DataChartType.column,
        encodings: {
            values: [{ field: "price" }],
            category: { field: "product" }
        }
    }]
});

차트는 테이블 이름을 참조합니다.

데이터 매니저는 구조화된 데이터의 원본으로 유지됩니다.

컴포넌트 구성에 대한 자세한 내용은 데이터 차트 문서를 참조하세요.

공유 데이터 모델

데이터 매니저는 Workbook에 속하므로:

  • 여러 컴포넌트가 동일한 테이블을 공유할 수 있습니다.

  • 하나의 테이블이 여러 View를 지원할 수 있습니다.

  • 업데이트가 바인딩된 컴포넌트 전체에 전파됩니다.

이를 통해 애플리케이션 전반에서 일관된 데이터 동작을 보장합니다.

책임 범위

데이터 매니저는 다음을 담당합니다.

  • 테이블 구조

  • 스키마 규칙

  • 관계

  • 계층 구조 구성

  • 계산 및 동기화

컴포넌트는 다음을 담당합니다.

  • 렌더링

  • 레이아웃

  • 상호 작용

  • 컴포넌트별 명령

각 컴포넌트는 UI 구성 및 고급 기능에 대한 자체 문서를 제공합니다.

워크시트 테이블을 데이터 테이블로 변환

데이터 매니저 API를 통해 직접 테이블을 정의하는 것 외에도 SpreadJS는 기존 워크시트 테이블을 데이터 매니저 테이블로 변환할 수 있도록 지원합니다.

이를 통해 기존 시트 테이블도 다음을 포함한 구조화된 데이터 모델링 시스템에 참여할 수 있습니다.

  • 스키마 구성

  • View 생성

  • 컴포넌트 바인딩

  • 데이터 관계

변환 과정은 다음과 같습니다.

  • 새로운 데이터 매니저 테이블 생성

  • 원본 워크시트 테이블을 해당 테이블에 바인딩

  • 데이터 관리 책임을 데이터 매니저로 이동

변환 후 워크시트 테이블은 기본 데이터 매니저 테이블의 View 역할을 합니다.

전용 API를 통해 프로그래밍 방식의 변환을 지원하며, 디자이너에서도 시각적인 변환 워크플로를 제공합니다.

변환 규칙, 제약 사항 및 예제에 대한 자세한 내용은 데이터 테이블로/에서 변환을 참조하세요.