手把手教你用Angular2集成在线Excel表格控件SpreadJS(二)

接上篇文章的内容，当我们搭建起来了一个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的枚举，有以下几种： 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支持的绑定事件。

这里附上本系列博客的全部链接地址：

手把手教你用Angular2集成在线Excel表格控件SpreadJS

手把手教你用Angular2集成在线Excel表格控件SpreadJS（三）