← 返回所有博客文章

接上篇文章的内容,当我们搭建起来了一个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(三)