接上篇文章的内容，当我们搭建起来了一个Angular2集成SpreadJS的demo之后，我们肯定会想知道SpreadJS在Angular2中支持绑定哪些属性 。
上期我们看完了模板的详细说明，这期我们再来看一下模板究竟能绑定哪些属性，不同的标签可以绑定的属性不同，下面按照标签来分类进行介绍。
标红的参数为常用参数
gc-spread-sheets：
|
Attribute |
Type |
Comment |
|
name |
string |
整个工作簿的名称，导出时Excel的默认名称 |
|
allowUserZoom |
boolean |
是否允许用户进行缩放， 该缩放控制SpreadJS自身的设置， 无法控制浏览器自身的缩放属性， 所以如果设置禁用缩放， 还需将浏览器本身的缩放设置同事禁用才能达到效果。 |
|
allowUserResize |
boolean |
是否允许用户调整列宽，行高 |
|
tabStripVisible |
boolean |
是否展示左下方sheet的导航栏 |
|
tabEditable |
boolean |
是否允许用户在左下角的导航栏中更改sheet的名称 |
|
newTabVisible |
boolean |
是否允许用户添加sheet， 禁用时左下角的导航栏将不显示添加按钮 |
|
allowUserEditFormula |
boolean |
是否允许用户编辑公式 |
|
autoFitType |
GC.Spread.Sheets. AutoFitType |
单元格是否自适应， 类型为GC.Spread.Sheets.AutoFitType。 GC.Spread.Sheets.AutoFitType有两个属性 GC.Spread.Sheets.AutoFitType.cellWithHeader （自适应根据单元格与行头列头区域） 与GC.Spread.Sheets.AutoFitType.cell （仅根据单元格进行自适应） |
|
allowUserDragFill |
boolean |
是否允许用户进行拖拽填充 |
|
allowUserDragDrop |
boolean |
是否允许用户拖拽移动单元格 |
|
highlightInvalidData |
boolean |
是否在数据验证时高亮显示无效数据 （设置高亮显示后，无效数据会用红圈圈出） |
|
referenceStyle |
GC.Spread.Sheets. ReferenceStyle |
设置单元格公式的引用样式（a1,r1c1）, 分别为GC.Spread.Sheets.ReferenceStyle.a1, GC.Spread.Sheets.ReferenceStyle.r1c1; |
|
backColor |
string |
设置背景色 |
|
grayAreaBackColor |
string |
设置表单灰色区域的背景色 |
|
backgroundImage |
string |
设置背景图片 |
|
backgroundImageLayout |
GC.Spread.Sheets. ImageLayout |
设置背景图片的布局。
GC.Spread.Sheets.ImageLayout.stretch： 改变图像尺寸使其充满整个区域,无视实际的长宽比。 GC.Spread.Sheets.ImageLayout.center： 图片将显示在区域的正中央。 GC.Spread.Sheets.ImageLayout.zoom： 改变图像的尺寸使其适合控件尺寸,图片实际的长宽比不变。 GC.Spread.Sheets.ImageLayout.none： 在显示区域中使用图像实际的尺寸显示该图像,没有任何尺寸变化。 |
|
showVerticalScrollbar |
boolean |
是否显示垂直滚动条 |
|
showHorizontalScrollbar |
boolean |
是否显示水平滚动条 |
|
showScrollTip |
GC.Spread.Sheets. ShowScrollTip |
显示滚动条的tooltips（滚动时显示行数或列数）。 GC.Spread.Sheets.ShowScrollTip.both： 水平垂直滚动条都显示tooltips。 GC.Spread.Sheets.ShowScrollTip.horizontal： 只显示水平滚动条的tooltips。 GC.Spread.Sheets.ShowScrollTip.vertical： 只显示垂直滚动条的tooltips。 GC.Spread.Sheets.ShowScrollTip.none： 不显示tootips。 |
|
showResizeTip |
GC.Spread.Sheets. ShowResizeTip |
改变行宽列高时提供的tooltips提示。 GC.Spread.Sheets.ShowResizeTip.both： 行高和列宽改变是均显示tooltips。 GC.Spread.Sheets.ShowResizeTip.horizontal： 只在列宽改变时显示tooltips。 GC.Spread.Sheets.ShowResizeTip.vertical： 只在行高改变时显示tooltips。 GC.Spread.Sheets.ShowResizeTip.none： 不显示tootips。 |
|
showDragDropTip |
boolean |
是否在拖拽移动时显示tooltips |
|
showDragFillTip |
boolean |
是否在拖拽填充时显示tooltips |
|
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 |
|
allowCellOverflow |
boolean |
是否允许单元格浮动 |
|
frozenlineColor |
string |
冻结线的颜色 |
|
sheetTabColor |
string |
更改sheet标签的背景颜色。 |
|
rowCount |
number |
设置行数 |
|
colCount |
number |
设置列数 |
|
selectionPolicy |
GC.Spread.Sheets. SelectionPolicy |
设置选择的模式， 参数为GC.Spread.Sheets.SelectionPolicy的枚举 有以下几种： GC.Spread.Sheets.SelectionPolicy.multiRange (支持单选，一片区域，多个区域的选择) GC.Spread.Sheets.SelectionPolicy.range (支持单选，一片区域的选择但不支持多个区域的选择) GC.Spread.Sheets.SelectionPolicy.single (只允许单选) |
|
selectionUnit |
GC.Spread.Sheets. SelectionUnit |
设置选择的单位， 参数为GC.Spread.Sheets.SelectionUnit的枚举， 有以下几种： GC.Spread.Sheets.SelectionUnit.cell (点击选中的是单元格) GC.Spread.Sheets.SelectionUnit.row (点击选中的是行) GC.Spread.Sheets.SelectionUnit.column (点击选中的是列) |
|
zoom |
number |
缩放功能 |
|
currentTheme |
string |
设置该sheet的主题 |
|
clipBoardOptions |
GC.Spread.Sheets. ClipboardPasteOptions |
粘贴剪贴板内容的操作， GC.Spread.Sheets.ClipboardPasteOptions.all (粘贴全部) GC.Spread.Sheets.ClipboardPasteOptions .formatting(仅粘贴格式) GC.Spread.Sheets.ClipboardPasteOptions .formulas(仅粘贴公式) GC.Spread.Sheets.ClipboardPasteOptions .value(仅粘贴数值) |
|
rowHeaderVisible |
boolean |
是否显示rowHeader |
|
columnHeaderVisible |
boolean |
是否显示columnHeader |
|
rowHeaderAutoText |
GC.Spread.Sheets. HeaderAutoText |
设置行标的显示模式，参数为
GC.Spread.Sheets.HeaderAutoText的枚举： GC.Spread.Sheets.HeaderAutoText.blank(空白) GC.Spread.Sheets.HeaderAutoText.letters(字母) GC.Spread.Sheets.HeaderAutoText.numbers(数字) |
|
columnHeaderAutoText |
GC.Spread.Sheets. HeaderAutoText |
设置列标的显示模式，参数同rowHeaderAutoText |
|
rowHeaderAutoTextIndex |
number |
在指定列显示行标（因为行头可能会有多列） |
|
columnHeaderAutoTextIndex |
number |
在指定行显示列标（因为列头可能会有多行） |
|
isProtected |
boolean |
设置表单保护 |
|
showRowOutline |
boolean |
是否显示行的分级显示（分组情况下使用） |
|
showColumnOutline |
boolean |
是否显示列的分级显示（分组情况下使用） |
|
selectionBackColor |
string |
设置选中区域的背景色 |
|
selectionBorderColor |
string |
设置选中区域的边框颜色 |
|
defaultStyle |
GC.Spread.Sheets.Style |
设置默认样式， 参数为GC.Spread.Sheets.Style的实例。 |
|
rowOutlineInfo |
any [ ] |
设置行分组信息，例如 [{index: 1, count: 10}] |
|
columnOutlineInfo |
any [ ] |
设置列分组信息，例如 [{index: 1, count: 10}] |
gc-column ：
|
Attribute |
type |
Comment |
|
dataField |
string |
设置绑定数据到指定列的名称，等同于spreadjs中的Worksheet.bindColumn(index, columnInfo) 方法，Angular2中因为是在指定gc-column(列)上设置绑定,所以仅需要设置name，不需要设置index。 |
|
headerText |
string |
设置绑定数据到指定列的展示名称，等同于spreadjs中的Worksheet.bindColumn(index, columnInfo)方法，Angular2中因为是在指定gc-column(列)上设置绑定,所以仅需要设置displayName，不需要设置index。 |
|
width |
number |
列宽 |
|
visible |
boolean |
显示/隐藏列 |
|
resizable |
boolean |
是否根据拖拽重设大小 |
|
autoFit |
boolean |
是否自动匹配列宽 |
|
style |
GC.Spread.Sheets.Style |
整列设置样式 |
|
headerStyle |
GC.Spread.Sheets.Style |
给列头设置样式 |
|
cellType |
GC.Spread.Sheets.CellTypes.Base |
整列设置单元格类型 |
|
formatter |
string |
整列设置单元格格式 |
以上就是所支持的属性，再次强调在Angular2中SpreadJS最大精度只能进行到列级别的设置，这与Angular2的绑定机制有关，需要特别注意。
如果要设置单元格的属性和方法，还是需要通过普通JS的方式来实现。例如：我们下一期会提到一个叫做workbookInitialized的事件，在这个事件在workbook初始化完成后自动触发，在这个事件中我们可以获取到spread对象，那么我们就可以通过spread对象按照通常的方式获得sheet对象继而获得cell对象然后对其进行操作，来完成单元格级别的设置。
下一期我们会带来Angular2中SpreadJS支持的绑定事件。
这里附上本系列博客的全部链接地址：
