本發(fā)明涉及終端數(shù)據(jù)處理，具體涉及一種用于移動(dòng)終端的樹形組件渲染方法、裝置及存儲(chǔ)介質(zhì)。

背景技術(shù)：

1、現(xiàn)有技術(shù)中，隨著移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展，用戶對(duì)于在移動(dòng)設(shè)備上進(jìn)行復(fù)雜數(shù)據(jù)操作的需求日益增加。樹形組件作為一種常用的數(shù)據(jù)展示和操作形式，在web端的應(yīng)用已經(jīng)相當(dāng)成熟。然而，由于移動(dòng)端界面的限制和交互方式的特殊性，如果直接將傳統(tǒng)的樹形組件技術(shù)應(yīng)用在移動(dòng)端中面臨諸多挑戰(zhàn)，如性能問題（導(dǎo)致移動(dòng)終端卡頓）、操作不便等。

2、此外，移動(dòng)終端從服務(wù)端獲取搜索結(jié)果一般都是將檢索數(shù)據(jù)獲得后再進(jìn)行渲染，導(dǎo)致渲染速度慢，且獲取的檢索結(jié)果過多，導(dǎo)致占用終端內(nèi)存過大，導(dǎo)致系統(tǒng)卡頓，影響用戶體驗(yàn)。

技術(shù)實(shí)現(xiàn)思路

1、本發(fā)明針對(duì)上述現(xiàn)有技術(shù)中一個(gè)或多個(gè)技術(shù)缺陷，提出了如下技術(shù)方案。

2、一種用于移動(dòng)終端的樹形組件渲染方法，該方法包括：

3、確定步驟，移動(dòng)終端使用api接口獲取樹形組件的節(jié)點(diǎn)數(shù)據(jù)并保存在reslist中，其中，每層的每個(gè)節(jié)點(diǎn)都具有唯一索引id、父節(jié)點(diǎn)索引parentid、根節(jié)點(diǎn)索引rootid，通過每個(gè)節(jié)點(diǎn)的唯一索引id、父節(jié)點(diǎn)索引parentid和根節(jié)點(diǎn)索引rootid確定每個(gè)節(jié)點(diǎn)的父子節(jié)點(diǎn)關(guān)系；

4、構(gòu)建步驟，通過所述父子節(jié)點(diǎn)關(guān)系構(gòu)建樹形多維數(shù)組treedatalist，所述樹形多維數(shù)組treedatalist中的每個(gè)節(jié)點(diǎn)具有一個(gè)children屬性，所述children屬性表示當(dāng)前節(jié)點(diǎn)下一層有哪些子節(jié)點(diǎn)，每個(gè)子節(jié)點(diǎn)也有一個(gè)children屬性；

5、處理步驟，將所述treedatalist進(jìn)行平鋪處理，構(gòu)建平鋪一維數(shù)組flatdatalist，給所述平鋪一維數(shù)組flatdatalist中的每個(gè)元素增加變量depthindex，depthindex表示該節(jié)點(diǎn)處于所述treedatalist的層級(jí)結(jié)構(gòu)中的第幾層，depthindex的初始值為0，遍歷所述平鋪一維數(shù)組flatdatalist中的每個(gè)元素，并基于treedatalist中確定當(dāng)前遍歷的元素，以確認(rèn)該元素處于所述treedatalist的層級(jí)結(jié)構(gòu)中的第幾層，并給depthindex賦值；

6、渲染步驟，將所述flatdatalist中的元素按照flatdatalist中的元素順序渲染到所述移動(dòng)終端的顯示頁面上進(jìn)行顯示。

7、更進(jìn)一步地，在所述渲染步驟中，頁面初始化后，默認(rèn)顯示根節(jié)點(diǎn)和第二層節(jié)點(diǎn)，接收用戶點(diǎn)擊當(dāng)前節(jié)點(diǎn)的所在行，進(jìn)行展開或折疊操作，動(dòng)態(tài)加載或隱藏下一層級(jí)的子節(jié)點(diǎn)，在點(diǎn)擊展開操作后，根據(jù)當(dāng)前層級(jí)的節(jié)點(diǎn)depthindex值請(qǐng)求所述api接口獲取下一層級(jí)的子節(jié)點(diǎn)數(shù)據(jù)并進(jìn)行加載，完成數(shù)據(jù)加載后，更新樹形結(jié)構(gòu)的treedatalist和flatdatalist，將新增的數(shù)據(jù)按順序插入到當(dāng)前節(jié)點(diǎn)的下方進(jìn)行渲染后顯示；在點(diǎn)擊收起操作后，根據(jù)當(dāng)前層級(jí)的節(jié)點(diǎn)depthindex值卸載并銷毀下一層級(jí)的子節(jié)點(diǎn)數(shù)據(jù)，更新樹形結(jié)構(gòu)的treedatalist和flatdatalist。

