集算表数据区域的粘性多级标题

概述本 Demo 展示了如何将集算表（TableSheet）渲染到普通工作表中，并启用粘性表头功能。Demo 中集算表使用了多级标题（通过 caption 数组实现），并通过 sticky: { top: 1 } 选项实现滚动时表头固定显示的效果。实现思路创建集算表并配置远程数据源（使用 DataManager 连接 Product API）定义集算表视图，使用数组形式的 caption 设置多级标题（如 ["Foreign Keys", "Supplier Id"]）使用 dataRanges.add() 方法将集算表渲染到工作表的指定区域通过 sticky 选项启用粘性表头，使多级标题在滚动时保持可见代码解析创建多级标题的集算表视图这段代码定义了集算表视图。caption 属性接受字符串数组来设置多行表头：第一级标题（如 "Foreign Keys"）会自动合并相同值的列，第二级是具体的列标题。这种分组方式让表格结构更清晰。将集算表渲染到工作表并启用粘性表头这段代码将集算表注册到工作表中。dataRanges.add() 方法的核心参数： name：数据区域的名称 tableSheet.name()：集算表名称 Range(row, col, -1, -1)：数据区域位置，-1 表示自动扩展到数据边界 sticky: { top: 1 }：启用粘性表头，值为正数时激活。粘性行数根据集算表列表头行数自动确定运行效果工作表中显示集算表数据，表头包含两级："Foreign Keys" 和 "Product Infos" 相同一级标题的列会自动合并显示向下滚动数据时，多级表头固定在可视区域顶部，始终保持可见数据区域自动适应集算表的数据大小 API 参考 dataRanges.add 方法 name：数据区域名称 tableSheetName：集算表名称 range：GC.Spread.Sheets.Range 对象，指定数据区域位置 options.sticky.top：粘性选项，正数启用粘性表头 addView 方法的 caption 属性 caption 可以是字符串（单级标题）或字符串数组（多级标题）相同值的标题会自动合并

/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
var sheet = spread.getActiveSheet();
initTableSheet(spread, function(tableSheet) {
spread.setActiveSheet(sheet.name());
var dataRange = registerTableSheetIntoWorksheet(tableSheet, sheet);
beautifySheet(sheet, dataRange);
spread.undoManager().clear();
});
spread.resumePaint();
}
async function initTableSheet(spread, callback) {
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
//init a data manager
var dataManager = spread.dataManager();
var productAPI = getBaseApiUrl() + "/Product";
var productTable = dataManager.addTable("productTable", {
remote: {
read: { url: productAPI },
update: { url: productAPI, method: "PUT" },
create: { url: productAPI },
delete: { url: productAPI }
}
});
//init a table sheet
var tableSheet = spread.addSheetTab(0, "MyTableSheet", GC.Spread.Sheets.SheetType.tableSheet);
await productTable.fetch();
var myView = productTable.addView("myView", [
{ value: "ProductName", caption: "Name", width: 250 },
{ value: "SupplierId", caption: ["Foreign Keys", "Supplier Id"], width: 140 },
{ value: "CategoryId", caption: ["Foreign Keys", "Category Id"], width: 140 },
{ value: "QuantityPerUnit", caption: ["Product Infos", "Quantity Per Unit"], width: 140 },
{ value: "UnitPrice", caption: ["Product Infos", "Unit Price"], width: 140 },
{ value: "UnitsInStock", caption: ["Product Infos", "Units In Stock"], width: 140 },
{ value: "=[@UnitPrice]*[@UnitsInStock]", caption: ["Product Infos", "Total Price"] }
]);
tableSheet.setDataView(myView);
spread.suspendPaint();
callback && callback(tableSheet);
spread.resumePaint();
return tableSheet;
}
function registerTableSheetIntoWorksheet (tableSheet, sheet) {
var name = tableSheet.name() + "_DataRange";
var row = 1;
var col = 1;
var dataRange = sheet.dataRanges.add(name, tableSheet.name(), new GC.Spread.Sheets.Range(row, col, -1, -1), {
sticky: { top: 1 }
});
return dataRange;
}
function beautifySheet(sheet, dataRange) {
var range = dataRange.range();
for (var i = range.row; i < range.row + range.rowCount; i++) {
sheet.autoFitRow(i);
}
for (var i = range.col; i < range.col + range.colCount; i++) {
sheet.autoFitColumn(i);
}
sheet.setColumnWidth(1, 30);
}
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-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 id="ss"></div>
</html>

body, html {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
}
#ss {
width: 100%;
height: 100%;
}

SpreadJS 在线示例