在第一節中，我們對數據綁定做了一個大致的介紹，在第二節中我們將著重為大家介紹如何完成SpreadJS的數據綁定。這里首先介紹如何進行表單級別的綁定操作：

使用前須知

1、表單綁定無法跟其他兩種綁定混合使用：

表單綁定，綁定的是整個sheet，無法在其基礎上再去綁定某個單元格或者表格。

2、表單綁定無法在設計器中設置，只能通過代碼來進行綁定設置：

通過Spread設計器只能設置表格綁定和單元格綁定。

點擊下載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);

執行完上述代碼后，頁面將顯示如下內容：

從上圖可以看到，列頭被自動定義成了數據源中對應字段的名稱。列頭會根據綁定的字段而變化，這也是表單綁定的其中一個重要特征。

當我們在表格中進行填報、編輯之后，我們可以通過getDataSource方法來獲取此時的數據源對象。例如，我們在上面顯示的頁面上進行填報、編輯后：

當我們通過sheet.getDataSource()獲得的數據源對象如下圖所示：

以上就是SpreadJS自動設置表單數據綁定的內容，有關SpreadJS數據綁定的原理、方式，請點擊此處了解>>>

想要獲得 SpreadJS 更多資源或正版授權的伙伴，

掃描關注慧聚IT微信公眾號，及時獲取最新動態及最新資訊