创建甘特表

要创建甘特表，请按照以下步骤操作：

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. 生成一个跨页容器，然后添加一个 ganttSheet 类型的工作表选项卡。

   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 方法在数据管理器中添加表。此方法接受字符串形式的表名称和 IDataSourceOption 接口选项。

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

   注意：由于数据与甘特表有关系，因此应使用批处理模式保存它们。

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 方法将获取的视图绑定到 GanttSheet。

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