開源 UI 庫中，唯一同時實現(xiàn)了大表格虛擬化和樹表格的 Table 組件

shenhualong 發(fā)布于2019-08-23 14:52 / 2209人閱讀

摘要：截止到目前年月日為止，開源庫中沒有找到可以支持的組件，所以在最新的版本中支持這一特性。所謂的大表格虛擬化，其實就是為表格設置一個較大的數(shù)據(jù)比如條數(shù)據(jù)，然后虛擬一個表格隱藏掉不需要顯示的數(shù)據(jù)。在組件之前的版本中，渲染的樹形表格的結構是一棵。

背景

有這樣一個需求，一位 React Suite（以下簡稱 rsuite）的用戶，他需要一個 Table 組件能夠像 Jira Portfolio 一樣，支持樹形數(shù)據(jù)，同時需要支持大數(shù)據(jù)渲染。截止到目前（2019年1月18日）為止，開源 UI 庫中沒有找到可以支持的組件，所以 rsuite 在最新的版本中支持這一特性。

接下來，我們看一下 rsuite 中是怎么支持這兩個功能？

大表格虛擬化

首先，我們看一下支持大數(shù)據(jù)渲染，在頁面中渲染過多的 DOM 元素會帶來性能問題，必須得有一種解決方案去優(yōu)化它，我們暫且叫做大表格虛擬化。

所謂的大表格虛擬化，其實就是為表格設置一個較大的數(shù)據(jù)（比如 10000 條數(shù)據(jù)），然后虛擬一個表格隱藏掉不需要顯示的數(shù)據(jù)。

為了解決讓瀏覽器渲染的大量 DOM 時候出現(xiàn)的性能問題，我們不能把 10000 條數(shù)據(jù)都渲染到頁面，采用一種方式，只渲染可視范圍內數(shù)據(jù)。同時為表格設置一個滾動條，只有在滾動到需要顯示的區(qū)域時候才渲染該區(qū)域的數(shù)據(jù)，減少的 DOM 數(shù)量。

預覽地址

以上這是一個 10000 條數(shù)據(jù)的 Table，渲染后的 HTML 結構是:

我們可以看到在 Table 中只渲染了 14 個 rs-table-row ，其中第一個和最后一個是沒有 children, 只是一個擁有高度的占位符。每一個 rs-table-row 都是絕對定位，所以即使 Table 中刪除一個 Row, 或者新增一個 Row ,也不會改變其他 Row 的位置。在這樣的基礎上，通過獲取滾動條的滾動的位置，就很容易判斷當前 Row 的 top 值是否在 Table 的可視范圍內，同時更新所有的 Row。

很多優(yōu)秀的庫都實現(xiàn)了這樣的功能，原理基本一致，比如 react-virtualized 就提供 Table 組件，但是他不支持 Tree。

樹形表格

在表格中展示樹形數(shù)據(jù)的需求，我們見得比較多就像甘特圖表格展示那樣。它有子父層級關系，可以展開子節(jié)點。

這樣一個表格，很多 Table 組件都支持，但是如果同時需要支持虛擬化就相對比較麻煩，因為在展開關閉節(jié)點的時候需要重新計算顯示的 DOM 以及設置滾動條的位置。

在 rsuite Table 組件之前的版本中，渲染的樹形表格的 DOM 結構是一棵 Tree。所以首先需要把 Tree 拍平，轉換一個一維數(shù)組，為每一個節(jié)點設置父節(jié)點，通過父節(jié)點的深度渲染 Tree 節(jié)點的相對位置。然后就比較好處理，只需要在點擊展開關閉節(jié)點按鈕的時候，處理好數(shù)據(jù)的過濾。

安裝與使用

rsuite 的 Table 組件的設計，對開發(fā)還是非常方便，通過

、、、組件定義結構，通過賦值data 屬性渲染表格數(shù)據(jù)。

安裝

npm install rsuite --save

如果你在項目只希望用到 Table, 不想安裝整個 rsuite 庫，你可以多帶帶安裝 rsuite-table

示例代碼：

import { Table } from "rsuite";

const { Column, HeaderCell, Cell } = Table;
const data = [{ id: 1, name: "foobar", email: "[email protected]" }];

ReactDOM.render(

編號姓名郵箱

); 最后

最后，對于一個成熟的 Table 組件怎么能只有這點功能，所以它還支持：

自定義調整列寬

鎖定列

自動換行

排序

分頁

編輯

合并單元格

自定義單元格

自動列寬

可展開行

剩下唯一的問題，就是您是否在項目中嘗試它。

云服務器 GPU云服務器 DIV和TABLE表格制作 js清空table表格數(shù)據(jù) vuejs表格組件 bootstrap表格組件

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/101266.html

從源碼看Element UI Table組件實現(xiàn)思路

摘要：接下來來看一下是如何編寫一個組件的，在看源碼之前，首先還是要對他的組件的大致功能有一個了解，這樣我們在看源碼的時候才會知道這一段大概實現(xiàn)了什么功能。最后我實現(xiàn)的功能文檔以及最終的一個樣例在你實現(xiàn)一個組件過程中，一定要注意一下幾點將代碼模塊化并且分離。如果你將大量的邏輯或者是代碼都放在鉤子函數(shù)中（比如mounted），那么寫出來的組件代碼將非常丑陋，這樣子寫出的代碼也往往難以維護。...

moven_j 2019-08-20 16:32 評論0 收藏0
vue封裝element-ui的table組件,靈活配置表頭實現(xiàn)表格內編輯，按鈕，鏈接等功能。

摘要：一封裝的組件定義表格高度全屏增加前臺分頁功能。表格內編輯后，自動選中該行。單元格內數(shù)據(jù)樣式單元格內按鈕，可多個。觸發(fā)組件綁定函數(shù)，參數(shù)按鈕名稱，按鈕樣式，按鈕事件標識。單元格是否可點擊的判斷函數(shù)，可進行復雜的函數(shù)判斷。 vue-bxz-table 一、封裝element-ui的table組件：定義表格高度全屏增加前臺分頁功能。自定義表頭，循環(huán)輸出整體表結構。表格內編輯（輸入框...

henry14 2019-08-26 13:30 評論0 收藏0
jsu系列之表格組件 ---- jsu.Table

摘要：作者注是基于擴展的原生表格插件，設計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發(fā)過程中遇到的問題和解決思路，歡迎討論和指正。作者注：jsu.Table是基于jQuery擴展的原生表格插件，設計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到jQuery版本因此在此造輪子）。本文將記錄jsu系列所有組件開發(fā)過程...

everfly 2019-08-23 14:05 評論0 收藏0
jsu系列之表格組件 ---- jsu.Table

摘要：作者注是基于擴展的原生表格插件，設計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發(fā)過程中遇到的問題和解決思路，歡迎討論和指正。作者注：jsu.Table是基于jQuery擴展的原生表格插件，設計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到jQuery版本因此在此造輪子）。本文將記錄jsu系列所有組件開發(fā)過程...

張巨偉 2019-08-30 15:54 評論0 收藏0
jsu系列之表格組件 ---- jsu.Table

摘要：作者注是基于擴展的原生表格插件，設計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發(fā)過程中遇到的問題和解決思路，歡迎討論和指正。作者注：jsu.Table是基于jQuery擴展的原生表格插件，設計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到jQuery版本因此在此造輪子）。本文將記錄jsu系列所有組件開發(fā)過程...

soasme 2019-08-02 16:07 評論0 收藏0