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

原创|使用教程|编辑:莫成敏|2019-11-08 13:28:26.407|阅读 32 次

概述:SpreadJS是面向企业级应用开发、基于HTML5的纯JavaScript电子表格控件。本文介绍了SpreadJS使用教程:如何设置边框和网络线。

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

类似Excel的风格外观和用户界面行为为最终用户提供了丰富的、可交互的用户体验。同时还具有内容广泛的功能,可以快速方便地建立电子表格文档或者数据库web应用。具有丰富的客户端JavaScript API,为您提供了所需要的灵活的客户端编程。本文介绍了如何设置边框和网络线的教程内容~

点击下载SpreadJS正式版

SpreadJS 2019最新资源合集,汇集了JavaScript电子表格控件SpreadJS最新文章教程、视频教程、示例资源、历史版本更新说明等内容,等你来体验哦~


设置边框和网络线

你可以设置单元格,行和列的边框和网络线。

如果您不需要网络线,也可以将网络线隐藏。

使用 setBorder 方法来给单元格设置表格的边框。

您也可以使用 borderBottom、borderTop、borderRight、或者 borderLeft 来设置单元格的边框。如下图所示:

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

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

850×682.png



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:GrapeCity https://help.grapecity.com.cn/pages/viewpage.action?pageId=5971545

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
SpreadJS

面向企业级应用开发、基于HTML5的纯JavaScript电子表格控件。

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat