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

下載最新版SpreadJS

SpreadJS 支持 AngularJS.

AngularJS 是一款前端 JavaScript 框架。

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

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

   angular.module("myApp", ["gcspreadsheets", "module2","module3",...])

3. 在 HTML 中添加 “gc-spread-sheets” 標(biāo)簽，并添加表單和列。你可以設(shè)置 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 是最基本的元素。其他元素都需要通過設(shè)置它們來工作。 標(biāo)簽樹狀結(jié)構(gòu)為：

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

如果元素的設(shè)置是一個簡單類型或者它可以通過簡單的字符串來設(shè)置，該設(shè)置將會被暴露為一個元素的 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>

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

<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>

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

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

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

<column width={{columnWidth}} >

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

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

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

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

本文轉(zhuǎn)載自：

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