轉(zhuǎn)帖|使用教程|編輯:莫成敏|2020-04-13 15:50:18.810|閱讀 639 次
概述:SpreadJS 是一款基于 HTML5 的純前端電子表格控件,兼容 450 種以上的 Excel 公式,具有“高性能、跨平臺(tái)、與 Excel 高度兼容”的產(chǎn)品特性。本文介紹了表格綁定如何綁定多層表頭。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>
SpreadJS 是一款基于 HTML5 的純前端電子表格控件,兼容 450 種以上的 Excel 公式,憑借其 “高性能、跨平臺(tái)、與 Excel 高度兼容”的產(chǎn)品特性,備受以華為、招商銀行、蘇寧易購(gòu)、天弘基金等為代表的企業(yè)用戶青睞。在帶來(lái)親切的 Excel 使用體驗(yàn)的同時(shí),滿足 Web Excel 組件開(kāi)發(fā)、數(shù)據(jù)填報(bào)、Excel 類(lèi)報(bào)表設(shè)計(jì)、表格文檔協(xié)同編輯應(yīng)用等業(yè)務(wù)場(chǎng)景,極大降低了企業(yè)研發(fā)成本和項(xiàng)目交付風(fēng)險(xiǎn)。
在日常使用SpreadJS進(jìn)行的開(kāi)發(fā)中,我們經(jīng)常會(huì)用到數(shù)據(jù)綁定的功能,數(shù)據(jù)綁定可以很方便的數(shù)據(jù)源的數(shù)據(jù)展示在指定的綁定區(qū)域中并且?guī)в须p向的綁定可以很方便的進(jìn)行數(shù)據(jù)的獲取與變更。而現(xiàn)實(shí)中會(huì)有很多向下面這樣的多層表頭的表格:
眾所周知Excel的table功能無(wú)法設(shè)置多層的表頭,通過(guò)多層表頭的表格無(wú)法借助table的功能,都是在sheet中繪制多層表格。那么在SpreadJS中該如何給這樣的表格模板做數(shù)據(jù)綁定呢?由于sheet的工作表區(qū)域中(viewport)存在著表頭信息,所以不能使用表單綁定,那么我們眼下只有用表格綁定來(lái)完成了,但是表格table因?yàn)樵贓xcel中無(wú)法設(shè)置多層表頭,所以我們需要使用一些技巧對(duì)模板做一些改造。
首先用設(shè)計(jì)器打開(kāi)這個(gè)Excel模板
接下來(lái),保留表頭,然后刪除需要綁定數(shù)據(jù)的相關(guān)表格,這里我們需要通過(guò)表格綁定重新建立
之后,我們按照上面的表格每一列的內(nèi)容對(duì)應(yīng)插入一個(gè)空白的table
由于最后一行是整體的合計(jì),需要我們將匯總行也設(shè)置出來(lái)
利用匯總行設(shè)置匯總公式
之后利用模板功能,設(shè)置表格綁定,最后兩列為公式計(jì)算結(jié)果所以不設(shè)置綁定項(xiàng)
拖拽右側(cè)的樹(shù)至表格建立綁定關(guān)系(如果需要改變調(diào)整每列的綁定關(guān)系,可以點(diǎn)擊下圖紅框所示的向下箭頭按鈕在其中進(jìn)行調(diào)整)
為了保證樣式的統(tǒng)一,我們清空表格樣式
勾掉標(biāo)題行隱藏標(biāo)題行
然后刪除上方的空白行
這樣表格模板就完成了
之后我們模擬一個(gè)數(shù)據(jù)源進(jìn)行數(shù)據(jù)綁定,數(shù)據(jù)源見(jiàn)附件
接下來(lái)通過(guò)代碼將數(shù)據(jù)源綁定到表格中,data就是附件的數(shù)據(jù)源
var source = GC.Spread.Sheets.Bindings.CellBindingSource(data); sheet.setDataSource(source);
結(jié)果如下:
最后在通過(guò)代碼給后兩列設(shè)置公式,完成最終結(jié)果
本教程內(nèi)容就是這樣了,感興趣的朋友可以關(guān)注我們慧都網(wǎng)了解更多資訊!您可以下載SpreadJS試用版免費(fèi)體驗(yàn)~
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自: