SpreadJS 在 Angular2 中支援綁定哪些屬性？

標籤：angular2   spreadjs   

650) this.width=650;" src="http://images2015.cnblogs.com/blog/978677/201706/978677-20170629113839274-436991559.png" width="665" height="369" />

SpreadJS 純前端表格控制項是基於 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 官網，瞭解更多。

本文出自 “葡萄城控制項技術團隊部落格” 部落格，謝絕轉載！

SpreadJS 在 Angular2 中支援綁定哪些屬性？