GanttSheet Resources
GanttSheet Resources consist of Assignment and Resources from two tables.
If you want to use Resources, you need to build a Relation between the Task table and other two tables first.
If you want to display the contents of the corresponding Resources in the Resources Column, you need to add the Value as: taskTableSourceRelationshipName.assignmentTableSourceRelationshipName.name
The Resources Column has its own dataType, which needs dataType: "TaskResources" inside the View.
Resources do not affect the duration of the current task, but rather all the working time of the current task.
Task Work Time is the work time of all resources of the current task.
Resources Relationship
To add Resources, you need a Task Table, Assignment Table and Resources Table.
These three tables are linked by relationships.
The source name and target name must be the same in the relationship between the task table and the assignment table.
The Resources Column can get the Resources Name directly from the configured relationship.
Resources CellType
In order to assign resources more conveniently, the resources column has its own dataType.
You also need to add the corresponding dataType in order to generate the corresponding dropdown box in the resources column for selecting resources.
Work Time Column
The Work Time of a Task represents the work time of all the Resources of the current task, and the default unit is hour.
For example, if the duration of the current task is 1 day, and there are two Resources working on the current task at the same time, then the work time of this task is 2 days, and the work time of a day is 8 hrs, so the work time of the current task is 16 hrs.
Resources Sheet
If you want to add Resources, you need to add the corresponding Resources in the Resources Sheet, then commit the changes to the server, and then re-pull the corresponding data in the 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\/demos\//)[0] + 'server/api';
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/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$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/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%;
}
