[發明專利]一種Web瀏覽器下的大數據量樹形結構渲染系統及方法

有效

• 申請號: 202210440881.3
• 申請日: 2022-04-26
• 公開（公告）號: CN114547525B
• 公開（公告）日: 2022-08-05
• 發明（設計）人: 歐陽建龍;張曉宇;石丹杰
• 申請（專利權）人: 成都瑞華康源科技有限公司
• 主分類號: G06F16/958
• 分類號: G06F16/958;G06F16/2455;G06F16/25
• 代理公司: 成都正德明志知識產權代理有限公司 51360
• 代理人: 楊木梅

1.一種Web瀏覽器下的大數據量樹形結構渲染方法，其特征在于，該方法基于一種Web瀏覽器下的大數據量樹形結構渲染系統，系統包括相互連接的客戶端和服務端；

所述客戶端包括渲染模塊、數據模塊、緩存模塊和中央處理模塊，所述中央處理模塊分別與所述渲染模塊、數據模塊和緩存模塊連接；所述服務端設置有服務端系統；所述服務端系統與所述數據模塊連接；

所述數據模塊用于發送http請求，還用于將獲取服務端的數據處理成所需數據格式的數據；所述緩存模塊用于生成緩存數據；所述中央處理模塊用于獲取數據模塊的真實數據和緩存模塊的緩存數據，調用比對算法獲取比對結果，根據比對結果的差異化數據構建虛擬DOM樹數據；所述渲染模塊用于接收虛擬DOM樹數據，構建真實DOM樹結構；所述服務端系統用于傳輸客戶端所需數據；

所述渲染模塊包括相互連接的面包屑組件和分頁表格組件；所述面包屑組件用于構建真實DOM樹結構，所述分頁表格組件用于進行分頁查詢虛擬DOM樹數據生成分頁表格；

方法包括以下步驟：

S1、通過數據模塊調用服務端系統接口獲取服務端系統數據，得到真實數據；

S2、通過中央處理模塊獲取真實數據和緩存模塊的緩存數據，調用比對算法獲取比對結果構建虛擬DOM樹數據；

S3、根據虛擬DOM樹數據調用渲染模塊構建真實DOM樹結構，完成渲染Web瀏覽器界面；

所述步驟S2中，緩存模塊生成緩存數據的方法具體為：

當數據模塊發送真實數據時，控制緩存模塊通過indexedDB數據庫獲取所述真實數據，并根據所述真實數據更新當前的緩存數據，生成新的緩存數據；

所述步驟S2包括以下分步驟：

S21、通過中央處理模塊調用緩存模塊獲取緩存數據，再調用數據模塊獲取真實數據；

S22、基于緩存數據和真實數據，通過比較方法得到比較一致結果或差異化數據；

S23、當比較方法得到差異化數據時，根據差異化數據構建虛擬DOM樹數據；

所述步驟S22具體為：

將緩存數據和真實數據通過Unicode編碼生成字符串數組格式的緩存數據和字符串數組格式的真實數據，并建立字符串數組格式的差異化數據；所述比較方法具體為：

查詢字符串數組格式的真實數據中的每條字符串數據是否存在字符串數組格式的緩存數據中；若否，則將所述字符串數據保存至差異化數據，并其保存上一條字符串數據的主鍵ID；若是，則得到所述字符串數據的比較一致結果。

2.根據權利要求1所述的Web瀏覽器下的大數據量樹形結構渲染方法，其特征在于，所述步驟S23具體為：

當比較方法得到差異化數據時，將其上一條主鍵ID插入所述緩存數據中的指定數據后，得到更新的緩存數據，根據更新的緩存數據構建虛擬DOM樹數據。

3.根據權利要求2所述的Web瀏覽器下的大數據量樹形結構渲染方法，其特征在于，所述步驟S3包括以下分步驟：

S31、基于輸入渲染模塊的虛擬DOM樹數據，通過分頁表格組件進行分頁查詢得到分頁表格；

S32、根據分頁表格構建真實DOM樹結構，并渲染Web瀏覽器界面。

4.根據權利要求3所述的Web瀏覽器下的大數據量樹形結構渲染方法，其特征在于，所述步驟S32具體為：

將分頁表格的行數據推送至面包屑組件，進而新增面包屑組件中的節點路徑，根據面包屑組件中的節點路徑構建真實DOM樹結構，并渲染Web瀏覽器界面；

其中，新增面包屑組件中的節點路徑的方法具體為：

根據分頁表格組件的行數據查詢面包屑組件中的父節點ID下的子節點ID，判斷是否存在對應的子節點ID；

若是，則根據所述分頁表格組件的行數據更新所述子節點ID數據；若否，則新增面包屑組件中的節點路徑。