表格集算表高效能原理：揭秘純前端百萬行資料秒級響應的魔法

葡萄城技术团队發表於2024-07-17

最新技術資源（建議收藏）
https://www.grapecity.com.cn/resources/

集算表（Table Sheet）是一個具備高效能渲染、資料繫結功能、公式計算能力的資料表格，透過全新構建的關係型資料管理器結合結構化公式，在高效能表格的基礎上提供排序、篩選、樣式、行列凍結、自動更新、單元格更新等功能。

什麼是集算表（Table Sheet）?

集算表是一個具有網路狀行為和電子表格使用者介面的快速資料繫結表的檢視。

眾所周知Excel的工作表（Work Sheet）是一個自由式佈局，基於單元格（Cell Base）的表格，適用於一些鬆散式的資料佈局展示，佈局上來說非常靈活，但對於固定格式的大批次資料展示，不具備優勢。

集算表不同於Excel的工作表，它是一個基於列（Column Base）的網狀表格（Grid），適用於展示規則資料。同時它還具備了Excel工作表（Work Sheet）的使用者介面和部分常見操作。並且支援Excel的部分計算功能。同時結合資料繫結的功能，對於大量固定格式的資料（例如資料庫的表格）可以快速在前端進行展示。

集算表的特點正如它的名字的三個字：集，算，表：

集（Data Manager）：

集的意思就是資料集記和管理。集算表在前端構建了一個叫做Data Manager的資料管理模組。該模組可以簡單理解為一個前端的資料庫，Data Manager負責與遠端的資料中心進行通訊，拉取遠端的資料。在前端處理資料，例如資料表的定義，表間關係等。同時Data Manager還負責處理資料的變形，例如分組，切片，排序，過濾等。

算（Calculation Engine）：

集算表本身基於網路結構化資料的計算引擎Calculation Engine。Calculation Engine定義不同的上下文計算層級，不同與SpreadJS中工作表（Work Sheet）基於單元格或者區域（Range）的計算層級，集算表（Table Sheet）的上下文層級是基於行級，組級，資料級。

同時透過Calculation Engine的計算串聯，使得集算表（Table Sheet）與工作表（Work Sheet）之間可以進行資料串聯。這使得計算表不是一個獨立存在，它可以與工作表結合使用，相互配合以適應更多的需求。

表（Table 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上，這是為了更方便的去支援集算表與普通工作表之間的公式引用。這使得集算表與普通工作表之間產生“化學效應“，例如下面的示例：

在建立了集算表之後可以在普通的工作表中直接透過公式引入集算表的表格中的資料。這樣可以做到透過集算表對資料進行展示，同時透過工作表的功能，對展示的結果進行資料分析。