SpreadJS 是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受以華為、蘇寧易購、天弘基金等為代表的企業用戶青睞。SpreadJS 為用戶帶來親切的 Excel 使用體驗的同時，滿足 Web Excel 組件開發、表格文檔協同編輯、數據填報、Excel 類報表設計等業務場景，極大降低了企業研發成本和項目交付風險。

下載最新版SpreadJS

SpreadJS 支持 AngularJS.

AngularJS 是一款前端 JavaScript 框架。

使用如下步驟來在 AngularJS 中使用 SpreadJS。

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。例如：

<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 是最基本的元素。其他元素都需要通過設置它們來工作。 標簽樹狀結構為：

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

如果元素的設置是一個簡單類型或者它可以通過簡單的字符串來設置，該設置將會被暴露為一個元素的 attribute。 簡單類型可以是 number，string，Boolean，枚舉，字體，邊框等。如下代碼所示：

<gc-spread-sheets style="width:100%;height:500px;border:1px solid gray">
<worksheets>
    <worksheet>
        <default-style backcolor="#c6e0b4" font="large Meiryo" border="#8ea9db dashed"></default-style>
        </worksheet>
    </worksheets>
</gc-spread-sheets>

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

<gc-spread-sheets style="width:100%;height:500px;border:1px solid gray">
<worksheets>
    <worksheet>
        <columns>
            <column width="100">
               <default-style formatter="#,##0.00">
                    <number-validator comparisonoperator="GreaterThan" value1="0"></number-validator>
                   </default-style>                 
                </column>
            </columns>
        </worksheet>
    </worksheets>
</gc-spread-sheets>

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

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

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

<column width={{columnWidth}} >

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

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

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

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

本文轉載自：

立即下載最新版純前端表格控件SpreadJS體驗吧！