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

SpreadJS数据绑定的原理

SpreadJS是一个纯前端控件，本身不包含任何后端结构，所以无法直接完成数据库绑定。SpreadJS本身绑定的数据源是用户传递到前端的一个json格式的DataSource，后端的业务逻辑用户可以自行去处理。

这样做的好处是低耦合、前后端分离，服务器端专门处理业务逻辑，前端只负责页面展示功能，无论安全性还是规范性都更符合常见的开发习惯。

在SpreadJS的数据绑定过程中，无论是通过设计器还是代码，都需要在SpreadJS中建立与数据源DataSource一一映射的关系。

SpreadJS数据绑定是以工作表（Sheet）为单位的绑定，一个sheet只能绑定一个数据源，但多个sheet可以绑定同一个数据源。

当设置好映射关系之后，我们将前端接收到的数据源通过对应的接口进行填充，之后SpreadJS会根据映射关系自动的将相关联的数据展示到对应的位置。

SpreadJS数据绑定本身是一个双向绑定，顾名思义，就是当用户更新了视图的内容 （绑定项在页面上面的相关单元格内容）之后，数据源也会同步发生变化。利用这样的机制，我们可以更方便的获取用户在页面上更新的数据。

在线填 ，作为SpreadJS的典型使用场景之一，便很好的利用了SpreadJS的数据绑定模式，我们通过双向绑定实时获取用户填 的数据，并将其进行存储。

SpreadJS数据绑定的方式

SpreadJS提供三种数据绑定的方式：表单绑定、单元格绑定、表格绑定。

单元格绑定

从字面上意思来看，单元格绑定就是通过一个单元格绑定数据源中的某个字段。这种方式在一些填 单据中比较常见。

表单绑定和表格绑定

表单绑定与表格绑定从字面上很容易混淆，他们之间的区别分为以下几个方面：

1、 绑定区域：表单绑定区域指的是Excel中的Sheet，也就是工作表：

表单绑定就是将数据源绑定在整个表单上，表单绑定数据源的行数决定了该sheet绑定完成之后初始的行数，sheet每新增一行或者减少一行都会造成数据源的变化。

表格绑定区域指的是Sheet中创建的table：

表格绑定会将数据源绑定在Sheet创建的table中，数据源的行数决定了绑定完成后table的初始行数，而只有table行数的变更才会造成数据源的变化并不是整个sheet。

2、 数据源格式：

文章前面提到，数据绑定中一个Sheet只能绑定一个数据源，所以表单绑定数据源的每一个字段都对应了表单的某一列。所以数据源是一个JSON数组，类似下面这样：

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

表格绑定，因为一个sheet中可以存在多个table，每一个table都可以绑定数据源中的一个字段，所以它对应的数据源是一个JSON对象，而对象的每一个字段将是一个JSON数组，每一个字段对应绑定一个table，类似下面这样：

var dataSource = {  table1: [    { orderDate: '1/6/2013', item: 'Pencil', units: 95, cost: 1.99 },    { orderDate: '4/1/2013', item: 'Binder', units: 60, cost: 4.99 },    { orderDate: '6/8/2013', item: 'Pen Set', units: 16, cost: 15.99 }  ],  table2: [    { orderDate: '1/6/2013', item: 'Pencil', units: 95, cost: 1.99 },    { orderDate: '4/1/2013', item: 'Binder', units: 60, cost: 4.99 },    { orderDate: '6/8/2013', item: 'Pen Set', units: 16, cost: 15.99 }  ]};

以上就是SpreadJS数据绑定的原理，以及三种绑定方式。（有关“SpreadJS表单绑定操作”的内容，请点击此处前往查看>>>）

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

标签：