下載SpreadJS最新試用版

前言

SpreadJS 作為一個(gè)類Exceel控件，有著和Excel基本類似的功能，但同時(shí)也有很多Excel沒有的獨(dú)有功能。數(shù)據(jù)綁定就是其中最常用的功能之一。下面文章將詳細(xì)的介紹數(shù)據(jù)綁定的原理，方式，操作以及擴(kuò)展應(yīng)用。

數(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í)慣。

接下來，數(shù)據(jù)綁定中，無論通過設(shè)計(jì)器還是通過代碼，都需要在SpreadJS中建立一個(gè)個(gè)跟數(shù)據(jù)源DataSource的映射關(guān)系。數(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)的位置。

數(shù)據(jù)綁定本身是一個(gè)雙向綁定，雙向綁定顧名思義，就是當(dāng)用戶更新了視圖的內(nèi)容 （綁定項(xiàng)在頁面上面的相關(guān)單元格內(nèi)容）之后，數(shù)據(jù)源也會(huì)同時(shí)發(fā)生變化。利用這樣的機(jī)制，我們可以很方便的獲取用戶頁面上修改之后的數(shù)據(jù)。這樣在一些在線填報(bào)的用戶場(chǎng)景中，我們利用雙向綁定就可以拿到用戶填報(bào)之后的數(shù)據(jù)，并將其進(jìn)行存儲(chǔ)。

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

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

1、 單元格綁定

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

2、 表單綁定和表格綁定

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

• 綁定區(qū)域：

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

  

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

   

  表格指的是Sheet中創(chuàng)建的table：

  

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

• 數(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正版授權(quán)，請(qǐng)點(diǎn)擊“”喲！