8、更進(jìn)一步地，所述將新增的數(shù)據(jù)按順序插入到當(dāng)前節(jié)點(diǎn)的下方進(jìn)行渲染后顯示的操作為：判斷所述新增的數(shù)據(jù)條數(shù)是否大于第一閾值，如果是，則將所述新增的數(shù)據(jù)分頁顯示，如果否，則將所述新增的數(shù)據(jù)顯示在一個(gè)頁面上，其中，分頁的數(shù)量基于所述數(shù)據(jù)條數(shù)和每頁顯示的數(shù)據(jù)條數(shù)確定。

9、更進(jìn)一步地，所述方法還包括搜索步驟：在所述樹形組件的顯示頁面的頂部展示搜索框，接收用戶輸入的關(guān)鍵詞，并將關(guān)鍵詞發(fā)送至服務(wù)端，所述服務(wù)端根據(jù)關(guān)鍵詞在數(shù)據(jù)庫中進(jìn)行模糊匹配，搜索匹配出的所有節(jié)點(diǎn)，并在搜索結(jié)果頁發(fā)送至所述移動(dòng)終端以列表的形式顯示所有的搜索結(jié)果，同時(shí)將關(guān)鍵字進(jìn)行高亮顯示，每一條搜索結(jié)果僅展示當(dāng)前匹配到的節(jié)點(diǎn)；所述用戶點(diǎn)擊搜索結(jié)果頁中的某個(gè)搜索項(xiàng)后，自動(dòng)跳轉(zhuǎn)回到樹形組件的顯示頁面，將目標(biāo)節(jié)點(diǎn)自動(dòng)滾動(dòng)到屏幕可視區(qū)域的垂直中間位置，且將目標(biāo)節(jié)點(diǎn)的所在行進(jìn)行高亮顯示，確保用戶能快速識(shí)別目標(biāo)節(jié)點(diǎn)；從搜索結(jié)果進(jìn)入樹形組件顯示頁面之后，以展開、收起和半展開狀態(tài)三種狀態(tài)對(duì)每個(gè)節(jié)點(diǎn)進(jìn)行交替顯示，如果目標(biāo)節(jié)點(diǎn)所在層級(jí)是展開狀態(tài)，則以分頁的形式展示數(shù)據(jù)以及與目標(biāo)節(jié)點(diǎn)相鄰的下一頁數(shù)據(jù)；如果目標(biāo)節(jié)點(diǎn)的子層級(jí)默認(rèn)為收起狀態(tài)，接收點(diǎn)擊操作后，呈現(xiàn)為展開狀態(tài)，以分頁形式展示下一層級(jí)的數(shù)據(jù)，如果目標(biāo)節(jié)點(diǎn)的子層級(jí)為半展開狀態(tài)，接收點(diǎn)擊操作后，當(dāng)前節(jié)點(diǎn)改為展開狀態(tài)，且清空下一層級(jí)數(shù)據(jù)，然后重新請(qǐng)求api接口，以分頁形式展示下一層級(jí)的數(shù)據(jù)。

10、更進(jìn)一步地，根據(jù)返回的搜索結(jié)果的條目數(shù)量及目標(biāo)節(jié)點(diǎn)的狀態(tài)初始化內(nèi)存大小：

11、；

12、其中，表示初始化內(nèi)存的大小，表示搜索結(jié)果的條目數(shù)量，，表示目標(biāo)節(jié)點(diǎn)的狀態(tài)對(duì)應(yīng)的值，在展開狀態(tài)時(shí)，在收起狀態(tài)時(shí)，在半展開狀態(tài)時(shí)。

