下載SpreadJS最新試用版

前言

SpreadJS 作為一個類Exceel控件，有著和Excel基本類似的功能，但同時也有很多Excel沒有的獨有功能。數據綁定就是其中最常用的功能之一。下面文章將詳細的介紹數據綁定的原理，方式，操作以及擴展應用。

數據綁定的原理：

首先，SpreadJS是一個純前端控件，本身不包含任何后端結構，所以無法直接完成數據庫綁定，SpreadJS本身綁定的數據源就是用戶傳遞到前端的一個json格式的DataSource。后端的業務邏輯用戶可以自行去處理。這樣的好處是低耦合，前后端分離，服務器端專門處理業務邏輯，前端只負責頁面展示功能，無論安全性還是規范性都更符合常見的開發習慣。

接下來，數據綁定中，無論通過設計器還是通過代碼，都需要在SpreadJS中建立一個個跟數據源DataSource的映射關系。數據綁定是以工作表（Sheet）為單位的綁定，一個sheet只能綁定一個數據源，但多個sheet可以綁定同一個數據源。

之后，當設置好映射關系之后，我們將前端接收到的數據源通過對應的接口進行填充嗎，之后SpreadJS會根據映射關系自動的將相關聯的數據展示到對應的位置。

數據綁定本身是一個雙向綁定，雙向綁定顧名思義，就是當用戶更新了視圖的內容 （綁定項在頁面上面的相關單元格內容）之后，數據源也會同時發生變化。利用這樣的機制，我們可以很方便的獲取用戶頁面上修改之后的數據。這樣在一些在線填報的用戶場景中，我們利用雙向綁定就可以拿到用戶填報之后的數據，并將其進行存儲。

數據綁定的方式：

SpreadJS提供三種數據綁定的方式：表單綁定，單元格綁定，表格綁定

1、 單元格綁定

從字面上意思來看，顧名思義單元格綁定就是一個單元格綁定數據源中的某個字段。這種方式在一些填報單據中比較常見。

2、 表單綁定和表格綁定

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

• 綁定區域：

  表單指的是Excel中的Sheet，也就是工作表：

  

  表單綁定就是將數據源綁定在整個表單上，表單綁定數據源的行數決定了該sheet綁定完成之后初始的行數，sheet沒新增一行或者減少一行都會造成數據源的變化。

   

  表格指的是Sheet中創建的table：

  

  表格綁定會將數據源綁定在Sheet創建的table中，數據源的行數決定了綁定完成后table的初始行數，而只有table行數的變更才會造成數據源的變化并不是整個sheet。

• 數據源格式：

  由于之前所說的數據綁定中一個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正版授權，請點擊“”喲！