SpreadJS v13.2正式版下載

SpreadJS ，作為一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，可為用戶帶來親切的 Excel 使用體驗，并可滿足企業(yè)IT部門 Web Excel 組件開發(fā)、數(shù)據(jù)填報、Excel 類報表設計、表格文檔協(xié)同編輯等業(yè)務場景。

在日常使用SpreadJS開發(fā)的過程中，我們經常會使用其數(shù)據(jù)綁定功能，SpreadJS 的數(shù)據(jù)綁定提供雙向綁定模式。借助SpreadJS數(shù)據(jù)綁定，可以很方便的將源數(shù)據(jù)展示在指定的區(qū)域內，以實現(xiàn)數(shù)據(jù)的獲取與變更。

本文將就“多層表頭數(shù)據(jù)綁定”的難度與實現(xiàn)方式做以闡述，希望給大家提供參考：

巧用 SpreadJS 給多層表頭綁定數(shù)據(jù)

眾所周知，由于中美文化的差異，Excel的table功能難以實現(xiàn)多層表頭，大家都是在sheet中繪制多層表格來達到相似的效果。

那么，在SpreadJS中該如何給這樣的表格模板做數(shù)據(jù)綁定呢？

由于sheet的工作表區(qū)域中（viewport）存在表頭信息，所以不能使用表單綁定。因此，我們只能通過表格綁定來完成，但是表格table無法在Excel中設置多層表頭，所以我們需要借助 SpreadJS 提供的技巧，對模板進行改造。

1. 用 SpreadJS設計器打開這個Excel模板。

2. 保留表頭，刪除需要綁定數(shù)據(jù)的相關表格，這里我們需要通過表格綁定重新建立。

3. 按照上面表格每一列的內容，對應插入一個空白的table。

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

5. 利用匯總行設置匯總公式。

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

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

8. 為了保證樣式的統(tǒng)一，我們清空表格樣式。

9. 勾掉標題行：實現(xiàn)隱藏標題行。

10. 刪除上方的空白行

這樣，一個改造過的表格模板就完成了。下面，我們開始實現(xiàn)多表頭數(shù)據(jù)綁定。首先，通過代碼將數(shù)據(jù)源綁定到表格中，data就是附件的數(shù)據(jù)源：

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

運行結果如下：

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

總結

以上，就是SpreadJS實現(xiàn)多表頭數(shù)據(jù)綁定的全部步驟，其實通過SpreadJS 實現(xiàn)數(shù)據(jù)綁定的方式非常簡單，重點在于對 Excel模板的改造過程。

借助SpreadJS 的內置形狀、基于單元格級別的數(shù)據(jù)綁定方式和450 多種公式支持，您可以很輕易的將Excel模板改造成所需的樣式，并“一絲不變”的導入Excel中。

SpreadJS | 下載試用

，可滿足 .NET、Java、App 等應用程序中的 Web Excel 組件開發(fā)、數(shù)據(jù)填報、在線文檔、圖表公式聯(lián)動、類 Excel UI 設計等業(yè)務場景，并在數(shù)據(jù)可視化、Excel 導入導出、公式引用、數(shù)據(jù)綁定、框架集成中無需大量代碼開發(fā)和測試，極大降低了企業(yè)研發(fā)成本和項目交付風險。

本文轉載自

購正版SpreadJS授權限時優(yōu)惠！最高立減萬元！點擊了解更多優(yōu)惠