概述
本 Demo 展示了如何在序列化工作簿时包含绑定数据源。通过设置 toJSON 方法的 includeBindingSource 选项为 true，可以将表单、单元格或表格绑定的数据源一起序列化到 JSON 对象中，加载到新的 Spread 实例时无需重新绑定数据源。
实现思路
创建两个 Spread 工作簿实例：源工作簿和目标工作簿
在源工作簿中设置两种数据绑定方式：
Sheet 1：使用 setDataSource 方法设置表单级数据绑定
Sheet 2：使用 setBindingPath 设置单元格绑定，使用 table.bindingPath 和 tables.addFromDataSource 设置表格绑定
提供复选框让用户选择是否包含绑定源
点击按钮时，将源工作簿序列化为 JSON，然后反序列化到目标工作簿
代码解析
表单级数据绑定
这段代码为第一个工作表设置了表单级数据绑定。setDataSource 方法会自动根据数据源的字段生成列，并将数据绑定到工作表。
单元格绑定和表格绑定
这段代码展示了两种绑定方式：
使用 CellBindingSource 包装数据对象，通过 setBindingPath 将单元格绑定到指定路径
创建表格后，通过 bindingPath 方法将表格绑定到数据源中的数组字段
序列化和反序列化
核心逻辑：
toJSON 方法接受一个选项对象，includeBindingSource 控制是否包含绑定数据源
使用 JSON.stringify 将对象转换为 JSON 字符串
使用 JSON.parse 解析 JSON 字符串，通过 fromJSON 加载到目标工作簿
运行效果
源工作簿显示两个工作表："Sheet data source" 展示表单级绑定数据，"Table data source" 展示单元格绑定和表格绑定数据
勾选"包含绑定源"复选框，点击"JSON 序列化"按钮，目标工作簿会完整显示源工作簿的数据
取消勾选复选框，点击按钮，目标工作簿只显示结构和格式，不包含绑定数据
通过对比可以清晰看到 includeBindingSource 选项的效果
API 参考
toJSON 方法
serializationOption.includeBindingSource：布尔值，是否在序列化时包含绑定数据源，默认为 false
返回值：可序列化为 JSON 的对象
fromJSON 方法
json：从 toJSON 得到的 JSON 对象
jsonOptions：反序列化选项（可选）
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var spread2 = new GC.Spread.Sheets.Workbook(document.getElementById("ss1"), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
spread.options.tabStripRatio = 0.6;
//Sheet data source
var sd = dataSource;
var sheet1 = spread.getSheet(0);
sheet1.name("Sheet data source");
if (sd.length > 0) {
sheet1.setDataSource(sd);
}
sheet1.setColumnWidth(0, 150);
sheet1.setColumnWidth(1, 150);
sheet1.setColumnWidth(2, 80);
sheet1.setColumnWidth(3, 150);
sheet1.setColumnWidth(4, 80);
spread.resumePaint();
//Table data source
sd = [
{ name: "Yang", age: 24 },
{ name: "Wang", age: 35 },
{ name: "Zhang", age: 20 }
];
var sheet2 = spread.getSheet(1);
sheet2.name("Table data source");
sheet2.setDataSource(new GC.Spread.Sheets.Bindings.CellBindingSource({
name: "Yang",
age: 24,
country: "China",
city: "Xi'an",
ds: sd
}));
sheet2.setBindingPath(0, 1, "name");
sheet2.setBindingPath(1, 1, "age");
sheet2.setBindingPath(2, 1, "country");
sheet2.setBindingPath(3, 1, "city");
var table = sheet2.tables.add("table1", 4, 1, 1, 1);
table.bindingPath("ds");
sheet2.tables.addFromDataSource("table2", 9, 1, sd);
sheet2.options.allowCellOverflow = true;
sheet2.setValue(4, 4, "Table binding to data source");
sheet2.setValue(9, 4, "Table created from data source");
document.getElementById("fromtoJsonBtn").addEventListener('click',function() {
//ToJson
var spread1 = GC.Spread.Sheets.findControl(document.getElementById('ss'));;
var jsonStr = JSON.stringify(spread1.toJSON({
includeBindingSource: document.getElementById("includeBindingSource").checked
}));
//FromJson
var spread2 = GC.Spread.Sheets.findControl(document.getElementById('ss1'));;
spread2.fromJSON(JSON.parse(jsonStr));
});
}
<!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$/spread/source/data/data.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 class="sample-spreadsheets">
<label style="font:bold 10pt arial">源工作簿:</label>
<div id="ss"></div>
<label style="font:bold 10pt arial">目标工作簿:</label>
<div id="ss1"></div>
</div>
<div class="options-container">
<div class="option-row">
<label>点击按钮，将源工作簿中的 JSON 数据序列化到目标工作簿，可选择包含或不包含绑定源数据。</label>
</div>
<div class="option-row">
<input type="checkbox" id="includeBindingSource" checked="checked" />
<label for="includeBindingSource">包含绑定源</label>
<input type="button" value="JSON 序列化" id="fromtoJsonBtn" title="将源表格序列化为 JSON 格式，并从 JSON 恢复到目标表格。" />
</div>
</div>
</div>
</body>
</html>
.sample-tutorial {
display: flex;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets > label {
flex-shrink: 0;
}
#ss, #ss1 {
flex: 1;
min-height: 0;
}
.options-container {
width: 280px;
flex-shrink: 0;
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;
}
