SpreadJS:可嵌入您系统的在线Excel,纯前端表格控件,功能布局与 Excel 高度类似
网站链接:简介 | 功能例子 | SpreadJS JavaScript 学习指南
之前使用SpreadJS的时候总结了一些常用的功能点,希望可以帮助到使用SpreadJS的小伙伴
一.可能需要的功能点
- 例如控制哪个单元格可填写,哪个不可填写 :可以控制
- 控制它只显示表格,不要显示Excel 的菜单和按钮等 :可以
- 渲染数据的效率:例如准备一个1000行的数组,数组里的对象,有50个属性,有数值型(1位到15位,带4位小数)、文本(100个字左右)、日期 :可以,不到一秒
- SpreadJS的风格与系统页面风格的兼容性(系统前端页面采用的VUE以及Element)
- 是否支持粘贴时检查数据符合业务要求(例如:数据的类型、数据长度等)
- 可以复制或剪贴一个区域, 并将此区域粘贴到当前表单或另一个表单上。在这个用例中, 单元格的值和样式被同时复制。不过, 如果你将 Spread 控件的内容粘贴到其他的应用程序中, 例如记事本或是 Excel, 那么只有值被粘贴。 也可以从其他的应用程序中复制或剪贴数据并且粘贴到 Spread 控件中。
-
样式单独保存
- 隐藏掉表格中的Excel的标题行(A、B、C…),以及下面的Sheet页导航栏
- 可以显示或隐藏行头区域或者列头区域;底部的Sheet页导航栏是可以隐藏的,也可以隐藏新增sheet的按钮,也可以将表单标签放在顶部、左侧,右侧;还可以隐藏某些表单;还可以控制sheet标签名称是否可编辑;
- https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/workbook/tab-strip/vue
- 控制表格控件的高度、宽度, :可以
- 限制行数、列数 :可以控制不删除和插入行、列
- 如果支持公式,就要把公式保存起来,输入以及粘贴的公式
- 输入类型校验 :可以校验单元格数据类型,
- 表格层级收缩、展开 :可以设置树层级进行折叠或者隐藏、显示部分行、列,也可以像那个excel里面一样折叠,展开
- 获得表格的数据,获取变化了的数据 :可以
- 设置表格的数据 :可以
- 检查表格的数据是否符合业务要求(格式、必填项、是否重复等),不能有相同的产品名称:可以校验单元格必填项,数据类型,
- 判断单元格里是否是公式?
- 粘贴时校验,是否粘贴样式,格式,公式;
- 单元格文字过多可不可以换行 :可以(wordWrap)
- 是否支持输入公式,以及实现拖拉拽来改变公式的覆盖区域;复制粘贴公式以及格式
- 是否支持全屏打开表单
- 某个单元格之前有公式,当从其他地方粘贴数据过来之后,公式还生效吗?答:如果粘贴源只是数值,那么公式会被清除,
- 公式是否支持让用户修改,如果不修改的话,可不可以禁止用户查看公式,并且锁定有公式的单元格,禁止修改有公式的单元格,锁定之后该单元格将不能进行编辑或者粘贴操作
- '=SUM(E1:E2)';当此类公式的计算区域中有非数字输入时,系统会默认非数字输入的单元格的值为0,进行计算;
- '=D6+D8+D9';当此类公式的计算区域中有非数字输入时,系统将展示如下:#VALUE!
- 能否控制公式的计算结果的小数位数:格式化单元格的方法找到两种:style.formatter;sheet.setFormatter
- 是否需要支持excel表格全屏展示
二、可用的功能点:
- 支持内置上下文菜单和自定义内置上下文菜单,也可以不显示上下文菜单,这样就可以控制不会出现插入和删除的功能,
- 允许隐藏或者显示部分表单;
- 支持树型表格;
- 可以设置行、列标题样式
- 以下为workbook.options的一些选项:1.用户是否可以在表单的单元格中编辑公式:allowUserEditFormula;2.用户是否可以从表单复制样式然后粘贴到Excel,或者从Excel复制样式然后粘贴到表单allowCopyPasteExcelStyle;4.如果粘贴区域不足以粘贴,是否扩展粘贴区域allowExtendPasteRange; 5.复制或粘贴数据时包含哪些表头copyPasteHeaderOptions; 6.是否粘贴跳过不可见的区域默认为false:pasteSkipInvisibleRange; 7.内容是否格式化以适合单元格或单元格和标题autoFitType;8.内容是否格式化以适合单元格或单元格和标题autoFitType;9.是否在表单中启用公式文本框enableFormulaTextbox;10.是否在表单中启用公式文本框enableFormulaTextbox;11.用户是否可以在表单的单元格中编辑公式allowUserEditFormula;12.是否允许用户撤消编辑allowUndo
- 设置单元格的样式的方法大概有四种:setStyle等
- 当页面窗口大小发生变化的时候,可以手动刷新工作簿对象的布局和呈现:spread.refresh()
- 可以隐藏固定行或固定列后留下的线:sheet.options.frozenlineColor = "transparent";
- 集算表里面也有很多功能强大的表格,可以借鉴需要的功能
- 拖拽的事件:DragFillBlock:当用户拖动以填充单元格区域时触发;
- 支持用户可以导入导出带公式的excel文件,还可以自定义导出的文件名,导入导出之后公式依然存在
- 集算表可以自定义表格的主题(背景色等等)
- 粘贴的时候是否可以校验粘贴的数据?在某些特定单元格区域设置的格式校验,对于粘贴过来的或者拖动填充的数据,也是生效的