js固定表格行列_纯前端表格控件SpreadJS V14.0发布:组件化编辑器+数据透视表

SpreadJS 是一款基于 HTML5 的纯前端表格控件,兼容 450 种以上的 Excel 公式,具备“高性能、跨平台、与 Excel 高度兼容”的产品特性,可为用户提供高度类似 Excel 的功能,满足 Web Excel组件开发、 表格文档协同编辑、 数据填报、 类Excel报表设计等业务场景需求,极大的降低企业的研发成本和项目交付风险。

产品自面市以来,备受华为、苏宁易购、天弘基金、远光软件等各领域龙头企业的青睐,并于2020年被中国软件行业协会认定为“中国优秀软件产品”。

50dc71155b31fce17188ec9b28e77d37.png

日前,SpreadJS 正式发布V14.0版本。从该版本开始,SpreadJS推出了数据透视表功能,进一步降低企业数据分析的门槛,提升系统数据处理的能力。

此外,SpreadJS 还在 V14.0中发布了组件化的在线表格编辑器,提供了更易嵌入、秒级加载、灵活定制的功能。在线表格编辑器可与SpreadJS 集成,助力开发者在主流前端 JS 框架中,实现高性能的模板设计、在线编辑、填报和数据绑定等功能。

在详细介绍SpreadJS V14.0的新特性之前,请同步下载体验:

>> 纯前端表格控件SpreadJS V14.0下载

SpreadJS V14.0 新特性介绍

1. 数据透视表:完美再现Excel 强大的数据分析能力

作为一款功能布局与 Excel 高度类似的纯前端表格控件,SpreadJS不但兼容了450 种以上的 Excel 公式、32 种图表和 18 种迷你图,还在此版本中正式推出数据透视表功能。

bdaae6c9f247564571744f5fda47e9d3.png

(SpreadJS的数据透视表)

如上图所示,SpreadJS的数据透视表已具备了 Excel 透视表的绝大部分功能,包括透视面板、透视表字段、筛选器、值字段设置、数据排序、分类汇总等。

通过50万行数据测试,SpreadJS 的数据透视表仍表现出极高的数据处理性能,所有操作在527毫秒内即可执行完毕。

39429e1b87f8605f198fb2b26d8f9214.png

2. 组件化的在线表格编辑器:更易嵌入、秒级加载、灵活定制

在线表格编辑器作为 SpreadJS 的增强组件,可轻松嵌入各类前端页面,内置开放的 API 和类 Excel 的 UI 设计元素,助力开发者在 Angular、Vue、React 等前端 JS 框架中,实现高性能的模板设计、在线编辑/填报和数据绑定等功能,并为最终用户带来高度类似 Excel 的使用体验。

在 V14.0版本中,SpreadJS推出了基于组件化设计架构的在线表格编辑器,该编辑器以 Dom 作为容器,通过前端组件的形式发布,可以在本地下载试用,无任何功能限制。

>>点击此处,下载SpreadJS 组件化表格编辑器

组件化的在线表格编辑器具备如下优势:

  1. 应用方式更灵活

d7031abac1dadb1fe18763c8ab4c74ad.png

(组件化的设计架构,应用方式更灵活)

  1. 更易嵌入、移植

7dbedcb7fde4e5d967c4c98fb2d45267.png

(不依赖任何第三方类库)

  1. 体积更小,秒级加载

7736a39876cd2dfea5a981d99e3854a1.png

(体积不到 4 MB,秒级即可完成加载)

  1. 定制更容易,交互更丰富

6577cc71080541aadb1f22c93378714b.png

(用声明式语法代替 HTML 源代码,定制更容易)

3. 公式函数:支持迭代计算,加入XMatch & XLookup、LET 等新函数

SpreadJS在当前版本中支持了迭代计算,即可通过一个递推公式反复校正设定的初始近似值,直至达到预定精度要求为止,具体实现如下所示:

1a3198862b2e4822a1955b3b3826e360.png

(SpreadJS的迭代计算功能)

8ad25198e9f411cc3963f5ab663100e8.png

(迭代计算的实例演示)

除了迭代计算,SpreadJS 还在当前版本中加入了XMatch & XLookup,以及LET函数

602fddaf83159d005be8692bff563353.png

(SpreadJS 的 XMatch & XLookup函数)

05a2fb30c7bb1e67abbb53088c42a077.png

(SpreadJS 的 LET函数)

4. 导入导出:支持渐进加载、HTML 导出

