作為一款基于 HTML5 的純前端表格控件，SpreadJS兼容了超過 450 種 Excel 公式、53 項單元格格式、18 種條件格式、32 種圖表，以及182 種形狀，可滿足金融財稅行業杜邦分析、指標補錄、數據鉤稽檢查等多個應用場景需求，在為用戶帶來親切、易用的使用體驗的同時，滿足了 Web Excel組件開發、 表格文檔協同編輯、 數據填報、 類Excel報表設計等業務場景，大幅簡化了金融系統的開發難度。

點擊下載SpreadJS最新試用版

Spread.Sheets 支持 AngularJS.

AngularJS 是一款前端 JavaScript 框架。

使用如下步驟來在 AngularJS 中使用 Spread.Sheets

1. 引入 Spread.Sheets 的 AngularJS 模塊文件： "/scripts/interop/angular.gc.spread.sheets.xxx.js"。
2. 添加 “gcspreadsheets” 模塊。比如，如果你應用的 scope 被 "ng-app" 屬性定為  "myApp"，您可以在代碼中添加以下代碼：
   angular.module("myApp", ["gcspreadsheets", "module2","module3",...])

3. 在 HTML 中添加 “gc-spread-sheets” 標簽，并添加工作表和列。你可以設置 spread，sheet 或者 column。例如：

   HTML

   <gc-spread-sheets id="ss" style="width:100%;height:500px;border:1px solid gray">     <worksheets>         <worksheet frozen-column-count="1">         </worksheet >     </worksheets> </gc-spread-sheets>

Spread, Sheet, 和 Column 是最基本的元素。其他元素都需要通過設置它們來工作。

標簽樹狀結構為：

如果元素的設置是一個簡單類型或者它可以通過簡單的字符串來設置，該設置將會被暴露為一個元素的 attribute。

簡單類型可以是 number，string，Boolean，枚舉，字體，邊框等。如下代碼所示：

如果元素的設置是一個對象類型并且它不能使用簡單的字符串來設置，該設置將暴露為子元素。子元素也可能會有其他的子元素，如下代碼所示：

以下文章例舉了所有元素的指令（directives）：

• 使用 Gc-spread-sheets 標簽

• 使用 Sheet 標簽

• 使用 Column, Columns, 和 Group 標簽

• 使用 Style 標簽
• 使用 Cell 標簽
• 使用 Validator 標簽      

以下屬性名是不區分大小寫的，并支持使用 “-” 來分隔每一個單詞。比如以下代碼是等價的：

<column dataField="country"></column>
< column datafield="country"></column>
< column DATAFIELD="country"&gt;</column>
< column data-field="country"></column>
< column Data-Field="country"></column>

以下代碼支持使用  "{{binding}}" 來綁定 scope 上的數據。比如，以下代碼將列寬綁定到了 columnWidth 變量中：

<column width={{columnWidth}} >

以下代碼將 columnWidth 變量綁定到了 input 元素中。

Column Width:&nbsp;<input ng-model="columnWidth"  />

Spread.Sheet 的列寬將會隨著 input 框中的值變化而變化。

如果沒有按照 spread 的說明來設置屬性和指令，spread 將無法正常工作，綁定的值可能會出錯。

今天的內容就到這了，如果您想搭建一款在功能和操作體驗上均與 Excel 高度類似的金融信息化系統，實現導入 Excel 自定義報表、指標補錄、公式函數等需求，歡迎咨詢慧都客服！我們有諸多成功案例和應用場景，可以為您提供幫助。不要忘了在評論區留下的意見和建議！現電子表格控件SpreadJS正版授權限時優惠！低至3490；企業版最高立減6000元。點擊了解更多優惠！