13、更進(jìn)一步地，在所述顯示頁面中具有橫向滾動(dòng)條，用于基于對(duì)橫向滾動(dòng)條的拖拽操作實(shí)現(xiàn)橫向滑動(dòng)以查看節(jié)點(diǎn)的所有字段數(shù)據(jù)。

14、本發(fā)明還提出了一種用于移動(dòng)終端的樹形組件渲染裝置，該裝置包括：

15、確定單元，移動(dòng)終端使用api接口獲取樹形組件的節(jié)點(diǎn)數(shù)據(jù)并保存在reslist中，其中，每層的每個(gè)節(jié)點(diǎn)都具有唯一索引id、父節(jié)點(diǎn)索引parentid、根節(jié)點(diǎn)索引rootid，通過每個(gè)節(jié)點(diǎn)的唯一索引id、父節(jié)點(diǎn)索引parentid和根節(jié)點(diǎn)索引rootid確定每個(gè)節(jié)點(diǎn)的父子節(jié)點(diǎn)關(guān)系；

16、構(gòu)建單元，通過所述父子節(jié)點(diǎn)關(guān)系構(gòu)建樹形多維數(shù)組treedatalist，所述樹形多維數(shù)組treedatalist中的每個(gè)節(jié)點(diǎn)具有一個(gè)children屬性，所述children屬性表示當(dāng)前節(jié)點(diǎn)下一層有哪些子節(jié)點(diǎn)，每個(gè)子節(jié)點(diǎn)也有一個(gè)children屬性；

17、處理單元，將所述treedatalist進(jìn)行平鋪處理，構(gòu)建平鋪一維數(shù)組flatdatalist，給所述平鋪一維數(shù)組flatdatalist中的每個(gè)元素增加變量depthindex，depthindex表示該節(jié)點(diǎn)處于所述treedatalist的層級(jí)結(jié)構(gòu)中的第幾層，depthindex的初始值為0，遍歷所述平鋪一維數(shù)組flatdatalist中的每個(gè)元素，并基于treedatalist中確定當(dāng)前遍歷的元素，以確認(rèn)該元素處于所述treedatalist的層級(jí)結(jié)構(gòu)中的第幾層，并給depthindex賦值；

18、渲染單元，將所述flatdatalist中的元素按照flatdatalist中的元素順序渲染到所述移動(dòng)終端的顯示頁面上進(jìn)行顯示。

19、更進(jìn)一步地，在所述渲染單元中，頁面初始化后，默認(rèn)顯示根節(jié)點(diǎn)和第二層節(jié)點(diǎn)，接收用戶點(diǎn)擊當(dāng)前節(jié)點(diǎn)的所在行，進(jìn)行展開或折疊操作，動(dòng)態(tài)加載或隱藏下一層級(jí)的子節(jié)點(diǎn)，在點(diǎn)擊展開操作后，根據(jù)當(dāng)前層級(jí)的節(jié)點(diǎn)depthindex值請(qǐng)求所述api接口獲取下一層級(jí)的子節(jié)點(diǎn)數(shù)據(jù)并進(jìn)行加載，完成數(shù)據(jù)加載后，更新樹形結(jié)構(gòu)的treedatalist和flatdatalist，將新增的數(shù)據(jù)按順序插入到當(dāng)前節(jié)點(diǎn)的下方進(jìn)行渲染后顯示；在點(diǎn)擊收起操作后，根據(jù)當(dāng)前層級(jí)的節(jié)點(diǎn)depthindex值卸載并銷毀下一層級(jí)的子節(jié)點(diǎn)數(shù)據(jù)，更新樹形結(jié)構(gòu)的treedatalist和flatdatalist。

20、更進(jìn)一步地，所述將新增的數(shù)據(jù)按順序插入到當(dāng)前節(jié)點(diǎn)的下方進(jìn)行渲染后顯示的操作為：判斷所述新增的數(shù)據(jù)條數(shù)是否大于第一閾值，如果是，則將所述新增的數(shù)據(jù)分頁顯示，如果否，則將所述新增的數(shù)據(jù)顯示在一個(gè)頁面上，其中，分頁的數(shù)量基于所述數(shù)據(jù)條數(shù)和每頁顯示的數(shù)據(jù)條數(shù)確定。

