개요
GanttSheet는 Gantt 동작 및 스프레드시트 사용자 인터페이스를 갖춘 빠른 데이터 바인딩 DataTable 보기입니다.
설명
app.js
index.html
styles.css
초기화
SpreadJS GanttSheet는 DataManager 보기를 데이터 소스로 사용을 지원합니다.
GanttSheet를 사용하려면 js 파일 링크를 문서의 헤더 섹션에 추가합니다.
<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>
그런 다음 계층 구조 스키마와 함께 DataManager를 사용할 수 있습니다.
//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" }
}
}
});
소스 데이터 구조를 기반으로 올바른 계층 구조 스키마를 정의할 수 있습니다.
// 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"
}
}
그런 다음 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);
});
일괄 모드
GanttSheet의 프로젝트 데이터 레코드는 정형 데이터이므로 일괄 모드를 사용해야 합니다.
Gantt 열
GanttSheets에는 gantt 열을 표시할지 컨트롤하는 enableGanttColumn 속성이 있습니다.
기본적으로 이 옵션은 true입니다. 표시하지 않으려면 GanttSheet를 만들거나 ganttSheet.bindGanttView(view, { enableGanttColumn: false })를 호출할 때 이 속성을 false로 설정할 수 있습니다.