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

本系列教程介紹SpreadJS數(shù)據(jù)綁定的相關(guān)內(nèi)容，分兩部分講解：

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

（二）SpreadJS表單綁定操作

下面，我們將詳細(xì)為您介紹SpreadJS數(shù)據(jù)綁定的原理、實(shí)現(xiàn)方式、操作以及擴(kuò)展應(yīng)用。（有關(guān)“SpreadJS表單綁定操作”的內(nèi)容，請(qǐng)點(diǎn)擊此處前往查看>>>）

點(diǎn)擊下載SpreadJS正式版

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

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

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

在SpreadJS的數(shù)據(jù)綁定過程中，無(wú)論是通過設(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)在頁(yè)面上面的相關(guān)單元格內(nèi)容）之后，數(shù)據(jù)源也會(huì)同步發(fā)生變化。利用這樣的機(jī)制，我們可以更方便的獲取用戶在頁(yè)面上更新的數(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ù)綁定的原理，以及三種綁定方式。（有關(guān)“SpreadJS表單綁定操作”的內(nèi)容，請(qǐng)點(diǎn)擊此處前往查看>>>）

想要獲得 SpreadJS 更多資源或正版授權(quán)的伙伴，

掃描關(guān)注慧聚IT微信公眾號(hào)，及時(shí)獲取最新動(dòng)態(tài)及最新資訊