21、更進(jìn)一步地，所述裝置還包括搜索單元：在所述樹形組件的顯示頁面的頂部展示搜索框，接收用戶輸入的關(guān)鍵詞，并將關(guān)鍵詞發(fā)送至服務(wù)端，所述服務(wù)端根據(jù)關(guān)鍵詞在數(shù)據(jù)庫中進(jìn)行模糊匹配，搜索匹配出的所有節(jié)點(diǎn)，并在搜索結(jié)果頁發(fā)送至所述移動(dòng)終端以列表的形式顯示所有的搜索結(jié)果，同時(shí)將關(guān)鍵字進(jìn)行高亮顯示，每一條搜索結(jié)果僅展示當(dāng)前匹配到的節(jié)點(diǎn)；所述用戶點(diǎn)擊搜索結(jié)果頁中的某個(gè)搜索項(xiàng)后，自動(dòng)跳轉(zhuǎn)回到樹形組件的顯示頁面，將目標(biāo)節(jié)點(diǎn)自動(dòng)滾動(dòng)到屏幕可視區(qū)域的垂直中間位置，且將目標(biāo)節(jié)點(diǎn)的所在行進(jìn)行高亮顯示，確保用戶能快速識(shí)別目標(biāo)節(jié)點(diǎn)；從搜索結(jié)果進(jìn)入樹形組件顯示頁面之后，以展開、收起和半展開狀態(tài)三種狀態(tài)對(duì)每個(gè)節(jié)點(diǎn)進(jìn)行交替顯示，如果目標(biāo)節(jié)點(diǎn)所在層級(jí)是展開狀態(tài)，則以分頁的形式展示數(shù)據(jù)以及與目標(biāo)節(jié)點(diǎn)相鄰的下一頁數(shù)據(jù)；如果目標(biāo)節(jié)點(diǎn)的子層級(jí)默認(rèn)為收起狀態(tài)，接收點(diǎn)擊操作后，呈現(xiàn)為展開狀態(tài)，以分頁形式展示下一層級(jí)的數(shù)據(jù)，如果目標(biāo)節(jié)點(diǎn)的子層級(jí)為半展開狀態(tài)，接收點(diǎn)擊操作后，當(dāng)前節(jié)點(diǎn)改為展開狀態(tài)，且清空下一層級(jí)數(shù)據(jù)，然后重新請(qǐng)求api接口，以分頁形式展示下一層級(jí)的數(shù)據(jù)。

22、更進(jìn)一步地，根據(jù)返回的搜索結(jié)果的條目數(shù)量及目標(biāo)節(jié)點(diǎn)的狀態(tài)初始化內(nèi)存大?。?/p>

23、；

24、其中，表示初始化內(nèi)存的大小，表示搜索結(jié)果的條目數(shù)量，，表示目標(biāo)節(jié)點(diǎn)的狀態(tài)對(duì)應(yīng)的值，在展開狀態(tài)時(shí)，在收起狀態(tài)時(shí)，在半展開狀態(tài)時(shí)。

25、更進(jìn)一步地，在所述顯示頁面中具有橫向滾動(dòng)條，用于基于對(duì)橫向滾動(dòng)條的拖拽操作實(shí)現(xiàn)橫向滑動(dòng)以查看節(jié)點(diǎn)的所有字段數(shù)據(jù)。

26、本發(fā)明還提出了一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，所述存儲(chǔ)介質(zhì)上存儲(chǔ)有計(jì)算機(jī)程序代碼，當(dāng)所述計(jì)算機(jī)程序代碼被計(jì)算機(jī)執(zhí)行時(shí)執(zhí)行上述之任一的方法。