在当前版本中,SpreadJS 不仅可直接在浏览器中完成 Excel、CSV、JSON 等文件的导入导出、PDF 导出、打印及预览操作,还加入了渐进加载、HTML 导出等更多新功能。

590e43adb2c67d9dd20dacfd0c08b9c0.png

(SpreadJS 的 HTML 导出功能)

5. 单元格:支持渐进填充、多列选择

SpreadJS已支持单元格渐进填充效果,可实现多列选择、行列头支持公式函数以及迷你图等功能。

f6a367db0e3770bd45dcc539d8c3090e.png

(SpreadJS 的渐进填充效果)

1c3b8afd5a84bd8cc94ede6dd0b4b88d.png

(SpreadJS 的行列头支持公式及迷你图)

6. 数据可视化:新增漏斗图,支持图表轴交叉属性

SpreadJS在当前版本中新增了漏斗图类型,并支持图表模板填充、GapWidth & Overlap 调整、环形图的 holeSize 属性调整,以及图表轴交叉等新功能。

abc6b0cf3b7f739e8abf72e634d2d916.png

(SpreadJS 的漏斗图)

517de14de324b7cefdfb20b9bc083de1.png

(SpreadJS 的图表模板填充效果)

28467bd7a12075637b30fa8303b207ef.png

(SpreadJS 的图表轴交叉功能)

8422f8ec8dab6a44bc75c83539df0ccf.png

(SpreadJS 的GapWidth & Overlap 调整效果)

4b94ef36067fee17a01a8e78b83c604b.png

(SpreadJS 的holeSize 属性调整效果)

以上就是纯前端表格控件SpreadJS V14.0的主要功能介绍,如需了解更多新版本信息,欢迎访问SpreadJS 产品官网。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/472843.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

天池 在线编程 区间统计(队列)

文章目录1. 题目2. 解题1. 题目 给定一个01数组 arr 和 一个整数 k, 统计有多少区间符合如下条件: 区间的两个端点都为 0 (允许区间长度为1)区间内 1 的个数不多于 k arr 的大小不超过 10^5 样例 1: 输入: arr [0, 0, 1, 0, 1, 1, 0], k 1 输出: 7 解释: [0, 0], [1, 1],…

android 模糊查询控件_第三十二篇:在SOUI2.0中像android一样使用资源

SOUI2.0之前,在SOUI中使用资源通常是直接使用这个资源的name(一个字符串)来引用。使用字符串的好处在于字符串能够表达这个资源的意义,因此使用字符串也是现代UI引擎常用的方式。尽管直接使用字符串有意义明确的优点,它同样也有缺点&#xff…

采用java信号量(semaphore)让线程轮流打印

semaphore是java.util.concurrent包下的并发工具类。 A counting semaphore. Conceptually, a semaphore maintains a set of permits. Each acquire() blocks if necessary until a permit is available, and then takes it. Each release() adds a permit, potentially relea…

天池 在线编程 有序队列

文章目录1. 题目2. 解题1. 题目 给出了一个由小写字母组成的字符串 S。 然后,我们可以进行任意次数的移动。 在每次移动中,我们选择前 K 个字母中的一个(从左侧开始),将其从原位置移除,并放置在字符串的末…

网站搜索功能怎么实现_电商网站上的搜索功能是如何实现的?

今天是刘小爱自学Java的第159天。感谢你的观看,谢谢你。学习计划安排如下:索引库本质上和数据库类似,也是存储数据的,既然如此自然也会有增删改查。那么这个索引库到底有何特别应用呢?索引库的特别之处在于它的查询&am…

android蓝牙通信_Flutter通过BasicMessageChannel实现Flutter 与Android iOS 的双向通信

题记:——不到最后时刻,千万别轻言放弃,无论结局成功与否,只要你拼博过,尽力过,一切问心无愧。通过 Flutter 来进行移动应用开发,打包 Android 、iOS 双平台应用程序,在调用如相机、…

apache mysql php 安装配置_Windows下Apache,MySql,PHP安装配置

本文目标在Windows8.1 x64下 全手工安装Apache、PHP、MySQL,使用NetBeans调试第一个Hello,World!程序。安装Apache打开http://httpd.apache.org 左侧Download!点From a Mirror,看到当前最新稳定版本未2.4.12, 看到现在Windows的版本已经不像以…

MapReduce既是编程模型又是计算框架

learn from 从0开始学大数据&#xff08;极客时间&#xff09; MapReduce 编程模型 包含 Map 和 Reduce 两个过程 map 的主要输入是一对 <Key, Value> 值&#xff0c;输出一对 <Key, Value> 值将相同 Key 合并&#xff0c;形成 <Key, Value 集合 >再将这个…

