Overview
GanttSheet is a fast, data-bound DataTable view with gantt behavior and a spreadsheet user interface.
Initialization
SpreadJS GanttSheet supports using a DataManager View as a data source.
To use the GanttSheet, add the js file link into the document's head section:
<head>
...
<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>
</head>
Then you can use the DataManager with the hierarchy schema:
//init a data manager
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 0});
var dataManager = spread.dataManager();
var apiUrl = "ganttsheet_data_api_url";
myTable = dataManager.addTable("myTable", {
batch: true,
remote: {
read: {
url: apiUrl
},
batch: {
url: apiUrl
}
},
schema: {
hierarchy: {
type: "Parent",
column: "parentId"
},
columns: {
id: { isPrimaryKey: true },
taskNumber: { dataType: "rowOrder" }
}
}
});
You can then define the correct hierarchy schema based on your source data structure.
// the id-parentId structure
schema: {
hierarchy: {
type: "Parent",
column: "parentId"
},
columns: {
id: { isPrimaryKey: true }, // the primary key is required in Id-ParentId type, so that we could build the hierarchy tree nodes
taskNumber: { dataType: "rowOrder" } // the row order is required in Id-ParentId type, to make sure the you could update the correct data
}
}
// the level structure
schema: {
hierarchy: {
type: "Level",
column: "level"
}
}
// the children tree structure
schema: {
hierarchy: {
type: "ChildrenPath",
column: "children"
}
}
Then initialize a GanttSheet.
var ganttSheet = spread.addSheetTab(0, "GanttSheet", GC.Spread.Sheets.SheetType.ganttSheet);
var view = myTable.addView("ganttView", [
{ value: "taskNumber", caption: "Task Number", width: 100 },
{ value: "mode", caption: "Mode", width: 65 },
{ value: "name", caption: "Task Name", width: 280 },
{ value: "duration", caption: "Duration", width: 90 },
{ value: "start", caption: "Start", width: 120 },
{ value: "finish", caption: "Finish", width: 120 },
{ value: "predecessors", caption: "Predecessors", width: 120 }
]);
view.fetch().then(function() {
ganttSheet.bindGanttView(view);
});
Batch Mode
The project data records in a GanttSheet are structured data, so batch mode should be used.
Gantt Column
GanttSheets have a property called enableGanttColumn that controls whether to show the gantt column.
By default, this option is true. If you don't want to show it, you can set this property to false when you create GanttSheet or call ganttSheet.bindGanttView(view, { enableGanttColumn: false }).
Feedback
Submit and view feedback for