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

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

转帖|使用教程|编辑：鲍佳佳|2020-07-17 09:39:58.650|阅读 386 次

概述：本文主要讲述给表格设置边框和颜色的几种方法，例如使用setBorder 方法来给单元格设置表格的边框。也可以使borderBottom,borderTopborderRight或者borderLeft来设置单元格的边框。附代码实现。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接：

SpreadJS 是一款基于HTML5的纯前端电子表格控件，兼容 450 种以上的 Excel 公式，凭借其 “高性能、跨平台、与 Excel 高度兼容”的产品特性，备受以华为、苏宁易购、天弘基金等为代表的企业用户青睐。SpreadJS 为用户带来亲切的 Excel 使用体验的同时，满足 Web Excel 组件开发、表格文档协同编辑、数据填报、Excel 类报表设计等业务场景，极大降低了企业研发成本和项目交付风险。

点击下载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));