永利最大(官方)网站

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正版授权，或了解更多产品信息请点击