前言

SpreadJS 作为一个类Exceel控件,有着和Excel基本类似的功能,但同时也有很多Excel没有的独有功能。数据绑定就是其中最常用的功能之一。下面文章将详细的介绍数据绑定的原理,方式,操作以及扩展应用。

数据绑定的原理:

首先,SpreadJS是一个纯前端控件,本身不包含任何后端结构,所以无法直接完成数据库绑定,SpreadJS本身绑定的数据源就是用户传递到前端的一个json格式的DataSource。后端的业务逻辑用户可以自行去处理。这样的好处是低耦合,前后端分离,服务器端专门处理业务逻辑,前端只负责页面展示功能,无论安全性还是规范性都更符合常见的开发习惯。

接下来,数据绑定中,无论通过设计器还是通过代码,都需要在SpreadJS中建立一个个跟数据源DataSource的映射关系。数据绑定是以工作表(Sheet)为单位的绑定,一个sheet只能绑定一个数据源,但多个sheet可以绑定同一个数据源。

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

数据绑定本身是一个双向绑定,双向绑定顾名思义,就是当用户更新了视图的内容 (绑定项在页面上面的相关单元格内容)之后,数据源也会同时发生变化。利用这样的机制,我们可以很方便的获取用户页面上修改之后的数据。这样在一些在线填报的用户场景中,我们利用双向绑定就可以拿到用户填报之后的数据,并将其进行存储。

数据绑定的方式:

SpreadJS提供三种数据绑定的方式:表单绑定,单元格绑定,表格绑定

1、 单元格绑定

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

2、 表单绑定和表格绑定

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

  • 绑定区域:

    表单指的是Excel中的Sheet,也就是工作表:

    绑定区域

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

    表格指的是Sheet中创建的table:

    绑定区域

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

  • 数据源格式:

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

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