GanttSheet 리소스
GanttSheet 리소스는 두 표의 할당 및 리소스로 구성됩니다. 리소스를 사용하려면 먼저 작업 표와 다른 두 표 간의 관계를 구축해야 합니다.
리소스 열에서 해당 리소스의 내용을 표시하려면, 값을 taskTableSourceRelationshipName.assignmentTableSourceRelationshipName.name으로 추가해야 합니다.
리소스 열에는 자체 dataType이 있으며, 이 유형은 보기 내에 dataType: "TaskResources"가 필요합니다.
리소스는 현재 작업의 지속 시간이 아니라 현재 작업의 모든 작업 시간에 영향을 미칩니다. 작업의 작업 시간은 현재 작업의 모든 리소스의 작업 시간입니다.
리소스 관계
리소스를 추가하려면 작업 표, 할당 표 및 리소스 표가 필요합니다.
이 세 표는 관계로 연결됩니다. 작업 표와 할당 표 간의 관계에서 소스 이름과 대상 이름은 서로 같아야 합니다.
리소스 열은 구성된 관계에서 직접 리소스 이름을 가져올 수 있습니다.
리소스 CellType
리소스를 더 편리하게 할당할 수 있도록 리소스 열에는 자체 dataType이 있습니다.
또한 리소스 선택을 위해 리소스 열에 상응하는 드롭다운 상자를 생성하려면 해당하는 dataType을 추가해야 합니다.
작업 시간 열
작업의 작업 시간은 현재 작업의 모든 리소스의 작업 시간을 나타내며, 기본 단위는 시간입니다.
예를 들어, 현재 작업의 지속 시간이 1일이고 현재 작업에서 동시에 두 리소스가 사용되는 경우, 이 작업의 작업 시간은 2일이고 하루의 작업 시간은 8시간이므로 현재 작업의 작업 시간은 16시간입니다.
리소스 시트
리소스를 추가하려면 해당하는 리소스를 리소스 시트에 추가한 다음 변경 사항을 서버에 커밋하고 GanttSheet에서 해당하는 데이터를 다시 가져와야 합니다.
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
initGanttSheet(spread);
spread.resumePaint();
}
function initGanttSheet(spread) {
var taskTableName = "Gantt_Mode";
var baseApiUrl = getBaseApiUrl();
var apiUrl = baseApiUrl + "/" + taskTableName;
var dataManager = spread.dataManager();
var taskTable = dataManager.addTable("taskTable", {
batch: true,
remote: {
read: {
url: apiUrl
},
batch: {
url: apiUrl + "Collection"
}
},
schema: {
hierarchy: {
type: "Parent",
column: "parentId"
},
columns: {
id: { isPrimaryKey: true },
taskNumber: { dataType: "rowOrder" }
}
}
});
var assignmentTableName = "Assignment";
var assignmentUrl = baseApiUrl + "/" + assignmentTableName;
assignmentTable = dataManager.addTable("assignmentTable", {
batch: true,
remote: {
read: {
url: assignmentUrl
},
batch: {
url: assignmentUrl + "Collection"
}
}
});
var resourcesTableName = "Resources";
var resourcesUrl = baseApiUrl + "/" + resourcesTableName;
resourceTable = dataManager.addTable("resourceTable", {
batch: true,
remote: {
read: {
url: resourcesUrl
},
batch: {
url: resourcesUrl + "Collection"
}
},
});
dataManager.addRelationship(assignmentTable, "taskId", "task", taskTable, "id", "taskId");
dataManager.addRelationship(assignmentTable, "resourceId", "resource", resourceTable, "id", "assignment");
var ganttSheet = spread.addSheetTab(0, "GanttSheet1", GC.Spread.Sheets.SheetType.ganttSheet);
var view = taskTable.addView("ganttView1", [
{ 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 },
{ value: "workTime" },
{ value: "taskId.resource.name", caption: "Resources Name", dataType: "TaskResources", width: 300 },
]);
view.fetch().then(function() {
ganttSheet.bindGanttView(view);
}).then(function() {
let taskRule = ganttSheet.project.taskStyleRules.getRule("task");
let taskStyle = taskRule.style.taskbarStyle;
taskStyle.rightText = "taskId.resource.name";
taskRule.style.taskbarStyle = taskStyle;
});
}
function getBaseApiUrl() {
return window.location.href.match(/http.+spreadjs\/learn-spreadjs\//)[0] + 'server/api';
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="ko-kr"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div id="optionContainer" class="optionContainer">
</div>
</div>
</html>
.sample-tutorial {
width: 100%;
height: 100%;
}
body, html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
}