概述
本 Demo 展示了如何使用集算表的关系视图功能，将订单表与客户表关联，在同一个视图中展示订单信息和对应的客户信息。通过 DataManager 的关系功能，可以实现跨表数据访问和展示。
实现思路
创建 DataManager 并添加两个数据表：orderTable（订单表）和 customerTable（客户表）
使用 addRelationship 方法建立两个表之间的关系，通过订单表的 CustomerId 字段关联客户表的 Id 字段
使用 addView 方法创建自定义视图，包含订单字段和关联的客户字段
将视图绑定到集算表进行展示
代码解析
添加数据表
这段代码创建了 DataManager 并添加了两个数据表，每个表都配置了远程数据源的读取接口。
建立表间关系
addRelationship 方法建立了订单表和客户表之间的双向关系。参数说明：
orderTable: 源表（订单表）
"CustomerId": 源表中的外键字段
"customer": 在订单表中访问客户的关系名称
customerTable: 目标表（客户表）
"Id": 目标表的主键字段
"orders": 在客户表中访问订单的关系名称
建立关系后，订单表可以通过 customer 关系访问客户信息，客户表可以通过 orders 关系访问订单列表。
创建自定义视图
视图列配置说明：
{ value: "customer" } 是关联字段，通过之前定义的关系名称访问客户表的数据
relatedStyle 中的 formatter 使用 CONCAT 函数组合客户的多个字段
{ value: "=[@]" } 是计算字段，使用当前行数据动态生成格式化内容
width: "2*" 使用星型尺寸，按比例分配列宽
运行效果
集算表显示订单数据，包括订单 ID、订单日期和运费
Customer 列显示关联的客户公司名称和联系人，数据来自客户表
Address 列使用格式化函数从订单行的 ShipAddress 和 ShipCity 字段组合显示完整地址
通过关系视图，可以在一个表格中同时查看订单和客户的完整信息
API 参考
dataManager.addTable 方法
name: 数据表名称
options.remote: 远程数据源配置
options.remote.read: 数据读取接口配置
dataManager.addRelationship 方法
sourceTable: 源表对象
sourceFieldName: 源表中的关联字段名
sourceRelationshipName: 源表中访问目标表的关系名称
targetTable: 目标表对象
targetFieldName: 目标表中的关联字段名
targetRelationshipName: 目标表中访问源表的关系名称
table.addView 方法
viewName: 视图名称
columns: 列配置数组，每列可包含 value、width、style 等属性
/*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();
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
spread.bind(GC.Spread.Sheets.Events.EditStarting, function (e, args) {
if (args.sheet.getValue(0, args.col, GC.Spread.Sheets.SheetArea.colHeader) === 'Customer'){
args.cancel = true;
}
});
//init a data manager
var baseApiUrl = getBaseApiUrl();
var dataManager = spread.dataManager();
//add order table
var orderTable = dataManager.addTable("orderTable", {
remote: {
read: {
url: baseApiUrl + "/Order"
}
}
});
//add customer table
var customerTable = dataManager.addTable("customerTable", {
remote: {
read: {
url: baseApiUrl + "/Customer"
}
}
});
//add relationship between order table and customer table
dataManager.addRelationship(orderTable, "CustomerId", "customer", customerTable, "Id", "orders");
//init a table sheet
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
sheet.options.allowAddNew = false; //hide new row
//bind a view to the table sheet
var style = {
formatter: 'Ship To: {{=CONCAT(@.ShipAddress, ", ", @.ShipCity)}}'
};
var relatedStyle = {
formatter: '{{=CONCAT([@customer.CompanyName], ", ", [@customer.ContactName])}}', // convert the object to string
};
var myView = orderTable.addView("myView", [
{ value: "Id", width: 100 }, //set column width 100px
{ value: "OrderDate", width: 200, style: { formatter: "MM/dd/yyyy" } },
{ value: "Freight", width: 100 },
/**
* customer.companyName - this is a related field from the customer table
* update the customerId in orderTable by select from customer table.
*/
{ value: "customer", width: 350, style: relatedStyle },
/**
* [=@] this column will contain the full row as a value, the formatter formula will extract the shipping address from the full row.
* Format functions can be used to customize column display value
* use star-size "2*" to set column width relative to the viewport width
*/
{ value: "=[@]", caption: "Address", style: style, width: "2*" }
]);
myView.fetch().then(function() {
sheet.setDataView(myView);
});
spread.resumePaint();
}
function getBaseApiUrl() {
return window.location.href.match(/http.+spreadjs\/SpreadJSTutorial\//)[0] + 'server/api';
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<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-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 {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
