下載SpreadJS最新試用版

前言

上一期我們對數據綁定做了一個大致的介紹，本期我們著重為大家介紹如果進行數據幫綁定。這里首先介紹如何進行表單級別操作：

使用前須知

1. 表單綁定無法跟其他兩種綁定混合使用：表單綁定綁定的是整個sheet，無法在其基礎上再去綁定某個單元格或者表格。

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

詳細操作

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，是市面上布局與功能都與 Excel 高度類似的一款表格控件，全中文操作界面，適用于.NET、Java、移動端等多個平臺的類 Excel 數據開發，備受華為、中通、民航飛行學院等國內知名企業客戶青睞。