SpreadJS 数据绑定系列（二） 表单绑定操作（上）

前言

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

使用前须知

• 表单绑定无法跟其他两种绑定混合使用：
  表单绑定绑定的是整个sheet，无法在其基础上再去绑定某个单元格或者表格。
• 表单绑定无法在设计器中设置，只能通过代码来进行绑定设置：
  设计器只能设置表格绑定和单元格绑定。
  
  

详细操作

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

自动生成绑定列

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

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

复制代码

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

1. sheet.autoGenerateColumns = true;

复制代码

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

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

1. sheet.setDataSource(dataSource);

复制代码

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

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

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

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

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

版主上传的图片看不了呢

saidme 发表于 2019-3-21 13:50
版主上传的图片看不了呢

现在还看不了吗？您这边用户网络是什么，电信还是联通？还有您是通过手机访问的还是通过电脑访问的？

ClarkPan 发表于 2019-3-25 10:00
现在还看不了吗？您这边用户网络是什么，电信还是联通？还有您是通过手机访问的还是通过电脑访问的？

你好, 现在可以看了 , 网络是电信的

下一期内容呢？怎么搜不到了？

找了一下也没有找到，可能是论坛帖子丢失了，你现在是想要学习什么内容，或者遇得到什么问题了呢？