概述
本 Demo 展示了 SpreadJS 表格的表头滚动增强功能。当表格包含大量数据行，用户向下滚动使表头行移出可见区域时，表格的表头会自动显示在工作表的列标题区域，确保用户始终能看到列的标题信息。
实现思路
创建一个包含 44 行数据的大型表格，演示滚动效果
使用 sheet.tables.add() 方法添加表格，默认启用表头显示
设置表格的列宽和表头文本
填充示例数据，模拟真实的数据表格场景
代码解析
创建表格
这段代码在第 1 行第 1 列创建了一个名为 "table1" 的表格，包含 44 行 3 列数据，使用 light1 主题样式。表格默认会显示表头行（showHeader 默认为 true），SpreadJS 会自动启用表头滚动增强功能。
设置列宽和表头
为表格的三列设置 120 像素的宽度，并在表头行设置列标题文本："First Name"、"Last Name" 和 "Score"。
填充数据
使用循环为表格填充 43 行示例数据（从第 2 行到第 44 行），模拟真实的数据表格场景。根据行号的不同，填充不同的姓名和分数数据。
运行效果
打开 Demo 后，可以看到一个包含 44 行数据的三列表格
表格顶部显示列标题："First Name"、"Last Name" 和 "Score"
向下滚动工作表，当表格的表头行移出可见区域时，表头会自动显示在工作表的列标题区域
继续滚动浏览数据时，列标题区域始终显示表格的表头信息，方便用户理解数据含义
API 参考
tables.add() 方法
name：表格名称
row、col：表格起始位置
rowCount、colCount：表格的行数和列数
style：可选，表格主题样式
showHeader() 方法
value：布尔值，是否显示表格表头，默认为 true
返回值：获取或设置表格的表头显示状态
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getSheet(0);
sheet.tables.add("table1", 1, 1, 44, 3, spreadNS.Tables.TableThemes.light1);
sheet.setActiveCell(2, 1);
sheet.setColumnWidth(1, 120);
sheet.setColumnWidth(2, 120);
sheet.setColumnWidth(3, 120);
sheet.getCell(1, 1).text("First Name");
sheet.getCell(1, 2).text("Last Name");
sheet.getCell(1, 3).text("Score");
for (var i = 2; i < 45; i ++) {
if (i % 2 === 0) {
sheet.getCell(i, 1).text("Alexa");
sheet.getCell(i, 2).text("Wilder");
sheet.getCell(i, 3).text("90");
} else if (i % 3 === 0) {
sheet.getCell(i, 1).text("Victor");
sheet.getCell(i, 2).text("Wooten");
sheet.getCell(i, 3).text("70");
} else {
sheet.getCell(i, 1).text("Ben");
sheet.getCell(i, 2).text("Smith");
sheet.getCell(i, 3).text("65");
}
}
spread.resumePaint();
}
<!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">
<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-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>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
