SpreadJS v14.0正式版下載

一、SpreadJS數(shù)據(jù)綁定介紹

前言

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

下面，我們將詳細(xì)為您介紹SpreadJS數(shù)據(jù)綁定的原理、實(shí)現(xiàn)方式、操作以及擴(kuò)展應(yīng)用。

SpreadJS數(shù)據(jù)綁定的原理

SpreadJS是一個(gè)純前端控件，本身不包含任何后端結(jié)構(gòu)，所以無法直接完成數(shù)據(jù)庫綁定。SpreadJS本身綁定的數(shù)據(jù)源是用戶傳遞到前端的一個(gè)json格式的DataSource，后端的業(yè)務(wù)邏輯用戶可以自行去處理。

這樣做的好處是低耦合、前后端分離，服務(wù)器端專門處理業(yè)務(wù)邏輯，前端只負(fù)責(zé)頁面展示功能，無論安全性還是規(guī)范性都更符合常見的開發(fā)習(xí)慣。

在SpreadJS的數(shù)據(jù)綁定過程中，無論是通過設(shè)計(jì)器還是代碼，都需要在SpreadJS中建立與數(shù)據(jù)源DataSource一一映射的關(guān)系。

SpreadJS數(shù)據(jù)綁定是以工作表（Sheet）為單位的綁定，一個(gè)sheet只能綁定一個(gè)數(shù)據(jù)源，但多個(gè)sheet可以綁定同一個(gè)數(shù)據(jù)源。

當(dāng)設(shè)置好映射關(guān)系之后，我們將前端接收到的數(shù)據(jù)源通過對(duì)應(yīng)的接口進(jìn)行填充，之后SpreadJS會(huì)根據(jù)映射關(guān)系自動(dòng)的將相關(guān)聯(lián)的數(shù)據(jù)展示到對(duì)應(yīng)的位置。

SpreadJS數(shù)據(jù)綁定本身是一個(gè)雙向綁定，顧名思義，就是當(dāng)用戶更新了視圖的內(nèi)容 （綁定項(xiàng)在頁面上面的相關(guān)單元格內(nèi)容）之后，數(shù)據(jù)源也會(huì)同步發(fā)生變化。利用這樣的機(jī)制，我們可以更方便的獲取用戶在頁面上更新的數(shù)據(jù)。

在線填報(bào)，作為SpreadJS的典型使用場(chǎng)景之一，便很好的利用了SpreadJS的數(shù)據(jù)綁定模式，我們通過雙向綁定實(shí)時(shí)獲取用戶填報(bào)的數(shù)據(jù)，并將其進(jìn)行存儲(chǔ)。

SpreadJS數(shù)據(jù)綁定的方式

SpreadJS提供三種數(shù)據(jù)綁定的方式：表單綁定、單元格綁定、表格綁定。

單元格綁定

從字面上意思來看，單元格綁定就是通過一個(gè)單元格綁定數(shù)據(jù)源中的某個(gè)字段。這種方式在一些填報(bào)單據(jù)中比較常見。

表單綁定和表格綁定

表單綁定與表格綁定從字面上很容易混淆，他們之間的區(qū)別分為以下幾個(gè)方面：

1、 綁定區(qū)域：表單綁定區(qū)域指的是Excel中的Sheet，也就是工作表：

表單綁定就是將數(shù)據(jù)源綁定在整個(gè)表單上，表單綁定數(shù)據(jù)源的行數(shù)決定了該sheet綁定完成之后初始的行數(shù)，sheet每新增一行或者減少一行都會(huì)造成數(shù)據(jù)源的變化。

表格綁定區(qū)域指的是Sheet中創(chuàng)建的table：

表格綁定會(huì)將數(shù)據(jù)源綁定在Sheet創(chuàng)建的table中，數(shù)據(jù)源的行數(shù)決定了綁定完成后table的初始行數(shù)，而只有table行數(shù)的變更才會(huì)造成數(shù)據(jù)源的變化并不是整個(gè)sheet。

2、 數(shù)據(jù)源格式：

