數據填報，是報表系統常見的功能模塊，同時也是企業數據化管理的重要手段，常被用于管理業務流程、匯總采集數據，以及開發各類數據報送系統。對于報表工具而言，數據填報的典型應用場景就是利用報表模板填報錄入并分析各種業務數據。

常見的數據填報業務場景

以生產采購管理系統為例，系統中某個零件在尋找目標供應商時，會邀請供應商針對該零件規格進行報價。與一般采購成品的簡單報價模式不同，生產采購中的零件很多是根據設計需要定制生產，所以其報價模式更為復雜。

所以在搭建這類系統時，需要解決的技術難點包括：

  • Excel文件報價方式存在供應商報價填寫不正確、公式版本不一致的情況，所以用戶希望實現在線報價，上了軟件系統就要有比Excel文件更好的業務信息交互方式

  • 報價分類多種多樣， 每個小分類都包含大量的輸入字段、聯動計算公式、Web頁面繪制的復雜度特別高

  • 軟件產品層面花大力氣開發報價頁面， 具體部署到每家客戶處都會有差異化的要求，定制改動的工作量也特別大

  • 報價單頁面開發很辛苦，做出來還不討好，項目上用不了

在沒有生產采購軟件系統時，用戶習慣于通過郵件的方式傳遞Excel文件報價單，這種方式既落后又低效。為了在搭建這類系統時有效解決上面提到的各類技術難點，并高度還原用戶的使用習慣，需要借助表格技術及其衍生組件（SpreadJS、GcExcel等）的支持。

通過嵌入 SpreadJS 純前端表格控件，企業可有效應對數據填報的各類技術難點，迅速搭建出具備 Excel 填報模式、公式函數、權限控制和數據校驗的在線填報系統，業務人員無需專門培訓，即可上手使用。

借助表格技術實現數據填報系統開發

SpreadJS基于 HTML5，兼容 450 種以上的 Excel 公式，在界面和功能上與 Excel 高度類似，可以用于搭建高度類似Excel 的數據填報系統，如下圖所示：

使用 SpreadJS 的優勢如下：

  • 可參考Excel文件的格式，通過SpreadJS的設計器可視化開發，減少Web頁面開發編碼工作量

  • SpreadJS兼容Excel單元格的計算公式，可以快速復用已有計算邏輯

  • SpreadJS的渲染效果與Excel保持一致，讓用戶從原有工作方式轉為軟件系統更易接受

  • 相比于其它產品，SpreadJS的純前端簡潔架構最易于開發和部署

表格技術對于數據填報系統的細節處理

嵌入 SpreadJS后，不但大幅加快了Web頁面的開發速度，還為填報系統提供了諸多亮點：

  1. 實現了表格動態新增/刪除功能

  2. 新增的行保持了相同的單元格類型、樣式、公式、合并單元格、數據校驗等

  3. 由于一個Sheet頁中常包含多個表格，使用SpreadJS可以在每個表格的數據行位置進行精準的新增和刪除操作

  4. 表格中所有數據行都可以刪除，并且還支持新增行

  5. 當用戶不希望在JavaScript腳本中包含定制的業務單據單元格/公式樣式代碼時，只需在組件右上方增加 “新增行”按鈕，并允許在全部數據行都刪光無法進行鼠標右鍵精確定位時仍可以新增行即可

  1. 實現了填報暫存功能

  2. 通過JS腳本控制SpreadJS組件的數據校驗功能

  3. 將用戶已填寫數據打包為一個JSON數據包，結合當前業務單據的唯一標識ID，存儲在用戶臨時數據空間，下次打開SpreadJS組件時，自動掃描臨時數據空間和業務單據標識ID，加載JSON數據包更新數據

  1. 保留了離線Excel填寫模式

  2. 通過SpreadJS從頁面模版生成Excel文件本身很容易，這樣避免了Excel文件丟失問題，再借助SpreadJS模版中的數據綁定信息，便可快速解析Excel數據并回填頁面

  3. 在SpreadJS設計器中，通過隱藏行頭的信息來設置表格中的列變量名，即可保持與數據綁定一致

  4. 掃描Sheet頁中的表格和單元格，根據數據綁定信息，可自動在Excel中創建對應的“名稱映射”

  5. 通過以上方式，用戶離線填寫完數據，在解析導入Excel時仍然可以正確讀取到該數據，并將數據填回到頁面中

