SpreadJS v13.2正式版下載

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

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

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

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

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

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

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

1. 用 SpreadJS設(shè)計(jì)器打開(kāi)這個(gè)Excel模板。

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

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

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

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

6. 利用模板功能，設(shè)置表格綁定，因?yàn)樽詈髢闪袨楣接?jì)算結(jié)果所以不設(shè)置綁定項(xiàng)。

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

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

9. 勾掉標(biāo)題行：實(shí)現(xiàn)隱藏標(biāo)題行。

10. 刪除上方的空白行

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

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

運(yùn)行結(jié)果如下：

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

總結(jié)

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

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

SpreadJS | 下載試用

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

本文轉(zhuǎn)載自

購(gòu)正版SpreadJS授權(quán)限時(shí)優(yōu)惠！最高立減萬(wàn)元！點(diǎn)擊了解更多優(yōu)惠