电子表格控件Spreadjs教程：如何在 AngularJS 中使用 SpreadJS

SpreadJS最新试用版

SpreadJS支持AngularJS。

AngularJS是一个在客户端使用JavaScript的Web应用程序框架。

使用以下步骤将SpreadJS与AngularJS结合使用。

1. 添加SpreadJS AngularJS模块js文件“ /scripts/interop/angular.gc.spread.sheets.xxx.js”。
2. 将“ gcspreadsheets”模块添加到您的应用程序js文件中。例如，如果您的工作范围由名为“ myApp”的“ ng-app”属性指示，则将这样的代码添加到您的应用定义js文件中:

   angular.module(“myApp”, [“gcspreadsheets”, “module2″,”module3”,…])

3. 将“ gc-spread-sheets”标签添加到HTML页面。然后在工作表中添加工作表和列。您可以将属性设置为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>                

如果元素的设置是简单类型，或者可以将其设置为简单字符串，则将其设置为元素的属性。一个简单的类型可以是数字，字符串，布尔值，枚举，字体，lineBorder等，如以下示例所示：

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

以下主题列出了元素指令。

• 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}}”以绑定范围的数据。例如，这是一列，其宽度绑定到columnWidth：

<column width={{columnWidth}} >

这是一个HTML INPUT元素，它使用ng-model绑定columnWidth。

column Width： <input ng-model=”columnWidth”  />

在输入元素中输入数字时，列宽会自动调整大小。

如果将传播指令元素或属性放置在不遵循该元素指令的另一个元素上，则该元素不会生效。您不能重新排序，插入或删除html标记上定义的列。这样做可能会导致绑定值错误。

今天的内容就到这了，不要忘了在评论区留下的意见和建议！现电子表格控件SpreadJS正版授权限时优惠！低至3490；企业版最高立减6000元。点击了解更多优惠！

标签：