概述
本 Demo 展示了表单级别数据绑定的两种实现方式。第一个工作表使用默认的自动生成列方式绑定数据，第二个工作表使用自定义列配置方式，可以精确控制每列的显示名称、大小、格式化器和单元格类型等属性。
实现思路
创建产品数据源（Product 对象数组，包含编号、名称、产品线、颜色、价格、成本、重量、停产状态和评级等字段）
第一个工作表使用默认绑定方式，调用 setDataSource 方法自动生成列
第二个工作表使用自定义绑定方式，设置 autoGenerateColumns 为 false，然后使用 bindColumns 方法配置列信息
自定义列配置包括显示名称、列宽、数字格式化和复选框单元格类型
代码解析
生成测试数据
创建包含 9 个字段的产品数据对象，并生成 100 条测试数据。
默认绑定方式
使用默认的自动生成列方式，SpreadJS 会根据数据源的字段自动创建列，列名为字段名，宽度为默认值。
自定义列绑定
通过设置 autoGenerateColumns 为 false 禁用自动生成列，然后使用 bindColumns 方法传入列配置数组。每个列配置对象可以设置：
name：数据字段名
displayName：列标题显示名称
size：列宽
formatter：格式化器（如 "0.00" 显示两位小数）
cellType：单元格类型（如复选框）
运行效果
第一个工作表「默认绑定」：显示 100 条产品数据，列名为英文字段名，所有列宽度相同
第二个工作表「自定义绑定」：显示相同数据，但列名显示为中文，价格、成本和重量列格式化为两位小数，已停产列显示为复选框
可以通过切换工作表标签对比两种绑定方式的显示效果
API 参考
setDataSource 方法
将数据源绑定到表单，dataSource 可以是对象数组。
autoGenerateColumns 属性
控制是否自动生成列，默认为 true。设置为 false 时需要手动配置列信息。
bindColumns 方法
批量绑定多个列，colInfos 是列配置对象数组。
列配置对象属性
name：数据字段名（必填）
displayName：列标题显示名称
size：列宽（像素）
formatter：单元格格式化器
cellType：单元格类型
visible：是否显示列
var _lines = ["计算机", "洗衣机", "炉灶"];
var _colors = ["红色", "绿色", "蓝色", "白色"];
var _ratings = ["糟糕", "差", "一般", "好", "很棒", "极棒"];
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
initSpread(spread);
};
function Product(id, line, color, name, price, cost, weight, discontinued, rating) {
this.id = id;
this.line = line;
this.color = color;
this.name = name;
this.price = price;
this.cost = cost;
this.weight = weight;
this.discontinued = discontinued;
this.rating = rating;
}
function getProducts(count) {
var dataList = [];
for (var i = 1; i <= count; i++) {
var line = _lines[parseInt(Math.random() * 3)];
dataList[i - 1] = new Product(i,
line,
_colors[parseInt(Math.random() * 4)],
line + " " + line.charAt(0) + i,
parseInt(Math.random() * 5001) / 10.0 + 500,
parseInt(Math.random() * 6001) / 10.0,
parseInt(Math.random() * 10001) / 100.0,
!!(Math.random() > 0.5) === true ? "是" : "否",
_ratings[parseInt(Math.random() * 6)]);
}
return dataList;
}
function initSpread(spread) {
spread.suspendPaint();
spread.options.tabStripRatio = 0.8;
var products = getProducts(100);
var sheet = spread.getSheet(0);
sheet.name("默认绑定");
sheet.setDataSource(products);
var sheet2 = spread.getSheet(1);
sheet2.name("自定义绑定");
sheet2.autoGenerateColumns = false;
sheet2.setDataSource(products);
var colInfos = [
{ name: "id", displayName: "编号" },
{ name: "name", displayName: "名称", size: 100 },
{ name: "line", displayName: "产品线", size: 80 },
{ name: "color", displayName: "颜色" },
{ name: "price", displayName: "价格", formatter: "0.00", size: 80 },
{ name: "cost", displayName: "成本", formatter: "0.00", size: 80 },
{ name: "weight", displayName: "重量", formatter: "0.00", size: 80 },
{ name: "discontinued", displayName: "已停产", cellType: new GC.Spread.Sheets.CellTypes.CheckBox(), size: 100 },
{ name: "rating", displayName: "评级" }
];
sheet2.bindColumns(colInfos);
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" style="width:100%;height:100%"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
