纯前端表格控件SpreadJS使用教程：如何设置边框和 络线

SpreadJS是一个面向企业级应用开发的综合性、高效能的基于HTML5的纯JavaScript的电子表格控件。SpreadJS有着强大的表单处理能力和电子表格功能。这些功能包括跨表单引用和计算，这样就能够充分利用多个表单上的数据和公式。

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正版授权，或了解更多产品信息请点击“咨询在线客服”

标签：