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

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

點擊下載SpreadJS正式版

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

設置邊框和網絡線

你可以設置單元格，行和列的邊框和網絡線。

如果您不需要網絡線，也可以將網絡線隱藏。

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

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

您可以使用 options.gridline 屬性設置表格的豎直網絡線和水平網絡線。

options.gridline 屬性可以用來設置水平網絡線和豎直網絡線。

網絡線默認處于開啟狀態，默認顏色為  #d0d7e5。

參考代碼

以下代碼設置了網絡線的顯示方式，并且將網絡線的顏色設置為 #FF2235。

JavaScript

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

參考代碼

以下代碼設置了表格邊框。

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

本教程內容到這里就結束了，大家可以關注我們了解更多文章資訊~或者下載SpreadJS試用版進行評估~

想要購買SpreadJS正版授權，或了解更多產品信息請點擊