文章前面提到，數(shù)據(jù)綁定中一個(gè)Sheet只能綁定一個(gè)數(shù)據(jù)源，所以表單綁定數(shù)據(jù)源的每一個(gè)字段都對(duì)應(yīng)了表單的某一列。所以數(shù)據(jù)源是一個(gè)JSON數(shù)組，類似下面這樣：

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

表格綁定，因?yàn)橐粋€(gè)sheet中可以存在多個(gè)table，每一個(gè)table都可以綁定數(shù)據(jù)源中的一個(gè)字段，所以它對(duì)應(yīng)的數(shù)據(jù)源是一個(gè)JSON對(duì)象，而對(duì)象的每一個(gè)字段將是一個(gè)JSON數(shù)組，每一個(gè)字段對(duì)應(yīng)綁定一個(gè)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 數(shù)據(jù)綁定的原理，以及三種綁定方式。

二、SpreadJS表單綁定操作

前言

在第一節(jié)中，我們對(duì)數(shù)據(jù)綁定做了一個(gè)大致的介紹，在第二節(jié)中我們將著重為大家介紹如何完成SpreadJS的數(shù)據(jù)綁定。這里首先介紹如何進(jìn)行表單級(jí)別的綁定操作：

使用前須知

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

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

2. 表單綁定無法在設(shè)計(jì)器中設(shè)置，只能通過代碼來進(jìn)行綁定設(shè)置：

   通過Spread設(shè)計(jì)器只能設(shè)置表格綁定和單元格綁定。

詳細(xì)操作

SpreadJS的表單綁定是將前端獲取的數(shù)據(jù)源DataSource綁定到整個(gè)表單上，由于數(shù)據(jù)源是一個(gè)二維表格形式的結(jié)構(gòu)，所以將會(huì)以列為單位綁定數(shù)據(jù)源中的每一個(gè)字段，這里通過設(shè)置autoGenerateColumns 可以控制是否自動(dòng)生成綁定列，下面將以自動(dòng)生成和手動(dòng)生成兩種方式分開詳細(xì)介紹：

自動(dòng)生成綁定列

autoGenerateColumns 設(shè)置為true時(shí)即為自動(dòng)生成綁定列的模式。

首先，我們假設(shè)前端接收的數(shù)據(jù)源為如下結(jié)構(gòu)(數(shù)據(jù)源的獲取可以為任何方式，比如常用的：ajax,getjson等等)：

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

獲取需要綁定的工作表對(duì)象并聲明為sheet，接下來通過這段代碼，設(shè)置綁定模式為自動(dòng)生成綁定列模式：

sheet.autoGenerateColumns = true;

接下來，我們將數(shù)據(jù)源通過setDataSource方法設(shè)置數(shù)據(jù)源，并傳給該sheet對(duì)象。

sheet.setDataSource(dataSource);

執(zhí)行完上述代碼后，頁面將顯示如下內(nèi)容：

從上圖可以看到，列頭被自動(dòng)定義成了數(shù)據(jù)源中對(duì)應(yīng)字段的名稱。列頭會(huì)根據(jù)綁定的字段而變化，這也是表單綁定的其中一個(gè)重要特征。

當(dāng)我們?cè)诒?格中進(jìn)行填報(bào)、編輯之后，我們可以通過getDataSource方法來獲取此時(shí)的數(shù)據(jù)源對(duì)象。例如，我們?cè)谏厦骘@示的頁面上進(jìn)行填報(bào)、編輯后:

SpreadJS | 下載試用

純前端表格控件SpreadJS，可滿足 .NET、Java、App 等應(yīng)用程序中的 Web Excel 組件開發(fā)、數(shù)據(jù)填報(bào)、在線文檔、圖表公式聯(lián)動(dòng)、類 Excel UI 設(shè)計(jì)等業(yè)務(wù)場(chǎng)景，并在數(shù)據(jù)可視化、Excel 導(dǎo)入導(dǎo)出、公式引用、數(shù)據(jù)綁定、框架集成中無需大量代碼開發(fā)和測(cè)試，極大降低了企業(yè)研發(fā)成本和項(xiàng)目交付風(fēng)險(xiǎn)。

當(dāng)我們通過sheet.getDataSource()獲得的數(shù)據(jù)源對(duì)象如下圖所示：

本文轉(zhuǎn)載自