概述
本 Demo 展示了如何将表格绑定到嵌套数据源，并通过 TableColumn 配置每列的显示方式和交互行为。Demo 演示了数据绑定的完整流程：创建数据源、配置表格列属性（格式化器、单元格类型、值转换函数）、绑定数据，以及获取用户修改的行信息。
实现思路
创建包含销售数据的嵌套数据结构（data 对象包含 sales 数组）
使用 sheet.tables.add() 创建表格并设置主题样式
为每个列创建 TableColumn 对象，配置数据字段、显示名称、格式化器、单元格类型和转换函数
调用 table.autoGenerateColumns(false) 禁止自动生成列，确保使用自定义配置
使用 table.bind() 方法将表格列绑定到数据源的 sales 字段
设置列宽以优化显示效果
添加按钮事件，调用 getDirtyRows() 获取已修改的行信息
代码解析
创建数据源和转换函数
数据源采用嵌套结构，顶层包含 name 和 region 字段，sales 数组存储具体的销售记录。convert 函数用于将成本值转换为带单位的字符串显示。
创建 TableColumn 配置
TableColumn 构造函数接收多个参数：列索引、数据字段名、列标题、格式化器、单元格类型和值转换函数。
tableColumn1：绑定 orderDate 字段，设置日期格式化器为 "yyyy-mm-dd"
tableColumn2：绑定 item 字段，显示商品名称
tableColumn3：绑定 units 字段，显示数量
tableColumn4：绑定 cost 字段，使用 convert 函数转换显示
tableColumn5：绑定 isDelivered 字段，使用 CheckBox 单元格类型
绑定数据到表格
这段代码首先创建表格并设置主题样式，然后调用 autoGenerateColumns(false) 禁止自动列生成，最后使用 bind() 方法将配置好的 TableColumn 数组绑定到数据源的 sales 字段。
获取修改的行
getDirtyRows() 方法返回所有被修改的行信息数组，每个元素包含 row 属性表示行索引。这段代码获取所有修改的行号并显示在文本框中。
运行效果
表格加载后显示销售订单数据，包括订单日期、商品、数量、成本和是否交付
订单日期列以 "yyyy-mm-dd" 格式显示
成本列自动添加"元"后缀
是否交付列显示复选框，可以直接勾选
修改表格数据后，点击"获取修改行"按钮，文本框会显示被修改行的行号
var spreadNS = GC.Spread.Sheets;
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getActiveSheet();
var spreadNS = GC.Spread.Sheets;
var data = {
name: 'Jones', region: '东部',
sales: [
{ orderDate: '2020-12-12', item: '铅笔', units: 95, cost: 1.99, isDelivered: true },
{ orderDate: '2020-10-04', item: '活页夹', units: 60, cost: 4.99, isDelivered: false },
{ orderDate: '2020-09-05', item: '钢笔套装', units: 16, cost: 15.99, isDelivered: false }
]
};
var convert = function (item) {
return item['cost'] + '元';
}
var table = sheet.tables.add('tableSales', 0, 0, 5, 5);
table.style(spreadNS.Tables.TableThemes["medium4"]);
var tableColumn1 = new spreadNS.Tables.TableColumn(1, "orderDate", "订单日期", "yyyy-mm-dd");
var tableColumn2 = new spreadNS.Tables.TableColumn(2, "item", "商品");
var tableColumn3 = new spreadNS.Tables.TableColumn(3, "units", "数量");
var tableColumn4 = new spreadNS.Tables.TableColumn(4, "cost", "成本", null, null, convert);
var tableColumn5 = new spreadNS.Tables.TableColumn(5, "isDelivered", "是否交付", null, new GC.Spread.Sheets.CellTypes.CheckBox());
table.autoGenerateColumns(false);
table.bind([tableColumn1, tableColumn2, tableColumn3, tableColumn4, tableColumn5], 'sales', data);
sheet.setColumnWidth(0, 120);
sheet.setColumnWidth(1, 120);
sheet.setColumnWidth(2, 120);
sheet.setColumnWidth(3, 120);
sheet.setColumnWidth(4, 120);
document.getElementById("getState").addEventListener('click', function () {
var table = sheet.tables.findByName("tableSales");
if (table) {
var dataArr = table.getDirtyRows();
var str = "";
for (var i = 0; i < dataArr.length; i++) {
str += dataArr[i].row + ", ";
}
document.getElementById("stateText").value = str;
}
});
}
<!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">
<div class="option-row">
<label style="background-color:#F4F8EB;">更改表格数据，点击按钮获取已修改的行。</label>
</div>
<input type="button" id="getState" value="获取已修改的行"/>
<textarea id="stateText" style="width: 100%;height: 30px;margin-top:10px"></textarea>
</div>
</div></body>
</html>
.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;
}
label {
display: block;
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
