如何在AngularJS中使用SpreadJS？

SpreadJS 是一款基于 HTML5 的纯前端电子表格控件，兼容 450 种以上的 Excel 公式，凭借其 “高性能、跨平台、与 Excel 高度兼容”的产品特性，备受以华为、苏宁易购、天弘基金等为代表的企业用户青睐。SpreadJS 为用户带来亲切的 Excel 使用体验的同时，满足 Web Excel 组件开发、表格文档协同编辑、数据填报、Excel 类报表设计等业务场景，极大降低了企业研发成本和项目交付风险。

下载最新版SpreadJS

SpreadJS 支持 AngularJS.

AngularJS 是一款前端 JavaScript 框架。

使用如下步骤来在 AngularJS 中使用 SpreadJS。

引入 Spread.Sheets 的 AngularJS 模块文件： "/scripts/interop/angular.gc.spread.sheets.xxx.js"。
添加 “gcspreadsheets” 模块。比如，如果你应用的 scope 被 "ng-app" 属性定为 "myApp"，您可以在代码中添加以下代码：
```
angular.module("myApp", ["gcspreadsheets", "module2","module3",...])
```
在 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 将无法正常工作，绑定的值可能会出错。

本文转载自：grapecity

立即下载最新版纯前端表格控件SpreadJS体验吧！

如何在AngularJS中使用SpreadJS？

猜你喜欢