下面我们来介绍 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 的绑定机制有关，需要特别注意。
本文转自 powertoolsteam 51CTO博客，原文链接：http://blog.51cto.com/powertoolsteam/1943038，如需转载请自行联系原作者
