간트 시트 생성

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

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

   <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 컨테이너 생성 후 간트 시트 탭 추가

   var spread = new GC.Spread.Sheets.Workbook(document.getElementById("spread");
   var ganttSheet = spread.addSheetTab(0, "GanttSheet", GC.Spread.Sheets.SheetType.ganttSheet);

3. DataManager 메서드를 이용하여 데이터 매니저 초기화

   var dataManager = spread.dataManager();

4. addTable 메서드를 사용하여 DataManager에 테이블 추가

   이 메서드는 테이블 이름(문자열)과 IDataSourceOption 인터페이스 옵션을 받습니다.

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

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

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

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

   다양한 계층 구조 유형에 대한 자세한 내용은 “계층 유형” 페이지를 참고하시기 바랍니다.

6. addView 메서드를 사용하여 데이터 매니저의 테이블을 뷰에 추가하고 간트 시트 열 정의

   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 메서드를 사용하여 데이터를 가져온 후, bindGanttView 메서드를 사용하여 가져온 뷰를 간트 시트에 바인딩

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