SpreadJS作為一個純前端類Excel表格控件，有著和Excel高度類似的功能，但同時也有很多Excel所不具備的獨有功能。其中，數據綁定就是SpreadJS最常用的功能之一。

本系列教程介紹SpreadJS數據綁定的相關內容，分兩部分講解：

（一）SpreadJS數據綁定介紹

（二）SpreadJS表單綁定操作

下面，我們將詳細為您介紹SpreadJS數據綁定的原理、實現方式、操作以及擴展應用。（有關“SpreadJS表單綁定操作”的內容，請點擊此處前往查看>>>）

點擊下載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 更多資源或正版授權的伙伴，

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