背景: SpreadJS的数据可以通过toJSON方法导出,该方法导出的是整个表单的数据,包括单元格中的值、表单样式、表单中的一些特殊设置例如表单保护、条件格式、数据验证等等全部的信息。可是,在填报的场景下,我们只想要获取用户填写的数据,并不需要每次填报完存储整个表单信息。思路: 使用数据绑定,给表单中设置数据源,通过getDataSource 方法获取数据源,将其保存至数据库。
具体步骤:
1 设计模板
设计模板可以使用桌面或在线设计器,在数据菜单下,选择模板,可以设置数据源,此例子中用了一个table和一些文本,将其拖拽至表单对应位置即可。
将模板导出为js或ssjson文件,为方便引入我选择了导出js文件。
2 引入表单模板
在项目中引入模板,例子使用外部引入
- <script src="myTemplate.js"></script>
复制代码
3 设置数据绑定
- var dataSource = new GC.Spread.Sheets.Bindings.CellBindingSource(dbSource);
- sheet.setDataSource(dataSource);
复制代码
4 获取数据源
进入页面可以看到数据已显示在模板中,修改数据,点击获取数据源,可以看到控制台已打印出更新后的数据,可以已完成填报的数据存储至数据库中。
附件中有完整的示例代码,可以下载查看。
本示例运用了单元格绑定和表格绑定,另外没有介绍的还有表单级别绑定,可以查看:学习指南
常见问题:
Q 为什么我使用toJOSN导出数据中没有绑定了数据源的数据?
A: toJSON方法导出的表单数据中默认是不带数据源数据的,因为在表单填报的场景下需要将表单模板数据和数据源数据分开存储,以便于用于填报时每次加载固定模板,并将填报的数据单独存储在数据库中。如果想要导出带数据源的数据需要在toJSON的时候多穿一个参数:spread1.toJSON( { includeBindingSource: true } )
|
|