SpreadJS 纯前端表格控件 - V16.0 新特性--内容摘自互联网

新文件结构是 SpreadJS 近几个版本中最为重要的架构级更新。这种新文件结构可以大大提高导入大型 Excel 文件的性能,同时在保存时创建更小、优化更好的文件。

在 V15.0 及更早的版本中,SpreadJS 需要先导出 SSJSON ,再导出 Excel 的 xlsx 文档。新的文件格式可以直接将数据转换为模型。生成的数据被保存到一个压缩的 .sjs 文件中,使其类似于 Excel 自身的 XML 结构。这种格式让 ExcelIO 的进程更快、更轻量。

导出文件性能对比(单位:毫秒)

集算表(TableSheet)增强
SpreadJS 集算表(TableSheet)是一个具备数据绑定功能、公式计算能力的高性能数据表格,提供排序、筛选、样式、行列冻结、自动更新、单元格更新等能力。集算表在 V16.0 中获得了更多功能:

1、关系数据管理器(DataManager)中的层级数据
TableSheets 现在支持源数据中的层级结构数据。这包括四种不同类型的记录数据:

属性“id”和“parentId”

指示层级结构级别的属性

包含分层子集的属性

可以通过自定义函数解析为层级结构的,包含主键的数据

配置父子层次结构类型代码示例:

还添加了层级结构操作,使用户能够:

升级/降级记录
向上/向下移动记录
在之后/之前或之上/之下插入记录
删除一条记录
展开/折叠所有记录级别或特定级别
排序/过滤记录

2、关系数据管理器(DataManager)字段名称映射

关系数据管理器(DataManager)的数据源模式现在支持为列设置别名,允许数据源的前端和后端之间使用不同的名称。这可以通过在向 DataManager 添加视图时简单地设置“caption”属性来完成。如图:

设计器(Designer)增强
我们对 SpreadJS 的设计器组件进行了增强,包括本博客前面 TableSheet 部分的一些相应功能:

1、集算表(TableSheet)模板和面板增强

当集算表最初被添加到 SpreadJS 时,我们在设计器中添加了一个面板来管理 TableSheets。在 V16.0 中使用列列表中的关系数据时,可以进行折叠特定列的操作。此外,用户可以单击关系列以显示该特定列的详细信息。在工作簿中选择集算表时,此功能也适用于设计器右侧的集算表面板。其他功能包括分组和拖动字段。

2、集算表(TableSheet)层次结构数据

设计器中有关集算表(TableSheet) 的另一个增强,是在数据源的“列”选项卡中添加了对分层数据的支持。列现在有一个单独的“层次结构”部分,其中包含可以定义的类型、聚合公式和分组列:

这些选项可以按如下方式使用:

类型 - 定义为 Parent、ChildrenPath 或 Level
汇总公式 - 输入指定列的层级汇总公式
大纲列 - 自定义列的显示,指定是否包括复选框、图像或指示器
3、在选择区域中执行查找/替换

在大型工作表中搜索特定数据时,您可能只想搜索选中区域的单元格内容。在 V16.0 中,我们添加了对查找和替换功能的增强,支持了仅在选中区域的单元格中进行搜索。

4、格式面板

新的格式窗格按钮让用户可以快速打开形状、图片和图表的侧边栏。

计算增强
无效的公式输入行为和样式

SpreadJS 会自动识别无效的公式,并在用户尝试提交时显示错误。在 V15.0 及更早版本中,如果公式无效,输入的内容会被自动删除。在 V16.0 版本中,我们添加了对应的可选项,支持将输入错误的公式保留在单元格中以便用户修正,当我们设置 AllowInvalidFormula 选项设置为 true 时,输入的错误公式将被转换为文本并保留:

spread.options.allowInvalidFormula = true;

设计器配置方法:

代码配置方法:

通过此增强功能,我们还添加了专门针对无效公式的单元格状态。这意味着您可以实现自动标记具有无效公式的单元格并将样式应用于这些特定单元格。

形状增强
1、类 Excel 的表单控件(Form Controls)

为了更轻松地在 SpreadJS 中创建您自己的表单,我们添加了一些基于 SpreadJS 形状的有用的类似 Excel 的表单控件。这些控件包括:

按钮(Buttons)
微调按钮(Spin Buttons)
列表框(List Boxes)
组合框(Combo Boxes)
复选框(Check Boxes)
选项按钮(Option Buttons)
分组框(Group Boxes)
标签(Labels)
滚动条(Scrollbars)

通过指定表示控件位置和大小的 addFormControl 方法的 left、top、width 和 height 参数,可以将这些控件放置在工作表中的任何位置。一旦设置了位置和大小并创建了控件,它就可以绑定到特定的单元格,例如上面屏幕截图中的年龄微调按钮。此外,还添加了一个名为 FormControlValueChanged 的新事件,以便在表单控件的值发生变化(UI 操作、API 调用或关联的单元格发生变化)时触发。

2、调整大小(Resizing)增强

开发人员现在可以限制或允许不同类型的形状调整大小。这些类型包括纵横比、水平和垂直调整大小,可以使用 API“allowResize”进行设置。

3、Shift+鼠标调整大小行为

当 allowResize 在工作表中设置为 true 时,可以在使用鼠标调整形状大小时按住 shift 键以保持形状的纵横比。

工作簿(Workbook)增强
我们对 SpreadJS 的工作簿功能做了一些增强:

1、复制/剪切取消事件

复制和剪切事件已得到增强以提供剪贴板的当前状态。这有助于在复制/剪切/粘贴过程的某些阶段实现特定功能,并向以下事件添加额外的参数:

ClipboardChanging
ClipboardPasting
ClipboardPasted
2、单元格装饰样式

