SpreadJS是一個(gè)面向企業(yè)級(jí)應(yīng)用開發(fā)的綜合性、高效能的基于HTML5的純JavaScript的電子表格控件。SpreadJS有著強(qiáng)大的表單處理能力和電子表格功能。這些功能包括跨表單引用和計(jì)算，這樣就能夠充分利用多個(gè)表單上的數(shù)據(jù)和公式。

類似Excel的風(fēng)格外觀和用戶界面行為為最終用戶提供了豐富的、可交互的用戶體驗(yàn)。同時(shí)還具有內(nèi)容廣泛的功能，可以快速方便地建立電子表格文檔或者數(shù)據(jù)庫web應(yīng)用。具有豐富的客戶端JavaScript API，為您提供了所需要的靈活的客戶端編程。本文介紹了如何設(shè)置邊框和網(wǎng)絡(luò)線的教程內(nèi)容~

點(diǎn)擊下載SpreadJS正式版

SpreadJS 2019最新資源合集，匯集了JavaScript電子表格控件SpreadJS最新文章教程、視頻教程、示例資源、歷史版本更新說明等內(nèi)容，等你來體驗(yàn)哦~

設(shè)置邊框和網(wǎng)絡(luò)線

你可以設(shè)置單元格，行和列的邊框和網(wǎng)絡(luò)線。

如果您不需要網(wǎng)絡(luò)線，也可以將網(wǎng)絡(luò)線隱藏。

使用 setBorder 方法來給單元格設(shè)置表格的邊框。

您也可以使用 borderBottom、borderTop、borderRight、或者 borderLeft 來設(shè)置單元格的邊框。如下圖所示：

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

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

網(wǎng)絡(luò)線默認(rèn)處于開啟狀態(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è)置了表格邊框。

JavaScript

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

本教程內(nèi)容到這里就結(jié)束了，大家可以關(guān)注我們了解更多文章資訊~或者下載SpreadJS試用版進(jìn)行評(píng)估~

想要購買SpreadJS正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