以上便是表格技術對于數據填報項目的細節處理，使用SpreadJS和設計器組件極大降低了復雜填報頁面的開發工作量，遇到的一些細節難題也可通過其所提供的API和技術服務得到迅速解決。

擴展功能：實現Web頁面掃描生成Excel文件功能

當零部件的采購價格確定后，企業就可以進行不同配置產品間的成本差異對比，該對比信息需要提供Web頁面展示方式，也需要提供Excel文件導出功能。具體來說就是把當前頁面的信息導出為Excel文件。

需要解決的技術點：

  • Excel文件希望所見即所得，無需額外的復雜編碼工作

  • 頁面信息豐富， 包含多個不定的表單和表格UI組件

  • 表格UI組件有多種形式，包括普通表格和樹型表格

  • 樹型表格帶有父子層級的收縮展開功能，希望能夠保留到Excel中

  • 列的顯示數據需要支持業務層自定義的渲染 （導出Excel中與頁面中顯示需要有差異，比如圖標等）

  • 海量數據希望能在可控的時間范圍內生成Excel文件 （在產品中有6萬多行超過180萬個單元格的樹型結構）

實現思路：

  • 掃描分析Web UI組件, 分析出繪制SpreadJS中單元格和表格所需的數據信息

  • 動態構造SpreadJS繪制sheet頁， 計算單元格坐標，生成對應Table和Form

  • 掃描分析Web UI組件對應的Data Model， 整理出SpreadJS中的數據模版定義并綁定Sheet中表格和表單

  • 根據實際Data Store和Record中的數據，整理出SpreadJS所需的DataSource，設置數據綁定

  • 對樹型UI組件結構根據父子關系，計算縮進和分組信息 （分組最多7層， Excel自身限制）

  • 優化海量數據準備邏輯， 目前6萬行共計180萬單元格的樹型數據導出時間約為兩分鐘 （Excel文件）

總結：

  • SSJSON本身模版結構清晰，也便于開發人員識別和處理其中的各類對象定義

  • 通過SpreadJS API可以動態定義各種單元格信息和表格信息

  • 基于Excel.IO功能使得前端開發人員可以獨立生成Excel文件

  • 對Web UI組件的熟悉和SpreadJS的強大功能實現了通用的Web頁面掃描儀生成Excel文件功能

擴展功能：實現動態行/列及精準權限控制

在零件樣件生產階段，企業與供應商約定好檢查基準書；后續對零件按照基準書進行檢查并記錄判定是否合格，這里就需要動態行/列及精準權限控制。

需要解決的技術點：

  • 在交樣基準書中可以嵌入任意位置的零件圖紙參考信息

  • 交樣基準書的表格中包含檢查分類和每個分類下的檢查細項， 有子項的分類不能刪除

  • 根據交樣基準書的檢查項需要動態生成檢查報告的行，檢查次數動態生成檢查報告的列，即行列都是動態來生成的

  • 檢測報告中的信息是分別由供應商的人員和廠家的外檢人員來進行填寫的，角色不同，能輸入的單元格不同，并且是交叉式顯示的

  • 最后幾行要根據檢查細項的總體結果來計算得出零件交樣總體是否合格，公式的聯動復雜

實現思路：

  • 整合框架自身的文件存儲功能，實現圖片上傳保存，在頁面數據中記錄圖片文件ID和坐位信息

  • 頁面中有太多動態行、列、分類以及權限控制，僅僅依靠公共組件渲染和配置機制是無法實現的

  • 依賴SpreadJS的API接口， 可以來動態創建行、列、單元格以及設置公式信息

  • 通過SpreadJS提供的Event偵聽接口， 捕獲用戶輸入操作，進行復雜權限判定和輸入檢查

  • 零件檢查基準書功能是通過組件結合許多定制化的JS代碼來實現的

總結：

  • SpreadJS提供了豐富的API和Event事件

  • SpreadJS向我們展示了在極端情況下仍可以通過JavaScript定制化實現復雜業務需求

以上就是葡萄城表格技術在構建數據填報場景的具體應用實踐，通過嵌入 SpreadJS組件，企業可有效應對數據填報的各類技術難點，滿足批量導入導出 Excel、大數據量填報、填報暫存、多 sheet 填報、多級上報等業務需求。點擊此處，了解更多內容。