SpreadJS v14.0正式版下載

一、SpreadJS數據綁定介紹

前言

SpreadJS 作為一個純前端類Excel表格控件，有著和Excel高度類似的功能，但同時也有很多Excel所不具備的獨有功能。其中，數據綁定就是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的數據綁定。這里首先介紹如何進行表單級別的綁定操作：

使用前須知

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

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

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

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

詳細操作

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方法來獲取此時的數據源對象。例如，我們在上面顯示的頁面上進行填報、編輯后:

SpreadJS | 下載試用

純前端表格控件SpreadJS，可滿足 .NET、Java、App 等應用程序中的 Web Excel 組件開發、數據填報、在線文檔、圖表公式聯動、類 Excel UI 設計等業務場景，并在數據可視化、Excel 導入導出、公式引用、數據綁定、框架集成中無需大量代碼開發和測試，極大降低了企業研發成本和項目交付風險。

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

本文轉載自