# 간트 시트 생성

## Content

간트 시트를 생성하려면 아래 단계를 따르시기 바랍니다:

1. 간트 시트 사용을 위한 스크립트 파일 추가

    ```auto
    <script src='.../spreadjs/gc.spread.sheets.all.x.x.x.min.js' type='text/javascript'></script>
    <script src='.../spreadjs/plugins/gc.spread.sheets.tablesheet.x.x.x.min.js' type='text/javascript'></script>
    <script src='.../spreadjs/plugins/gc.spread.sheets.ganttsheet.x.x.x.min.js' type='text/javascript'></script>
    ```
2. Spread 컨테이너 생성 후 간트 시트 탭 추가

    ```javascript
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("spread");
    var ganttSheet = spread.addSheetTab(0, "GanttSheet", GC.Spread.Sheets.SheetType.ganttSheet);
    ```
3. [DataManager](/spreadjs/api/classes/GC.Data.DataManager) 메서드를 이용하여 데이터 매니저 초기화

    ```javascript
    var dataManager = spread.dataManager();
    ```
4. [addTable](/spreadjs/api/classes/GC.Data.DataManager#addTable) 메서드를 사용하여 DataManager에 테이블 추가
    이 메서드는 테이블 이름(문자열)과 [IDataSourceOption](/spreadjs/api/modules/GC.Data#idatasourceoption) 인터페이스 옵션을 받습니다.

    ```javascript
    var myTable1 = dataManager.addTable("myTable1", {
        batch: true,
        remote: {
            read: {
                    url: apiUrl
                  }
    },
    ```

>type=warning
> 
> **참고:** 간트 시트와 연동된 데이터는 관계형 구조를 가지므로 **batch 모드**로 저장해야 합니다.

5. 데이터 원본 구조에 맞게 계층 스키마 정의

    ```javascript
    schema: {
        hierarchy: {
            type: "Parent",
                column: "parentId"
                },
                columns: {
                    id: { isPrimaryKey: true },
                    taskNumber: { dataType: "rowOrder" }
                }
    }
    ```

    다양한 계층 구조 유형에 대한 자세한 내용은 “[계층 유형](/spreadjs/docs/features/ganttsheet/add-hierarchy-types)” 페이지를 참고하시기 바랍니다.
6. [addView ](/spreadjs/api/classes/GC.Data.Table#addView) 메서드를 사용하여 데이터 매니저의 테이블을 뷰에 추가하고 간트 시트 열 정의

    ```javascript
    ganttSheet = spread.addSheetTab(0, "GanttSheet1", 
    GC.Spread.Sheets.SheetType.ganttSheet);
    var view = myTable1.addView("myView1", [
        { value: "taskNumber", caption: "NO.", width: 60 },
        { value: "name", caption: "Task Name", width: 200 },
        { value: "duration", caption: "Duration", width: 90 },
        { value: "predecessors", caption: "Predecessors", width: 120 , visible: false}
    ]);
    ```
7. 데이터 매니저 테이블의 [fetch](/spreadjs/api/classes/GC.Data.Table#fetch) 메서드를 사용하여 데이터를 가져온 후, bindGanttView 메서드를 사용하여 가져온 뷰를 간트 시트에 바인딩

    ```javascript
    view.fetch().then(function () {
    ganttSheet.bindGanttView(view);
    });
    ```