前言

上一期我们对数据绑定做了一个大致的介绍,本期我们着重为大家介绍如果进行数据帮绑定。这里首先介绍如何进行表单级别操作:

使用前须知

  1. 表单绑定无法跟其他两种绑定混合使用:

    表单绑定绑定的是整个sheet,无法在其基础上再去绑定某个单元格或者表格。

  2. 表单绑定无法在设计器中设置,只能通过代码来进行绑定设置:

    设计器只能设置表格绑定和单元格绑定。

详细操作

SpreadJS的表单绑定是将前端获取的数据源DataSource绑定到整个表单上,由于数据源是一个二维表格形式的结构,所以将会以列为单位绑定数据源中的每一个字段,这里通过设置autoGenerateColumns 可以控制是否自动生成绑定列,下面将以自动生成和手动生成两种方式分开详细介绍:

自动生成绑定列

autoGenerateColumns 设置为true时即为自动生成绑定列的模式。首先,我们假设前端接收的数据源为(数据源的获取可以为任何方式,比如常用的:ajax,getjson等等)。

var dataSource = [
  { ID:0, Name:'A', Info1:'Info0' },
  { ID:1, Name:'B', Info1:'Info1' },
  { ID:2, Name:'C', Info1:'Info2' },
];

获取需要绑定的工作表对象并声明为sheet,接下来通过。

sheet.autoGenerateColumns = true;

设置绑定模式为自动生成绑定列模式。

接下来将数据源通过setDataSource方法设置数据源给该sheet对象。

sheet.setDataSource(dataSource);

执行完上述代码后,页面会进行如下显示:

可以看到的,列头被自动定义成了数据源中对应字段的名称。列头会根据绑定的字段而变化这个是表单绑定的其中一个特征。

当我们在表格中进行填报,编辑之后,我们可以通过getDataSource方法来获取这个时候的数据源对象。例如,我们在上面显示的页面上进行填报,编辑:

当我们通过sheet.getDataSource()获得的数据源对象如下图所示:

以上就是这一期数据绑定带来的内容,下一期我们将介绍如何通过手动设置绑定列来完成表单绑定。


SpreadJS | 下载试用

纯前端表格控件SpreadJS,是市面上布局与功能都与 Excel 高度类似的一款表格控件,全中文操作界面,适用于.NET、Java、移动端等多个平台的类 Excel 数据开发,备受华为、中通、民航飞行学院等国内知名企业客户青睐。

您对SpreadJS产品的任何技术问题,都有技术支持工程师提供1对1专业解答,点击此处即可发帖提问>>技术支持论坛