純前端表格控制元件是基於 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 的繫結機制有關，需要特別注意。

SpreadJS V10.2 版本即將釋出，更多更好的功能盡在新版本中，敬請期待！

登入，瞭解更多。

SpreadJS 在 Angular2 中支援繫結哪些屬性？

相關文章