复杂表格数据绑定方案 - 绑定数据源

收藏

接上文：复杂表格数据绑定方案 - 绑定字段

3、绑定数据源

加载模板后，根据业务需求（如从后端获取数据源）将获取的数据源进行绑定，这里数据源结构如下：
image.png118462523.png

使用setDataSource方法进行绑定：

复制代码

此时控制台报错如下：

原因是在加载数据源时，数据源的条数较多，超出了sheet的行数，所以出现了此错误提示。
SpreadJS提供了expandBoundRows方法，即方法作用为设置或获取表格绑定时是否扩展行信息。如设置为true即表示table数据源增加时sheet也会对应的增加行。
所以，将代码修改如下：

复制代码

此时继续执行，数据源可以加载成功，但样式并非我们所期望的：
如下图，

所以需要借助copyTo方法，对模板中设置的第一行样式进行复制，代码如下：

var table = sheet.tables.findByName("sales");
var range = table.range();
var row = range.row;
for (var i = 0; i < range.rowCount - 1; i++) {
sheet.copyTo(row, -1, row + i + 1, -1, 1, -1, GC.Spread.Sheets.CopyToOptions.span | GC.Spread.Sheets.CopyToOptions.style | GC.Spread.Sheets.CopyToOptions.formula)
}

复制代码

来看下最终效果，与初始预期的效果一致：

image.png641469421.png

注：
绑定数据源后，用户也可以进行table数据的新增、修改、删除等操作，SpreadJS提供了getDataSource方法用于获取数据源。
image.png134324034.png

附件提供了相关demo，包含模板、数据源、实现代码等，感兴趣的小伙伴可以自行操作测试看看。

附加资料：
1、数据绑定-字段列表的获取与设置

		自动登录	找回密码
密码			立即注册

0 个回复