SpreadJS 是一款基于HTML5的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺(tái)、與 Excel 高度兼容”的產(chǎn)品特性，備受以華為、蘇寧易購(gòu)、天弘基金等為代表的企業(yè)用戶青睞。SpreadJS 為用戶帶來(lái)親切的 Excel 使用體驗(yàn)的同時(shí)，滿足 Web Excel 組件開(kāi)發(fā)、表格文檔協(xié)同編輯、數(shù)據(jù)填報(bào)、Excel 類(lèi)報(bào)表設(shè)計(jì)等業(yè)務(wù)場(chǎng)景，極大降低了企業(yè)研發(fā)成本和項(xiàng)目交付風(fēng)險(xiǎn)。

點(diǎn)擊下載SpreadJS最新試用版

在spreadjs中你可以設(shè)置單元格，行和列的邊框和網(wǎng)絡(luò)線。如果你不需要網(wǎng)絡(luò)線，也可以將網(wǎng)絡(luò)線隱藏。使用setBorder 方法來(lái)給單元格設(shè)置表格的邊框。你也可以使borderBottom,borderTopborderRight或者borderLeft來(lái)設(shè)置單元格的邊框。

如下圖所示：

你可以使用options.gridline 屬性設(shè)置表格的豎直網(wǎng)絡(luò)線和水平網(wǎng)絡(luò)線。

options.gridline 屬性可以用來(lái)設(shè)置水平網(wǎng)絡(luò)線和豎直網(wǎng)絡(luò)線。

網(wǎng)絡(luò)線默認(rèn)處于開(kāi)啟狀態(tài)，默認(rèn)顏色為#d0d7e5。

參考代碼

以下代碼設(shè)置了網(wǎng)絡(luò)線的顯示方式，并且將網(wǎng)絡(luò)線的顏色設(shè)置為 #FF2235。

JavaScript

worksheet.options.gridline = {color:"#FF2235", showVerticalGridline: true, showHorizontalGridline: false};

參考代碼

以下代碼設(shè)置了表格邊框。

activeSheet.getRange(2, 2, 2, 2, GC.Spread.Sheets.SheetArea.viewport).setBorder(new GC.Spread.Sheets.LineBorder("#8A2BE2", GC.Spread.Sheets.LineStyle.medium), {all:true},3);
activeSheet.getRange(-1,5, -1, 1).borderTop(new GC.Spread.Sheets.LineBorder("#F0FFFF",GC.Spread.Sheets.LineStyle.medium));
activeSheet.getRange(-1, 5, -1, 1).borderLeft(new GC.Spread.Sheets.LineBorder("#F5F5DC",GC.Spread.Sheets.LineStyle.medium));
activeSheet.getRange(-1, 5, -1, 1).borderRight(new GC.Spread.Sheets.LineBorder("#FF02FF", GC.Spread.Sheets.LineStyle.dashDot));
activeSheet.getRange(-1, 5, -1, 1).borderBottom(new GC.Spread.Sheets.LineBorder("#FFE4C4",GC.Spread.Sheets.LineStyle.thin));
activeSheet.getRange(5, -1, 1, -1).borderTop(new GC.Spread.Sheets.LineBorder("#A52A2A",GC.Spread.Sheets.LineStyle.mediumDashed));
activeSheet.getRange(5, -1, 1, -1).borderLeft(new GC.Spread.Sheets.LineBorder("#FF02FF",GC.Spread.Sheets.LineStyle.medium));
activeSheet.getRange(5, -1, 1, -1).borderRight(new GC.Spread.Sheets.LineBorder("#5F9EA0", GC.Spread.Sheets.LineStyle.dashDot));
activeSheet.getRange(5, -1, 1, -1).borderBottom(new GC.Spread.Sheets.LineBorder("#6495ED",GC.Spread.Sheets.LineStyle.dotted));