如何在 AngularJS 中使用 SpreadJS，实现前端表格开发

SpreadJS是一款基于 HTML5 的原生JavaScript组件，兼容 450 种以上的 Excel 公式，提供高度类似 Excel 的功能，主要用于开发 Web Excel 组件，实现多人协同编辑、高性能模板设计和数据填报等功能模块，组件架构符合UMD规范，可以以原生的方式嵌入各类应用，并与前后端技术框架相结合。

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 将无法正常工作，绑定的值可能会出错。