27、本發(fā)明的技術(shù)效果在于：本發(fā)明的一種用于移動(dòng)終端的樹形組件渲染方法、裝置及存儲(chǔ)介質(zhì)，該方法包括：確定步驟s101，移動(dòng)終端使用api接口獲取樹形組件的節(jié)點(diǎn)數(shù)據(jù)并保存在reslist中，其中，每層的每個(gè)節(jié)點(diǎn)都具有唯一索引id、父節(jié)點(diǎn)索引parentid、根節(jié)點(diǎn)索引rootid，通過每個(gè)節(jié)點(diǎn)的唯一索引id、父節(jié)點(diǎn)索引parentid和根節(jié)點(diǎn)索引rootid確定每個(gè)節(jié)點(diǎn)的父子節(jié)點(diǎn)關(guān)系；構(gòu)建步驟s102，通過所述父子節(jié)點(diǎn)關(guān)系構(gòu)建樹形多維數(shù)組treedatalist，所述樹形多維數(shù)組treedatalist中的每個(gè)節(jié)點(diǎn)具有一個(gè)children屬性，所述children屬性表示當(dāng)前節(jié)點(diǎn)下一層有哪些子節(jié)點(diǎn)，每個(gè)子節(jié)點(diǎn)也有一個(gè)children屬性；處理步驟s103，將所述treedatalist進(jìn)行平鋪處理，構(gòu)建平鋪一維數(shù)組flatdatalist，給所述平鋪一維數(shù)組flatdatalist中的每個(gè)元素增加變量depthindex，depthindex表示該節(jié)點(diǎn)處于所述treedatalist的層級(jí)結(jié)構(gòu)中的第幾層，depthindex的初始值為0，遍歷所述平鋪一維數(shù)組flatdatalist中的每個(gè)元素，并基于treedatalist中確定當(dāng)前遍歷的元素，以確認(rèn)該元素處于所述treedatalist的層級(jí)結(jié)構(gòu)中的第幾層，并給depthindex賦值；渲染步驟s104，將所述flatdatalist中的元素按照flatdatalist中的元素順序渲染到所述移動(dòng)終端的顯示頁面上進(jìn)行顯示。即節(jié)點(diǎn)渲染的上下順序按照flatdatalist中的元素順序展示。本發(fā)明中，創(chuàng)造性的提出了將獲取樹形組件的節(jié)點(diǎn)數(shù)據(jù)并保存在reslist中確定父子節(jié)點(diǎn)關(guān)系后構(gòu)建樹形多維數(shù)組treedatalist，將所述treedatalist進(jìn)行平鋪處理，構(gòu)建平鋪一維數(shù)組flatdatalist，給所述平鋪一維數(shù)組flatdatalist中的每個(gè)元素增加變量depthindex，從而在渲染時(shí)，按照flatdatalist中的元素順序渲染到所述移動(dòng)終端的顯示頁面上進(jìn)行顯示，從而頁面在渲染時(shí)，不需要遞歸查詢層級(jí)關(guān)系，即可高效渲染，且有效避免了移動(dòng)終端的頁面卡頓，本發(fā)明中，基于當(dāng)前節(jié)點(diǎn)的狀態(tài)進(jìn)行展開或折疊操作，動(dòng)態(tài)加載或隱藏下一層級(jí)的子節(jié)點(diǎn)，在完成數(shù)據(jù)加載后，更新樹形結(jié)構(gòu)的treedatalist和flatdatalist，將新增的數(shù)據(jù)按順序插入到當(dāng)前節(jié)點(diǎn)的下方進(jìn)行渲染后顯示，在點(diǎn)擊收起操作后，根據(jù)當(dāng)前層級(jí)的節(jié)點(diǎn)depthindex值卸載并銷毀下一層級(jí)的子節(jié)點(diǎn)數(shù)據(jù)，更新樹形結(jié)構(gòu)的treedatalist和flatdatalist，本發(fā)明中的treedatalist和flatdatalist是根據(jù)用戶的操作動(dòng)態(tài)更新的，從而相應(yīng)的內(nèi)存也是隨之開辟或釋放，從而提高了移動(dòng)終端的內(nèi)存利用效率；本發(fā)明中，為了提高渲染效率，將移動(dòng)終端獲得的檢索結(jié)果與樹形組件顯示相結(jié)合，每一條搜索結(jié)果僅展示當(dāng)前匹配到的節(jié)點(diǎn)，并以展開、收起和半展開狀態(tài)三種狀態(tài)對(duì)每個(gè)節(jié)點(diǎn)進(jìn)行交替顯示，從而方便的對(duì)搜索結(jié)果進(jìn)行展示，由于將搜索結(jié)果與樹形組件相結(jié)合，提高了搜索結(jié)果渲染的效率，改進(jìn)了用戶體驗(yàn)。