个人中心
文章发布
退出
作者热门文章
- Java锁的逻辑（结合对象头和ObjectMonitor）
- 还在用饼状图？来瞧瞧这些炫酷的百分比可视化新图形（附代码实现）⛵
- 自动注册实体类到EntityFrameworkCore上下文，并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
26
4
集算表 （Table Sheet）是一个具备高性能渲染、数据绑定功能、公式计算能力的数据表格，通过全新构建的关系型数据管理器结合结构化公式，在高性能表格的基础上提供排序、筛选、样式、行列冻结、自动更新、单元格更新等功能.
什么是集算表（Table Sheet）？
集算表是一个具有网络状行为和电子表格用户界面的快速数据绑定表的视图.
众所周知Excel的工作表（Work Sheet）是一个自由式布局，基于单元格（Cell Base）的表格，适用于一些松散式的数据布局展示，布局上来说非常灵活，但对于固定格式的大批量数据展示，不具备优势.
集算表不同于Excel的工作表，它是一个基于列（Column Base）的网状表格（Grid），适用于展示规则数据。同时它还具备了Excel工作表（Work Sheet）的用户界面和部分常见操作。并且支持Excel的部分计算功能。同时结合数据绑定的功能，对于大量固定格式的数据（例如数据库的表格）可以快速在前端进行展示.
集算表的特点正如它的名字的三个字：集，算，表:
集的意思就是数据集记和管理。集算表在前端构建了一个叫做Data Manager的数据管理模块。该模块可以简单理解为一个前端的数据库，Data Manager负责与远端的数据中心进行通信，拉取远端的数据。在前端处理数据，例如数据表的定义，表间关系等。同时Data Manager还负责处理数据的变形，例如分组，切片，排序，过滤等.
集算表本身基于网络结构化数据的计算引擎Calculation Engine。Calculation Engine定义不同的上下文计算层级，不同与SpreadJS中工作表（Work Sheet）基于单元格或者区域（Range）的计算层级，集算表（Table Sheet）的上下文层级是基于行级，组级，数据级.
同时通过Calculation Engine的计算串联，使得集算表（Table Sheet）与工作表（Work Sheet）之间可以进行数据串联。这使得计算表不是一个独立存在，它可以与工作表结合使用，相互配合以适应更多的需求.
整个Table Sheet分为三层：渲染层，数据层，功能层.
渲染层复用了工作表（Work Sheet）的渲染引擎，具备双缓冲画布等高性能的优势.
数据层直连Data Manger，无需建立数据模型，相交SpreadJS更加快速.
功能层不同于传统表格（Grid），将底层结构化数据进行改造，在支持增删改查等基本功能的基础上，还额外支持了大部分工作表（Work Sheet）的对应功能，如样式，条件格式，数据验证，计算列等.
在数据底层，保证上述功能支持的基础上，还能保证数据的结构化，而非松散的数据结构.
集算表的架构:
Data Manager负责拉取远端数据，远端数据源可以是Rest API、OData、GraphQL、Local。Data Manager在拉取数据源之后会根据其中的定义构建数据表（Data Source），该表结构与数据库中的表结构类似。之后通过这些表来定义对应的数据视图（View），视图中定义了展示的结构以及计算列，关系列的添加。最终将不同的视图（View）绑定在不同的Table Sheet上。Table Sheet负责对所有的视图进行展示和操作。Calc Engine在Data Manager上工作，而非直接工作在Table Sheet上，这是为了更方便的去支持集算表与普通工作表之间的公式引用。这使得集算表与普通工作表之间产生“化学效应“，例如下面的示例:
在创建了集算表之后可以在普通的工作表中直接通过公式引入集算表的表格中的数据。这样可以做到通过集算表对数据进行展示，同时通过工作表的功能，对展示的结果进行数据分析.
甚至可以直接引用集算表中的数据当做数据数据源，创建数据透视表.
集算表的性能:
集算表是基于Column进行数据存储，相较于基于Row的存储结构，在筛选和计算方面有很大的优势.
通过性能测试，我们可以了解到，对于100W行级别的数据，集算表从发送请求加载数据到将表格绘制完毕总共的耗时是大约5秒钟.
筛选数据花费时间在50ms左右（Filter country == "UK"）.
100W行数据排序花费时间在5S左右（Sort birthday == "Ascending"）.
对100W行数据添加计算列，对每行数据进行计算，花费时间不明显（总计时间4807ms，但该事件包含了数据加载，绘制的总时间，对比之前的测试结果基本在4800ms左右。故添加计算列计算花费的时间不明显，可忽略不计）.
点击链接访问 性能测试示例 .
大家如果感兴趣自行按照上述地址体验即可.
React + Springboot + Quartz，从0实现Excel报表自动化 。
电子表格也能做购物车？简单三步就能实现 。
使用纯前端类Excel表格控件SpreadJS构建企业现金流量表 。
最后此篇关于表格集算表高性能原理——怎样实现纯前端百万行数据秒级响应的文章就讲到这里了,如果你想了解更多关于表格集算表高性能原理——怎样实现纯前端百万行数据秒级响应的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
26
4
0
1. HTML 结构 1.1 HTML 文件基本结构 第一个html程序 hello world! html 标签是整个 h
文件上传三种方案：1. form表单上传，2. iframe，3. FormData，base64上传文件，二进制流上传文件，二进制流下载文件。异步上传，大文件上传--切片：拆分上传请求断点续传显示上
1. HTML 结构 1.1 HTML 文件基本结构 第一个html程序 hello world! html 标签是整个 h
uniapp作为开发移动端的前端框架，目前国内是非常流行的，使用HbuilderX开发工具基于uniapp框架开发的系统可以方便的转换为小程序、APP等移动端程序，大大降低了移动开发的成本。网络
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力，做出一些脑洞大开的图形。 预备知识 伪元素 伪元素是一个附加至选择器末的
今天给大家分享一些实用的JS代码片段，有需要的朋友欢迎收藏! 1、获取浏览器的版 functiongetBrowser(){ varUserAgent=navigator.us
1 . Wappalyzer 全球用户数：1,000,000+ Wappalyzer可以帮助我们了解目标网站的构建方式。工作当中存在大量此类情况，客户需要我们参照某些网站
在管理后台中我们会使用大量的表格表单组件, 导入导出各种报表, 有些场景还需要对报表数据进行可视化分析, 动态生成可视化图表, 笔者将基于以上场景, 总结一些实用的 Table 组件开发技巧,
3D动画效果现在越来越普及，已经被广泛的应用到了各个平台，比如阿里云，华为云，webpack官网等。它可以更接近于真实的展示我们的产品和介绍，带来极强的视觉冲击感。所以说，为了让自己更加优秀，c
QShop商城-快速开始-前端 工具准备 NodeJs 前端环境为NodeJs，下载地址：http://nodejs.cn/download/current/ 。 默认会用版
1. 初始JavaScript 1.1 什么是 JavaScript JavaScript (简称 JS) 是世界上最流行的编程语言之一 是一个脚本语言, 通过解释器运行 主要在客户端(浏览器)上运行
1. WebAPI 背景知识 1.1 什么是 WebAPI JS 分成三个大的部分: ECMAScript: 基础语法部分 DOM API: 操作页面结构 BOM API: 操作浏览器 WebAPI
1. WebAPI 背景知识 1.1 什么是 WebAPI JS 分成三个大的部分: ECMAScript: 基础语法部分 DOM API: 操作页面结构 BOM API: 操作浏览器 WebAPI
1. 初始JavaScript 1.1 什么是 JavaScript JavaScript (简称 JS) 是世界上最流行的编程语言之一 是一个脚本语言, 通过解释器运行 主要在客户端(浏览器)上运行
有没有办法从页面访问 tomcat 服务器日志？如果有一些方法或实现可以做到这一点...... 最佳答案 PSI Probe可以列出您的 Tomcat 日志文件并显示它们的内容。您可以采用相同的方法，
我想知道是否有一些很好的免费网站性能分析工具，特别是前端。这主要是关于Javascript的。 现有工具(例如 Google Pagespeed)的问题在于它不适用于我的应用程序。在进入我的应用程序之
我曾经遇到一个 MySQL 前端应用程序，它在父行中显示外部链接行，例如，如果 Client 表有一个指向 Suburb 表的外键: (来源:vb123.com) 您知道可以执行此操作的任何前端吗？
我正在建立一个带有管理区域的网上商店来管理产品。在管理区域中，所有产品都是可见的，但在网上商店中，只有数据库表中标记为 active = 1 的产品是可见的。 我正在使用 Silex 并将存储库注册为
有可能在 C# 中制作 GUI，但在 C 或 C++ 中制作实际程序。 比如说我想制作一个聊天应用程序。我希望界面在 C# 中。但我想用 C 编写所有实际代码。这可能吗？ 我找到了 http://ww
对于我自己的教育，我很好奇编译器使用哪个 C++ 前端和后端。您能告诉我以下技术在哪里使用以及它们有哪些标志/优势(如果有的话)？ Open64 - 它是后端、前端还是两者兼而有之？哪些编译器使用它？
我是一名优秀的程序员,十分优秀！