python设置单元格宽度_Python xlwt-访问现有单元格内容,自动调整列宽

我刚刚实现了一个包装类&#xff0c;它跟踪输入项的宽度。看起来效果不错。import arial10 class FitSheetWrapper(object): """Try to fit columns to max size of any entry. To use, wrap this around a worksheet returned from the workbooks add_sheet me…

java mysql 流媒体_red5-rtmp-push

red5-rtmp-push介绍获取视频流 进行人脸识别后推送到red5服务器(人脸识别技术由虹软提供)整个系统共有两个项目组成启用说明1.主要是借用ifast框架,主要的服务类就一个,其他的都是多余的。2.首先修改 resources/application-dev.yml 中的 red5.url : rtmp://red5ip/oflaDemo/ 改…

工单更改历史记录(轉載)

一、自定义表结构 二、生产工单出口增强 三、查询报表 一、自定义表结构 表ZPCO02 MANDT MANDT CLNT 3 0 客户端 AUFNR AUFNR CHAR 12 0 订单号 MATNR MATNR CHAR 18 0 物料号 FILED FIELDNAME CHAR 30 0 字段名 AENAM AENAM CHAR 12 0 对象更改人员的名称 LAEDA LAEDA DATS 8 …

MapReduce 计算框架如何运作

learn from 从0开始学大数据&#xff08;极客时间&#xff09; 1. MapReduce 作业启动和运行机制 作业涉及三类关键进程&#xff1a; 大数据应用进程 这类进程是启动 MapReduce 程序的主入口&#xff0c;主要是指定 Map 和 Reduce 类、输入输出文件路径等&#xff0c;并提交作业…

python能做机器人吗_python深度学习 人工智能是做机器人吗?

我们经常听到”Python“与”人工智能“这两个词&#xff0c; 也很容易混淆这两个词&#xff0c; 那么Python和人工智能到底什么关系呢&#xff1f; Python人工智能工程师待遇怎么样&#xff1f; 通过这篇文章详细解答一下&#xff1a; 关于Python Python是一门计算机程序语言&a…

linux忘记mysql密码_Linux下忘记Mysql密码的找回方法(图)

Mysql隔一段时间不访问&#xff0c;也许你会忘记访问密码&#xff0c;这时该怎么办&#xff0c;重装mysql吗&#xff1f;这个代价也太大了&#xff0c;我们这里介绍两种恢复密码的方法。方法一&#xff1a;因为Mysql密码存储于数据库mysql中的user表中&#xff0c;所以我们只要…

单元测试的7种境界

1. 以各种借口拒绝单元测试Unit Test&#xff0c;比较常用的是“你没有足够的时间(进行单元测试)”。  无论是对单元测试的老手还是新手编写单元测试还是有一定得工作量的&#xff0c;而且单元测试也需要掌握大量的测试框架和工具(光一个junit或testng你很难工作地很happy)。…

Yarn 资源调度框架

learn from 从0开始学大数据&#xff08;极客时间&#xff09; Hadoop 主要是由三部分组成&#xff1a; 分布式文件系统 HDFS分布式计算框架 MapReduce分布式集群资源调度框架 Yarn Yarn 的架构

python连接sql数据库_python连接SQL数据库

前言 上次通过学习&#xff0c;懂得了如何通过不同的对象来定位页面的元素&#xff08;id,class_name,tag_name,xpath,css等&#xff09;&#xff0c;可以实现模拟点击的功能。当然&#xff0c;这只是初期的web自动化的一点小成绩。当你觉得这些都应用的差不多的情况下&#xf…

mysql mtop 使用_MYSQLMTOP监控环境搭建

MySQLMTOP是一个由PythonPHP开发的MySQL企业级监控系统。系统由Python实现多进程数据采集和告警&#xff0c;PHP实现WEB展示和管理。最重要是MySQL服务器无需安装任何Agent&#xff0c;只需在监控WEB界面配置相关数据库信息功能非常强大&#xff1a;可对上百台MySQL数据库的状态…

javascript正则表达式入门

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><title> RegExp对象</title><script>/*function validation(obj){//1.得到文本框的值//var …

Hive是如何让MapReduce实现SQL操作的?

learn from 从0开始学大数据&#xff08;极客时间&#xff09; 1. MapReduce 实现 SQL 的原理 SELECT pageid, age, count(1) FROM pv_users GROUP BY pageid, age;实现过程&#xff1a; 2. Hive 的架构 Hive 能够直接处理我们输入的 SQL 语句&#xff08;Hive SQL 语法与 标…