界面开发!如何在AngularJS中集成使用表格控件

SpreadJS 是一款基于 HTML5 的纯前端电子表格控件 , 兼容 450 种以上的 Excel 公式 , 凭借其 “高性能、跨平台、与 Excel 高度兼容”的产品特性 , 备受以华为、苏宁易购、天弘基金等为代表的企业用户青睐 。 SpreadJS 为用户带来亲切的 Excel 使用体验的同时 , 满足 Web Excel 组件开发、表格文档协同编辑、数据填报、Excel 类报表设计等业务场景 , 极大降低了企业研发成本和项目交付风险 。
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 。 例如:
Spread , Sheet和Column是标记层次结构的基本元素 。 其他元素通过设置来起作用 。 主要标签层次为:
如果元素的设置是简单类型 , 或者可以将其设置为简单字符串 , 则将其设置为元素的属性 。 一个简单的类型可以是数字 , 字符串 , 布尔值 , 枚举 , 字体 , lineBorder等 , 如以下示例所示:
如果元素的设置是对象类型 , 并且不能将其设置为简单字符串 , 则将其设置为基本元素的子元素 。 子元素可以具有另一个子元素 。 例如:
【界面开发!如何在AngularJS中集成使用表格控件】以下主题列出了元素指令 。
  • Gc-spread-sheets元素
  • 图纸和图纸元素
  • 列 , 列和组元素
  • 样式元素
  • 单元元素
  • 验证器元素
属性名称不区分大小写 , 并支持使用“-”分割每个单词 。 例如 , 以下代码结果是相同的:

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

这是一个HTML INPUT元素 , 它使用ng-model绑定columnWidth 。
column Width:
在输入元素中输入数字时 , 列宽会自动调整大小 。
如果将传播指令元素或属性放置在不遵循该元素指令的另一个元素上 , 则该元素不会生效 。 您不能重新排序 , 插入或删除html标记上定义的列 。 这样做可能会导致绑定值错误 。
今天的内容就到这了 , 不要忘了在评论区留下的意见和建议!点击了解更多!你可以同时获取更多资讯以及最新版下载!