我们的样式实现已得到增强,包括单元格装饰。包括:

遮角样式
边角样式
图标(位置、图标和颜色)

3、数据验证(Data Validation)的自定义样式

数据验证可用于标记非法的单元格数据或防止输入特定数据。V16.0 可以为该验证设置样式,但对于此版本,我们添加了为数据验证设置自定义样式的功能。

4、在 EditEnding 和 EditEnded 事件中取消输入

EditEnding 和 EditEnded 事件发生在用户在单元格中输入或更改数据之后。在 V16.0 版本中,我们添加了一个取消参数,以便开发人员可以在需要时取消编辑。

SpreadJS 16.0 中文版在线电子表设计预览EXCEL-Crack相关推荐

  1. 在线文档预览方案-office web apps

    原文:在线文档预览方案-office web apps 最近在做项目时,要在手机端实现在线文档预览的功能.于是百度了一下实现方案,大致是将文档转换成pdf,然后在通过插件实现预览.这些方案没有具体实现 ...

  2. [转载]在线文档预览方案-Office Web Apps

    最近在做项目时,要在手机端实现在线文档预览的功能.于是百度了一下实现方案,大致是将文档转换成pdf,然后在通过插件实现预览.这些方案没有具体实现代码,也没有在线预览的地址,再加上项目时间紧迫.只能考虑 ...

  3. luckysheet+luckyexcel在线预览excel

    luckysheet,是一款纯前端的在线excel,功能强大,完全开源 如果在线预览excel的需求,可以使用xlsx插件,但是这个插件只能解析表格中的数据,如果表格中的样式和数据都要解析出来,就需要 ...

  4. vue 实现在线预览excel

    一.思路 由于项目中要求excel能够在线预览,且excel文件并非本地而是后端那边提供的.因此提供一下本人在项目的解决思路: 1.让后端返回二进制文件流 2.将文件流转为file对象 3.通过luc ...

  5. 文档预览服务器,特色 - I Doc View在线文档预览

    使用对象 个人和第三方应用均可使用:个人:可以在示例页面上传和预览文档 第三方应用:通过我们提供的第三方应用API接口来调用,或者将预览服务部署到您自己的服务器上. 预览本地文档 您可以上传并在线查看 ...

  6. 在线文档预览方案-office web apps续篇

    上一篇在线文档预览方案-office web apps发布后收到很多网友的留言提问,所以准备再写一篇,一来介绍一下域控服务器安装,总结一下大家问的多的问题,二来宣传预览服务安装与技术支持的事情. 阅读 ...

  7. Android 8.0学习 (36)---Android 8.0 WebView 拍照、简易预览、二维码扫描 各种问题解决

    Android 8.0 WebView 拍照.简易预览.二维码扫描 各种问题解决 项目用到了WebView包装HTML5做成app使用,其中有页面用到了二维码和拍照上传功能.本人从未做过android ...

  8. wps在线预览接口_在线文档预览(干货篇)

    目前市面上的文档预览产品确实是五花八门,总的来说分两类产品:免费的产品很少也很局限,收费的产品很多很丰富但有坑!(这个坑嘛,大家都懂) 部分公司会选择自制文档预览功能,其实分析比较自制和外购两种方案, ...

  9. HTML实现在线预览Excel,word,ppt

    使用office提供的在线预览功能 https://view.officeapps.live.... src后面接你需要预览的文件下载地址. 如果不能实现预览功能,提示报错 请检查http返回的Con ...

最新文章

  1. Python --深入浅出Apriori关联分析算法(二) Apriori关联规则实战
  2. 软件包管理 之 软件在线升级更新yum 图形工具介绍
  3. Python使用numpy中trim_zeros函数去除首尾0值的语法
  4. blob html 预览_Blob | HTML 5 API | JavaScript 权威指南
  5. 【数据挖掘】基于方格的聚类方法 ( 概念 | STING 方法 | CLIQUE 方法 )
  6. 阿里云@广东:让我们一起上云!
  7. cuSPARSE库:(十七)cusparseStatus_t 返回信息
  8. python代码混淆工具_有没有好的 python 混淆器 推荐一个
  9. 火狐浏览器插件大全,火狐插件大全,firefox插件使用方法
  10. 帮你躲坑:pip install tensorflow 报错怎么办,import tensorflow 报错怎么办?
  11. 高分四号(GF4)——预处理(辐射定标、大气校正、正射校正、图像配准)
  12. 计算机病毒怎么侵入nide计算机,处理被病毒侵入电脑正确的方法图文教程
  13. C语言开发windows桌面程序,演练:创建传统的 Windows 桌面应用程序 (c + +)
  14. 采集利器 - Web Scraper教学及示例
  15. W3school学习 js-2
  16. 每月一书(202202): 《从零开始做自媒体》
  17. 微信公众号怎么添加Word、Excel、PPT、PDF文档下载链接?
  18. C指针之初始化(三)
  19. 这是我见过最好的JVM笔记,拿到阿里offer后我哭了
  20. 每天10个前端小知识(1day)

热门文章

  1. 自走棋还没凉?腾讯有了《多多自走棋》还要上线《战歌竞技场》?
  2. 园区智慧能源管理系统
  3. 【数据结构】实验 5 数组和特殊矩阵
  4. ChatGPT和New Bing学术提问模版
  5. 国际制造执行系统(MES)应用与发展
  6. MySQL-SQL简介、管理逻辑库和数据表-学习笔记04
  7. MySQL中GROUP_CONCAT和Having的使用
  8. 【2021新教程】win10安装汇编环境(Dosbox+masm)
  9. android 百度地图黑屏,黑屏,这是什么情况
  10. linux查看当前操作系统内核和版本