SpreadJS v13.2正式版下載

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

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

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

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

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

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

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

1. 用 SpreadJS設(shè)計器打開這個Excel模板。

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

3. 按照上面表格每一列的內(nèi)容，對應(yīng)插入一個空白的table。

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

5. 利用匯總行設(shè)置匯總公式。

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

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

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);

運行結(jié)果如下：

通過代碼給后兩列設(shè)置公式，完成最終結(jié)果：

總結(jié)

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

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

SpreadJS | 下載試用

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

本文轉(zhuǎn)載自

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