SpreadJS 在 Angular2 中支持绑定哪些属性？

2021-07-09 03:07

阅读：391

标签：angular2 spreadjs

技术分享

SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件，提供了完备的公式引擎、排序、过滤、输入控件、数据可视化、Excel 导入/导出等功能，适用于 .NET、Java 和移动端等各平台在线编辑类 Excel 功能的表格程序开发。

在上一篇文章中，我们了解到 SpreadJS 已经全面支持了 Angular2，并且只需4步就能完成在 Angular2 中集成 SpreadJS。

下面我们来介绍 SpreadJS 在 Angular2 中支持绑定哪些属性。不同的标签可以绑定的属性不同，我们按照标签来分类进行介绍。以下为主要属性的列表，更详细的属性介绍请点击此处查看。

gc-spread-sheets：

Attribute	Type	Comment
name	string	整个工作簿的名称，导出时Excel的默认名称
tabStripVisible	boolean	是否展示左下方sheet的导航栏
allowUserDragFill	boolean	是否允许用户进行拖拽填充
highlightInvalidData	boolean	是否在数据验证时高亮显示无效数据（设置高亮显示后，无效数据会用红圈圈出）
backColor	string	设置背景色
backgroundImage	string	设置背景图片
hostStyle	any	标签的样式，等同于HTML的style属性，使用方法等同于angular2的样式绑定，例如：{width: 400px, height: 600px}
hostClass	string	标签的类，等同于HTML的class属性。

gc-worksheet：

Attribute	type	Comment
dataSource	any	表单级别的绑定，设置数据源。
name	string	设置sheet的名称
frozenColumnCount	number	顶部冻结列，参数为colindex
frozenRowCount	number	顶部冻结行，参数为rowindex
frozenTrailingColumnCount	number	底部冻结列，参数为colcount-colindex，例如冻结最后两行，参数为2.
frozenTrailingRowCount	number	底部冻结行，参数为rowcount-rowindex
rowCount	number	设置行数
colCount	number	设置列数
rowHeaderVisible	boolean	是否显示rowHeader
columnHeaderVisible	boolean	是否显示columnHeader
isProtected	boolean	设置表单保护
selectionBackColor	string	设置选中区域的背景色
selectionBorderColor	string	设置选中区域的边框颜色
defaultStyle	GC.Spread.Sheets.Style	设置默认样式，参数为GC.Spread.Sheets.Style的实例。

gc-column ：

Attribute	type	Comment
width	number	列宽
resizable	boolean	是否根据拖拽重设大小
autoFit	boolean	是否自动匹配列宽
style	GC.Spread.Sheets.Style	整列设置样式
cellType	GC.Spread.Sheets.CellTypes.Base	整列设置单元格类型
formatter	string	整列设置单元格格式

以上就是所支持的属性，需要说明的是在 Angular2 中 SpreadJS 最大精度只能进行到列级别的设置，这与 Angular2 的绑定机制有关，需要特别注意。