[發明專利]基于滾動條定位的快速渲染表格數據的方法

有效

• 申請號: 201711286609.X
• 申請日: 2017-12-07
• 公開（公告）號: CN108197153B
• 公開（公告）日: 2022-03-25
• 發明（設計）人: 王成旺;程金芳;王春平
• 申請（專利權）人: 南京富士通南大軟件技術有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957
• 代理公司: 南京鐘山專利代理有限公司 32252
• 代理人: 戴朝榮

本發明公開了一種基于滾動條定位的快速渲染表格數據的方法，包括根據表格內總數據條數和表格中一條數據的高度，計算總數據在表格中需要占用的高度：根據垂直滾動條距離表格頂端的高度計算出與垂直滾動條頂端在同一水平線上的數據在總數據中的索引；設定表格需要緩存的數據塊數；根據表格需要緩存的數據塊數計算出以當前表格顯示頁為中心塊，位于當前表格顯示頁上方的未顯示的需要緩存的數據塊數和當前表格顯示頁下方的未顯示的需要緩存的數據塊數；計算當前表格需要渲染的全部緩存數據條數的開始索引S和結束索引E，在表格中渲染第S至E條的數據；本發明能夠有效改善表格的渲染速度，提升用戶體驗。

技術領域

本發明涉及Web前端技術領域，尤其一種基于滾動條定位的快速渲染表格數據的方法。

背景技術

在Web頁面中，表格是一種友好的可視化交流形式，又是一種便捷的組織整理數據的手段。被廣泛應用于各種場合。

但是,當表格中的數據量超過一定規模后(1000以上)，瀏覽器的GUI渲染引擎對表格渲染時間會大大增加(5~7秒以上)，對用戶體驗影響很大。如何在不降低用戶體驗的前提下，加快表格的渲染速度，是各Web前端開發者必須要解決的問題。

現有的解決方法，主要是通過表格分頁顯示，或者是在渲染過程中顯示過渡動畫，來回避該問題。但是，使用分頁的方式，無法迅速地在大范圍區間內進行數據的瀏覽。使用過渡動畫的方式，在渲染結束、動畫消失前，用戶無法看到表格中的數據且無法對表格進行任何操作。

發明內容

本發明所要解決的技術問題是針對上述現有技術的不足提供一種基于滾動條定位的快速渲染表格數據的方法，本基于滾動條定位的快速渲染表格數據的方法旨在解決無法使用分頁或動畫回避渲染速度緩慢時，用戶體驗會大大降低的問題。

為實現上述技術目的，本發明采取的技術方案為：

一種基于滾動條定位的快速渲染表格數據的方法，包括以下步驟：

步驟1：根據表格內總數據條數和表格中一條數據的高度，計算總數據在表格中需要占用的高度：

H = N * h；

其中，N為表格內總數據條數，h為表格內一條數據的高度，H為總數據在表格中需要占用的高度，將總數據在表格中需要占用的高度H設置為表格中垂直滾動條的占用高度；

步驟2：根據垂直滾動條距離表格頂端的高度計算出與垂直滾動條頂端在同一水平線上的數據在總數據中的索引：

I = X / h；

其中，X為垂直滾動條距離表格頂端的高度， I為與垂直滾動條頂端在同一水平線上的數據在總數據中的索引；

步驟3：以當前表格顯示頁顯示的數據條數為一個數據塊，設定表格需要緩存的數據塊數；

步驟4：根據表格需要緩存的數據塊數計算出以當前表格顯示頁為中心塊，位于當前表格顯示頁上方的未顯示的需要緩存的數據塊數和當前表格顯示頁下方的未顯示的需要緩存的數據塊數：

p = (P – 1) / 2；

其中P為表格需要緩存的數據塊數，p為當前表格顯示頁上方的未顯示的需要緩存的數據塊數或當前表格顯示頁下方的未顯示的需要緩存的數據塊數；

步驟5：計算當前表格需要渲染的全部緩存數據條數的開始索引和結束索引：

S = I – p * V, S小于0時，S = 0 ；

E = I + (p + 1) * V - 1, S大于N時，S = N；

其中，V為當前表格顯示頁顯示的數據條數，S為當前表格需要渲染的全部緩存數據條數的開始索引，E為當前表格需要渲染的全部緩存數據條數的結束索引；