[發(fā)明專利]樹組件彈窗的渲染方法及裝置

在審

• 申請?zhí)枺?/td>: 202010583646.2
• 申請日: 2020-06-23
• 公開（公告）號: CN111949905A
• 公開（公告）日: 2020-11-17
• 發(fā)明（設(shè)計）人: 李金鵬
• 申請（專利權(quán)）人: 貝殼技術(shù)有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957;G06F9/451
• 代理公司: 北京路浩知識產(chǎn)權(quán)代理有限公司 11002
• 代理人: 張睿

本發(fā)明實施例提供一種樹組件彈窗的渲染方法及裝置，其中方法包括：響應(yīng)于節(jié)點展開指令，確定待展開的數(shù)據(jù)節(jié)點；節(jié)點展開指令中指示待展開的數(shù)據(jù)節(jié)點；更新與待展開的數(shù)據(jù)節(jié)點處于同一層級的其他數(shù)據(jù)節(jié)點的狀態(tài)均為隱藏狀態(tài)，隱藏其他數(shù)據(jù)節(jié)點的子孫節(jié)點；將待展開的數(shù)據(jù)節(jié)點的狀態(tài)由隱藏狀態(tài)更新為展示狀態(tài)，在待展開的數(shù)據(jù)節(jié)點下顯示待展開的數(shù)據(jù)節(jié)點的所有子節(jié)點。本發(fā)明實施例提升了樹組件彈窗的渲染速度。

技術(shù)領(lǐng)域

本發(fā)明涉及數(shù)據(jù)處理技術(shù)領(lǐng)域，更具體地，涉及樹組件彈窗的渲染方法及裝置。

背景技術(shù)

React技術(shù)棧、vue技術(shù)棧以及angular技術(shù)棧是前端(網(wǎng)頁端)目前主流的框架，在業(yè)界中使用非常廣泛，這三種技術(shù)棧都存在兩個特點，1、數(shù)據(jù)驅(qū)動視圖，2、具有虛擬dom這一層的存在。基于以上兩點，大數(shù)據(jù)量的渲染問題在上述三種技術(shù)棧中會體現(xiàn)的更明顯：包含樹組件(具體場景例如銀行樹、組織樹)的彈窗在大數(shù)據(jù)量下(4000以上的節(jié)點數(shù))時操作會非常的卡頓，彈窗完全展開甚至需要5秒鐘時間，影響用戶的使用體驗。

針對該技術(shù)棧該場景下的優(yōu)化，業(yè)界只著重于分析問題的原因，并且只給出一些大的優(yōu)化的方向，沒有給出具體的、可執(zhí)行的方案。

發(fā)明內(nèi)容

本發(fā)明實施例提供一種克服上述問題或者至少部分地解決上述問題的樹組件彈窗的渲染方法及裝置。

第一個方面，本發(fā)明實施例提供一種樹組件彈窗的渲染方法，包括：

響應(yīng)于節(jié)點展開指令，確定待展開的數(shù)據(jù)節(jié)點；所述節(jié)點展開指令中指示待展開的數(shù)據(jù)節(jié)點；

更新與所述待展開的數(shù)據(jù)節(jié)點處于同一層級的其他數(shù)據(jù)節(jié)點的狀態(tài)均為隱藏狀態(tài)，隱藏所述其他數(shù)據(jù)節(jié)點的子孫節(jié)點；

將所述待展開的數(shù)據(jù)節(jié)點的狀態(tài)由隱藏狀態(tài)更新為展示狀態(tài)，在所述待展開的數(shù)據(jù)節(jié)點下顯示所述待展開的數(shù)據(jù)節(jié)點的所有子節(jié)點。

進一步地，所述響應(yīng)于節(jié)點展開指令，確定待展開的數(shù)據(jù)節(jié)點的步驟之前還包括：

構(gòu)建樹組件彈窗，將所述樹組件彈窗中預(yù)設(shè)層級的數(shù)據(jù)節(jié)點的狀態(tài)設(shè)置為默認展開狀態(tài)，將預(yù)設(shè)層級的數(shù)據(jù)節(jié)點之外的數(shù)據(jù)節(jié)點的狀態(tài)更新為隱藏狀態(tài)；所述預(yù)設(shè)層數(shù)小于樹組件彈窗中的總層數(shù)；

響應(yīng)于彈窗開啟指令，將所述樹組件彈窗中的所述預(yù)設(shè)層級的數(shù)據(jù)節(jié)點的默認展開狀態(tài)更新為展開狀態(tài)，開啟彈窗界面，在狀態(tài)為展開狀態(tài)的數(shù)據(jù)節(jié)點下顯示所有子節(jié)點。

進一步地，本發(fā)明實施例的樹組件彈窗的渲染方法，還包括：

響應(yīng)于彈窗關(guān)閉指令，操作dom文檔對象模型將彈窗界面關(guān)閉，之后通過setState方法對樹組件彈窗中的數(shù)據(jù)節(jié)點進行更新。

進一步地，所述通過setState方法對樹組件彈窗中的數(shù)據(jù)節(jié)點進行更新，具體為：

將所述樹組件彈窗中預(yù)設(shè)層級的數(shù)據(jù)節(jié)點的狀態(tài)更新為默認展開狀態(tài)，將預(yù)設(shè)層級的數(shù)據(jù)節(jié)點之外的數(shù)據(jù)節(jié)點的狀態(tài)更新為隱藏狀態(tài)。

進一步地，所述更新與所述待展開的數(shù)據(jù)節(jié)點處于同一層級的其他數(shù)據(jù)節(jié)點的狀態(tài)均為隱藏狀態(tài)，具體為：

確定與所述待展開的數(shù)據(jù)節(jié)點處于同一層級的其他數(shù)據(jù)節(jié)點的狀態(tài)；

若存在處于展示狀態(tài)的其他數(shù)據(jù)節(jié)點，則將所述處于展示狀態(tài)的其他數(shù)據(jù)節(jié)點的狀態(tài)更新為隱藏狀態(tài)。

進一步地，所述樹組件彈窗中的數(shù)據(jù)節(jié)點具有唯一標識和父節(jié)點屬性；父節(jié)點屬性用于表征數(shù)據(jù)節(jié)點的父節(jié)點的唯一標識；

相應(yīng)的，所述與所述待展開的數(shù)據(jù)節(jié)點處于同一層級的其他數(shù)據(jù)節(jié)點，根據(jù)與所述待展開的數(shù)據(jù)節(jié)點具有相同的父節(jié)點屬性確定。

第二個方面，本發(fā)明實施例提供一種樹組件彈窗的渲染裝置，包括：