彩票走势图

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

翻译|使用教程|编辑:鲍佳佳|2020-10-09 09:32:26.390|阅读 163 次

概述:AngularJS是一个在客户端使用JavaScript的Web应用程序框架。本文主要讲述如何在 AngularJS 中使用 SpreadJS,一共分为三个步骤,配合我们提供的链接下载使用吧!

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

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

点击下载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页面。然后在工作表中添加工作表和列。您可以将属性设置为spreadsheetcolumn。例如:

                            <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&gt;

该属性值支持“ {{binding}}”以绑定范围的数据。例如,这是一列,其宽度绑定到columnWidth:

<column width={{columnWidth}} >

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

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

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

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

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


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP