使用电子表格控件SpreadJS定制外观（一）：如何设置边框和 格线

SpreadJS最新试用版

在spreadjs中你可以设置单元格，行和列的边框和 络线。如果你不需要 络线，也可以将 络线隐藏。使用setBorder 方法来给单元格设置表格的边框。你也可以使borderBottom,borderTopborderRight或者borderLeft来设置单元格的边框。

如下图所示：

你可以使用options.gridline 属性设置表格的竖直 络线和水平 络线。

options.gridline 属性可以用来设置水平 络线和竖直 络线。

络线默认处于开启状态，默认颜色为#d0d7e5。

参考代码

以下代码设置了 络线的显示方式，并且将 络线的颜色设置为 #FF2235。

JavaScript

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

参考代码

以下代码设置了表格边框。

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

如果你对我们的产品感兴趣或者有任何疑问，欢迎咨询在线客服>>