概述
本 Demo 展示了如何在甘特图中实现资源管理功能。通过创建任务表、分配表和资源表，并建立它们之间的关系，实现为任务分配资源、显示资源名称、计算工作时间等功能。Demo 还演示了如何配置任务条样式，在任务条右侧显示资源名称。
实现思路
创建三个数据表：taskTable（任务表）、assignmentTable（分配表）、resourceTable（资源表）
使用 addRelationship 方法建立表之间的关系：分配表与任务表、分配表与资源表
创建甘特图视图，添加资源列（使用 dataType: "TaskResources"）和工作时间列
绑定甘特视图到 GanttSheet
配置任务条样式，在任务条右侧显示资源名称
代码解析
创建数据表
这段代码创建了三个数据表。taskTable 使用层次结构配置，type 为 "Parent" 表示基于父 ID 的层级关系，column 指定 parentId 字段作为父节点引用。三个表都启用 batch 模式以支持批量操作。
建立表关系
addRelationship 方法用于建立表之间的关联。第一个关系通过 taskId 字段连接分配表和任务表，第二个关系通过 resourceId 字段连接分配表和资源表。参数依次为：源表、源字段名、源关系名、目标表、目标字段名、目标关系名。注意任务表与分配表之间的关系中，源名称和目标名称必须相同。
创建视图并添加资源列
资源列使用 dataType: "TaskResources"，这会在列中生成下拉框以选择资源。value 属性为 "taskId.resource.name"，通过关系链访问资源名称：从任务表到分配表，再到资源表的 name 字段。
绑定视图并配置任务条样式
bindGanttView 方法将视图绑定到 GanttSheet。绑定完成后，获取任务样式规则，设置 taskbarStyle 的 rightText 属性为 "taskId.resource.name"，这样资源名称会显示在任务条的右侧。
运行效果
甘特图中每个任务的资源列会显示下拉选择器，可以为一个任务分配多个资源
任务条右侧会显示该任务所分配的资源名称
workTime 列会根据分配的资源自动计算工作时间
所有数据通过三个表的关联关系自动同步更新
API 参考
addRelationship 方法
sourceTable：源表对象
sourceFieldName：源表中的字段名
sourceRelationshipName：源关系名称
targetTable：目标表对象
targetFieldName：目标表中的字段名
targetRelationshipName：目标关系名称
TaskbarStyle.rightText 属性
rightText：字符串类型，表示任务字段或公式的名称，其值将显示在任务条右侧的文本中
支持数据字段名称和列公式
/*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\/SpreadJSTutorial\//)[0] + 'server/api';
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="zh-cn" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/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$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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%;
}
