SpreadJS 是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受以華為、招商銀行、蘇寧易購、天弘基金等為代表的企業用戶青睞。在帶來親切的 Excel 使用體驗的同時，滿足 Web Excel 組件開發、數據填報、Excel 類報表設計、表格文檔協同編輯應用等業務場景，極大降低了企業研發成本和項目交付風險。

點擊下載SpreadJS正式版

在日常使用SpreadJS進行的開發中，我們經常會用到數據綁定的功能，數據綁定可以很方便的數據源的數據展示在指定的綁定區域中并且帶有雙向的綁定可以很方便的進行數據的獲取與變更。而現實中會有很多向下面這樣的多層表頭的表格：

眾所周知Excel的table功能無法設置多層的表頭，通過多層表頭的表格無法借助table的功能，都是在sheet中繪制多層表格。那么在SpreadJS中該如何給這樣的表格模板做數據綁定呢？由于sheet的工作表區域中(viewport)存在著表頭信息，所以不能使用表單綁定，那么我們眼下只有用表格綁定來完成了，但是表格table因為在Excel中無法設置多層表頭，所以我們需要使用一些技巧對模板做一些改造。

首先用設計器打開這個Excel模板

接下來，保留表頭，然后刪除需要綁定數據的相關表格，這里我們需要通過表格綁定重新建立

之后，我們按照上面的表格每一列的內容對應插入一個空白的table

由于最后一行是整體的合計，需要我們將匯總行也設置出來

利用匯總行設置匯總公式

之后利用模板功能，設置表格綁定，最后兩列為公式計算結果所以不設置綁定項

拖拽右側的樹至表格建立綁定關系(如果需要改變調整每列的綁定關系，可以點擊下圖紅框所示的向下箭頭按鈕在其中進行調整)

為了保證樣式的統一，我們清空表格樣式

勾掉標題行隱藏標題行

然后刪除上方的空白行

這樣表格模板就完成了

之后我們模擬一個數據源進行數據綁定,數據源見附件

接下來通過代碼將數據源綁定到表格中，data就是附件的數據源

var source = GC.Spread.Sheets.Bindings.CellBindingSource(data);
sheet.setDataSource(source);

結果如下：

最后在通過代碼給后兩列設置公式，完成最終結果

本教程內容就是這樣了，感興趣的朋友可以關注我們慧都網了解更多資訊！您可以下載SpreadJS試用版免費體驗~