纯前端表格控件SpreadJS数据绑定系列教程（二）

在

详细操作

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);

执行完上述代码后，页面将显示如下内容：

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

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

以上就是SpreadJS自动设置表单数据绑定的内容，有关SpreadJS数据绑定的原理、方式，请点击此处了解>>>

想要获得 SpreadJS 更多资源或正版授权的伙伴，可以联系客服哦

标签：