如何在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？相关推荐

如何在AngularJS中使用ng-repeat迭代键和值？
本文翻译自:How to iterate over the keys and values with ng-repeat in AngularJS? In my controller, I have ...
数据绑定如何在AngularJS中运行？
本文翻译自:How does data binding work in AngularJS? How does data binding work in the AngularJS framework ...
前端必读：如何在 JavaScript 中使用SpreadJS导入和导出 Excel 文件
JavaScript在前端领域占据着绝对的统治地位,目前更是从浏览器到服务端,移动端,嵌入式,几乎所有的所有的应用领域都可以使用它.技术圈有一句很经典的话"凡是能用JavaScript实现的 ...
前端必读2.0：如何在React 中使用SpreadJS导入和导出 Excel 文件
1.前言相比大家看到useImperativeHandle会感到十分陌生,但部分开源代码经常会出现它的身影,网上查阅的资料也是含糊不清.经过一翻资料查询,终于摸清了一点,现在分享给各位爷. 2.us ...
如何在AngularJS的ng-options中设置value属性？
本文翻译自:How do I set the value property in AngularJS' ng-options? Here is what seems to be bothering a ...
如果我有jQuery背景，那么“ AngularJS中的思考”吗？ [关闭]
已关闭 . 这个问题需要更加集中 . 它当前不接受答案. 想改善这个问题吗? 更新问题,使其仅通过编辑此帖子来关注一个问题. 4年前关闭. 已锁定 . 该问题及其答案被锁定,因为该问题是题外话,但具有 ...
如何在ngRepeat中使用Bootstrap Span元素
目录介绍在Box里寻找解决方案开箱即用的解决方案总结下载源492.9 KB 介绍这将是一个简短的教程.我发现应用程序中的错误是寻找解决方案的最佳动力.最近,我遇到了一个很小的问题,首先似乎 ...
如何在AngularJS中有条件地应用CSS样式？
本文翻译自:How do I conditionally apply CSS styles in AngularJS? Q1. Q1. Suppose I want to alter the look ...
如何在SharePoint2010中添加Deep Zoom Image
如何在SharePoint2010中添加Deep Zoom Image 应用范围 SharePoint 2010 Foundation:SharePoint 2010 Standard:SharePo ...
php如何对数组进行分组,如何在PHP中对数组进行分组排序
如何在PHP中对数组进行分组排序发布时间:2021-01-04 16:28:51 来源:亿速云阅读:98 作者:Leah 这篇文章将为大家详细讲解有关如何在PHP中对数组进行分组排序,文章内容质量 ...

如何在AngularJS中使用SpreadJS？

如何在AngularJS中使用SpreadJS？相关推荐

最新文章

热门文章