概述
本 Demo 展示了如何为集算表配置交互行为选项，包括扩展粘贴范围、分割调整列宽和自动适应列宽。这些配置项可以提升用户在表格操作中的便捷性和灵活性。
实现思路
创建 SpreadJS Workbook 实例，并初始化为 0 个工作表
配置工作簿级别的交互行为选项（allowExtendPasteRange、columnResizeMode、autoFitType）
初始化数据管理器，添加数据表并配置远程数据源
创建集算表并绑定数据视图
代码解析
配置交互行为选项
这段代码配置了三个关键的交互行为：
allowExtendPasteRange：设置为 true 后，当粘贴的数据范围超过当前表格区域时，会自动扩展行数以容纳粘贴的数据
columnResizeMode：设置为 ResizeMode.split 后，调整列宽时会同时影响相邻列，保持整体布局不变
autoFitType：设置为 AutoFitType.cellWithHeader 后，双击列标题边缘自动调整列宽时，会同时考虑单元格内容和表头的宽度
初始化数据管理器和数据表
使用 dataManager() 创建数据管理器实例，通过 addTable 方法添加数据表并配置远程 API 接口。
创建集算表并绑定视图
创建集算表后，通过 fetch() 获取数据，然后创建视图并绑定到集算表。视图配置定义了显示的列、宽度、标题等信息。
运行效果
打开页面后，集算表会自动从远程 API 加载供应商数据
可以使用 Ctrl + 鼠标滚轮进行缩放操作
拖动列标题边缘调整列宽时，相邻列的宽度会同步变化（split 模式）
双击列标题边缘可以自动调整列宽，同时考虑单元格内容和表头
复制粘贴数据时，如果目标区域行数不足，会自动扩展行数
API 参考
allowExtendPasteRange 属性
类型：boolean
默认值：false
作用：允许在粘贴时自动扩展行数以容纳粘贴的数据
columnResizeMode 属性
类型：GC.Spread.Sheets.ResizeMode
可选值：normal（普通模式）、split（分割模式）
作用：指定调整列宽时的行为模式，split 模式下会同时影响相邻列
autoFitType 属性
类型：GC.Spread.Sheets.AutoFitType
可选值：cell（仅单元格）、cellWithHeader（单元格和表头）
作用：指定双击列标题边缘自动调整列宽时考虑的因素
/*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.allowExtendPasteRange = true;
spread.options.columnResizeMode = GC.Spread.Sheets.ResizeMode.split;
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
//init a data manager
var tableName = "Supplier";
var baseApiUrl = getBaseApiUrl();
var apiUrl = baseApiUrl + "/" + tableName;
var dataManager = spread.dataManager();
var myTable = dataManager.addTable("myTable", {
remote: {
read: {
url: apiUrl
}
}
});
//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
myTable.fetch().then(function() {
var view = myTable.addView("myView", [
{ value: "Id", width: 80 },
{ value: "CompanyName", width: 200, caption :"Company Name" },
{ value: "ContactName", width: 150, caption :"Contact" },
{ value: "ContactTitle", width: 200, caption :"Title" },
{ value: "Address", width: 200 },
{ value: "City", width: 150, caption :"City" },
{ value: "State", width: 100, caption :"State" },
{ value: "Region", width: 100, caption :"Region" }
]);
sheet.setDataView(view);
});
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;
}
