[發明專利]一種前端大數據樹形結構展示方法

在審

• 申請號: 201910971377.4
• 申請日: 2019-10-14
• 公開（公告）號: CN110825382A
• 公開（公告）日: 2020-02-21
• 發明（設計）人: 鄭勝偉
• 申請（專利權）人: 紫光云（南京）數字技術有限公司
• 主分類號: G06F8/41
• 分類號: G06F8/41;G06F16/901;G06F16/958
• 代理公司: 暫無信息
• 代理人: 暫無信息

本發明公開了一種前端大數據樹形結構展示方法。涉及計算機技術領域。包括以下步驟：確定需要進行前端展示樹形結構的原數據，通過遞歸組件將原數據轉換成DOM結構的扁平數組；獲取根節點DOM，并分成兩個子節點，兩個字節點都是絕對定位，為了在滾動時避免數據的更改回頭觸發滾動事件；通過獲取兩個節點高度、以及滾動條位置，獲取展示虛擬列表長度，計算出需要展示的起始節點，以及結束節點。本發明通過將樹形結構樹進行扁平化管理，通過空間來換時間，達到快速渲染效果；和建立虛擬顯示長度，減少渲染節點數量，達到大數據量渲染效果。

技術領域

本發明屬于計算機技術領域，特別是涉及一種前端大數據樹形結構展示方法。

背景技術

隨著信息化技術的發展，各種信息化的web應用系統越來越多。用樹形結構展現數據在web應用中有著很廣泛的應用，如用于顯示帶有上下級關系的組織結構和用戶關系、用于顯示層級的菜單等等。樹形結構能最直觀地呈現出數據間的父子關系。

樹形結構最基本的單元是節點，一個常見的樹形結構包括根節點、分支節點和葉子節點。在客戶端應用程序中一般通過使用的開發語言提供的樹形控件來實現，而在web應用程序中因為沒有相應的控件，需要采用其它如JavaScript、CSS等頁面技術來實現。前端展示過程中，用的比較多的是遞歸版tree，將棧數據的讀取交給解析器(引擎)來完成，遞歸版tree渲染存在著性能問題(基于10000個節點數據):script耗時執行超過8s—耗時主要是在實例創建上面(一般展示需要在3s內)；render耗時主要集中在Recalculate Style、Layout—主要是界面顯示樣式，有10000個節點需要渲染10000次；DOM結構節點數不好控制—DOM不僅有縱向的結構也同時有嵌套的結構。

發明內容

本發明的目的在于提供一種前端大數據樹形結構展示方法，通過將樹形結構樹進行扁平化管理，通過空間來換時間，達到快速渲染效果；和建立虛擬顯示長度，減少渲染節點數量，達到大數據量渲染效果，解決了現有的render耗時主要集中在RecalculateStyle、Layout—主要是界面顯示樣式，有10000個節點需要渲染10000次；DOM結構節點數不好控制的問題。

為解決上述技術問題，本發明是通過以下技術方案實現的：

本發明為一種前端大數據樹形結構展示方法，包括以下步驟：

確定需要進行前端展示樹形結構的原數據，通過遞歸組件將原數據轉換成DOM結構的扁平數組；

獲取根節點DOM，并分成兩個子節點，兩個字節點都是絕對定位，為了在滾動時避免數據的更改回頭觸發滾動事件；

通過獲取兩個節點高度、以及滾動條位置，獲取展示虛擬列表長度，計算出需要展示的起始節點，以及結束節點。

進一步地，所述前端樹形結構展示主要包含了后端數據獲取、樹形節點實例化、樹形節點樣式渲染。

進一步地，所述遞歸組件為解析器引擎。

進一步地，所述兩個子節點分別為fui-tree phantom和fui-tree content。

本發明具有以下有益效果：

1、本發明將樹形結構樹進行扁平化管理，通過空間來換時間，達到快速渲染效果，可以支持到20w條節點，響應時間(10000個節點)從8s優化到了0.4s，改善用戶體驗，增強系統健壯性。

2、本發明通過建立虛擬顯示長度，減少渲染節點數量，達到大數據量渲染效果。

當然，實施本發明的任一產品并不一定需要同時達到以上所述的所有優點。

附圖說明