表格控件SpreadJS教程：在 AngularJS 中使用 Spread.Sheets只需三步-控件新闻-慧都网

表格控件SpreadJS教程：在 AngularJS 中使用 Spread.Sheets只需三步

翻译|使用教程|编辑：鲍佳佳|2020-10-22 09:38:44.177|阅读 432 次

概述：Spread.Sheets 支持 AngularJS.AngularJS 是一款前端 JavaScript 框架。本文将讲述如何在 AngularJS 中使用 Spread.Sheets，一共分为三步。

作为一款基于 HTML5 的纯前端表格控件，SpreadJS兼容了超过 450 种 Excel 公式、53 项单元格格式、18 种条件格式、32 种图表，以及182 种形状，可满足金融财税行业杜邦分析、指标补录、数据钩稽检查等多个应用场景需求，在为用户带来亲切、易用的使用体验的同时，满足了 Web Excel组件开发、表格文档协同编辑、数据填报、类Excel报表设计等业务场景，大幅简化了金融系统的开发难度。

点击下载SpreadJS最新试用版

Spread.Sheets 支持 AngularJS.

AngularJS 是一款前端 JavaScript 框架。

使用如下步骤来在 AngularJS 中使用 Spread.Sheets

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

HTML

						
												<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 是最基本的元素。其他元素都需要通过设置它们来工作。

标签树状结构为：

HTML

				
										<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，枚举，字体，边框等。如下代码所示：

HTML

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

如果元素的设置是一个对象类型并且它不能使用简单的字符串来设置，该设置将暴露为子元素。子元素也可能会有其他的子元素，如下代码所示：

HTML

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

以下文章例举了所有元素的指令（directives）：

使用 Gc-spread-sheets 标签
使用 Sheet 标签
使用 Column, Columns, 和 Group 标签
使用 Style 标签
使用 Cell 标签
使用 Validator 标签

以下属性名是不区分大小写的，并支持使用 “-” 来分隔每一个单词。比如以下代码是等价的：

以下代码支持使用 "{{binding}}" 来绑定 scope 上的数据。比如，以下代码将列宽绑定到了 columnWidth 变量中：

以下代码将 columnWidth 变量绑定到了 input 元素中。

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

Spread.Sheet 的列宽将会随着 input 框中的值变化而变化。

如果没有按照 spread 的说明来设置属性和指令，spread 将无法正常工作，绑定的值可能会出错。

今天的内容就到这了，如果您想搭建一款在功能和操作体验上均与 Excel 高度类似的金融信息化系统，实现导入 Excel 自定义报表、指标补录、公式函数等需求，欢迎咨询慧都客服！我们有诸多成功案例和应用场景，可以为您提供帮助。不要忘了在评论区留下的意见和建议！现电子表格控件SpreadJS正版授权限时优惠！低至3490；企业版最高立减6000元。点击了解更多优惠！