如何在填報場景中使用數據綁定獲取數據源
背景
在公司的日常業務中，存在不少數據的收集提取需求，大部分公司會採取Excel來完成數據的收集和匯總，但這項工作會讓負責資訊收集的業務人員相當頭大。雖然提前做好了數據收集模板，但最終提交上來的模板會被修改的五花八門，資訊填寫錯誤率比較高，無法實現資訊填寫不完整不允許提交的約束。後期的數據匯總雖然可以採用手動的複製黏貼來實現，但如果想要把這些數據做結構化存儲，又需要去研發人員去開發一套解析Excel文檔的功能，將這些填報數據提取入庫，整個流程比較繁瑣且出錯率較高。
如果從最開始將這套數據收集的業務完全做在Web端，整體的數據收集任務下發，填報，數據匯總，數據提取完全自動化，這將會大大的提高業務人員的工作效率。本文會帶大家使用純前端表格控制項解決這個問題。該控制項SpreadJS具備純前端、高性能等特點，在瀏覽器端實現了excel的大部分功能，使得在線編輯Excel稱為可能。使用它，我們不再需要本地安裝Office相關的服務，只要具備一個滿足H5標準的瀏覽器，即可在Web端完成之前需要在本地Excel中完成的一系列操作，我們也可以在官方部署的體驗地址上對SpreadJS進行在線體驗。
數據收集邏輯
結合SpreadJS和前後端交互邏輯，即可完成一個數據收集的功能，大家如果對源碼內容感興趣可以查看： 指標補錄Demo
在該實例中，使用SpreadJS中的數據綁定設計了數據收集模板與匯總模板；之後開發了數據收據模板下發的功能，將數據收集模板推送給需要填報的相關人員。
對應人員填報後，可以使用SpreadJS中數據綁定獲取數據的相關API，獲取填寫數據。
最終再藉助數據綁定，將匯總數據使用數據綁定設置在匯總模板中。通過如上幾步，客戶的填報數據在提交時，就可以以結構化數據存儲在資料庫中，匯總時只需要從資料庫中查詢再設置到匯總模板即可。SpreadJS同時內置了多種數據驗證，在數據提交時，結合數據驗證，可以在模板中包含異常數據時將請求駁回，建立一套嚴謹便捷的數據提交匯總流程。
項目實戰
接下來我們可以一起探索SpreadJS中數據綁定的功能究竟該如何使用。
如果不了解如何在Web端項目集成SpreadJS,可以參考文章:
SpreadJS內部支援了三種數據綁定方式，分別數工作表綁定、單元格綁定與表格綁定。
（1）工作表綁定
通常一個Excel文件會包含多張工作表，如下所示，Sheet2與Sheet3分別代表的就是一張工作表：
工作表級別的數據綁定即將數據與當前工作表建立映射關係，相關的程式碼實現可以參考學習指南-工作表綁定，這裡列出一些核心的程式碼：
let designer = new GC.Spread.Sheets.Designer.Designer("designer-container")
// 獲取designer關聯的Spread對象
let spread = designer.getWorkbook()
// 獲取當前活動的sheet
let sheet = spread.getActiveSheet()
// 模擬綁定數據，表單綁定數據源是一個json數組
function generateData(count){
` `let data = []
` `for(let i=0; i<count;i++){
` `let item = {}
` `item.id = i
` `item.name = `姓名${i}`
` `item.age = Math.ceil(Math.random()\*10+10)
` `item.weight = Math.round(Math.random()\*30+20)
` `data.push(item)
` `}
` `return data
}
let data = generateData(100)
// 設置當前工作表的數據源
sheet.setDataSource(data)
執行完成綁定邏輯之後，工作表展示如下：
接下來我們可以在工作表中進行一些刪除行，新增行，修改數據的操作，操作完成之後，調用獲取綁定數據的API，即可獲取當前修改之後的綁定數據：
詳細的demo演示，可以點擊這裡參考實現。
（2）單元格綁定
單元格綁定見名思意，即將單元格與某一個欄位key建立映射，用戶填寫的數據可以反應在這個key值對用的value中，單元格綁定程式碼的實現方式可以參考學習指南-單元格綁定，本文演示如何藉助設計器實現數據綁定。首先，藉助設計器，完成一個數據綁定模板的設計，可以參考如下動畫：
通過簡單的拖動，即可完成key值與單元格之間的映射建立，接下來，就可以構造一些默認數據，設置默認的綁定數據。綁定完成之後，可以修改綁定數據，修改完成之後，通過SpreadJS數據綁定獲取數據源的API，即可拿到修改之後的數值。這裡其實就是一個填報場景的體現，例如，當前需要收集人員資訊表，每一位員工在填寫完成之後，點擊提交時，就可以拿到員工資訊的一個json數據，之後前端就可以將這些數據發送給服務端，讓服務端去做存儲了。
SpreadJS中，支援將當前文件導出成一個他們自己能識別的json，模板文件可以以json形式存儲，下次訪問文件時，只需要執行spread.fromJSON(fileJson)，就可以實現模板文件的保存與加在顯示了，關於表單綁定完整的Demo演示可以點擊這裡，參考詳細的實現程式碼。
（3）表格綁定
很多不熟悉Excel的用戶，會直接把一個Excel工作簿或者一個工作表稱為一個表格，但其實這樣的是不正確的。Excel中表格具有特殊的含義，這一點在SpreadJS中也是一致的。SpreadJS中表格綁定的程式碼實現可以參考學習指南-表格綁定。在客戶的實際業務中，表格綁定和單元格綁定往往會同時發生，接下來會演示藉助SpreadJS在線表格編輯器（設計器）如何實現一個這樣的模板設計：
到這裡我們就為大家完整展示了如何在填報場景中使用數據綁定獲取數據源，大家想了解更多demo源碼實例：
//www.grapecity.com.cn/developer/spreadjs/demo/code-base
