概述
本 Demo 展示了表格的自动扩展功能，演示如何通过 allowAutoExpand 属性控制表格是否可以在用户操作时自动扩展区域。Demo 创建了一个包含员工信息的表格，并提供复选框让用户动态切换自动扩展功能的启用状态。
实现思路
创建一个 4 行 4 列的表格，并设置表格主题样式
为表格填充示例数据（员工姓名、分数、职位等）
监听复选框的 change 事件，动态切换表格的自动扩展属性
设置列宽，确保数据显示美观
代码解析
创建表格并设置主题
使用 tables.add() 方法创建表格，参数依次为：表格名称、起始行、起始列、行数、列数、表格主题样式。
动态控制自动扩展
通过监听复选框状态变化，调用 allowAutoExpand() 方法动态启用或禁用表格的自动扩展功能。tables.all() 方法返回工作表中的所有表格数组，这里获取第一个表格进行操作。
运行效果
页面加载后显示一个包含员工信息的表格
复选框默认勾选，表示表格自动扩展功能已启用
当功能启用时，在表格右侧或下方输入数据，表格会自动扩展
取消勾选复选框，表格将不再自动扩展
API 参考
tables.add() 方法
name：表格名称（可选）
row：起始行索引（可选）
column：起始列索引（可选）
rowCount：行数（可选）
columnCount：列数（可选）
style：表格主题样式（可选）
返回值：Table 对象
tables.all() 方法
获取工作表中的所有表格，返回 Table 对象数组。
allowAutoExpand() 方法
allowAutoExpandState：可选，布尔值，设置是否允许自动扩展
不传参数时返回当前状态（布尔值）
传入布尔值时设置状态并返回 Table 对象
默认值：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, 4, 4, spreadNS.Tables.TableThemes.light1);
_getElementById("allowAutoExpand").addEventListener('change', function() {
var table = sheet.tables.all()[0];
if (table) {
table.allowAutoExpand(_getElementById("allowAutoExpand").checked);
}
});
sheet.setColumnWidth(1, 120);
sheet.setColumnWidth(2, 120);
sheet.setColumnWidth(3, 120);
sheet.setColumnWidth(4, 120);
sheet.getCell(1, 1).text("First Name");
sheet.getCell(1, 2).text("Last Name");
sheet.getCell(1, 3).text("Score");
sheet.getCell(1, 4).text("Position");
sheet.getCell(2, 1).text("Alexa");
sheet.getCell(2, 2).text("Wilder");
sheet.getCell(2, 3).text("90");
sheet.getCell(2, 4).text("Web Developer");
sheet.getCell(3, 1).text("Victor");
sheet.getCell(3, 2).text("Wooten");
sheet.getCell(3, 3).text("70");
sheet.getCell(3, 4).text(".NET Developer");
sheet.getCell(4, 1).text("Ifeoma");
sheet.getCell(4, 2).text("Mays");
sheet.getCell(4, 3).text("85");
sheet.getCell(4, 4).text("Sales Manager");
spread.resumePaint();
}
function _getElementById(id){
return document.getElementById(id);
}
<!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 class="options-container">
<p>Select the table in the Spread instance and change the state of allow table auto expand.</p>
<div class="option-group">
<input type="checkbox" id="allowAutoExpand" checked />
<label for="allowAutoExpand">Allow Table Auto Expand</label>
</div>
</div>
</div>
</body>
</html>
.sample {
position: relative;
height: 100%;
overflow: auto;
}
.sample::after {
display: block;
content: "";
clear: both;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
.option-group {
margin-bottom: 6px;
}
label {
display: inline-block;
min-width: 90px;
margin-bottom: 6px;
}
select {
padding: 4px 6px;
}
p {
padding: 0 0 12px;
margin: 0;
}
.options-toggle {
display: none;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
