本發(fā)明涉及一種標(biāo)簽頁分組管理系統(tǒng)及方法，具體地，涉及一種基于樹狀結(jié)構(gòu)的標(biāo)簽頁分組管理系統(tǒng)及方法。

背景技術(shù)：

在同一個(gè)網(wǎng)頁或WEB應(yīng)用界面中，查看基于樹狀結(jié)構(gòu)的內(nèi)容時(shí)，由于這種層級結(jié)構(gòu)的目錄列表通常較多，查看這種復(fù)雜層級的內(nèi)容就會(huì)非常繁雜和冗余；為了提高用戶查看切換標(biāo)簽的效率和易用性，本發(fā)明提供了層級分析模塊、層級管理模塊、標(biāo)簽頁管理模塊和標(biāo)簽頁分組分層顯示組件等，實(shí)現(xiàn)基于打開內(nèi)容的上下文關(guān)系及系統(tǒng)內(nèi)部頁面結(jié)構(gòu)關(guān)系，將所打開的新標(biāo)簽頁分配到已打開的同類標(biāo)簽頁分組中或創(chuàng)建新的標(biāo)簽頁分組，并在分組中保持該內(nèi)容在系統(tǒng)中的樹狀結(jié)構(gòu)關(guān)系。

技術(shù)實(shí)現(xiàn)要素：

針對現(xiàn)有技術(shù)中的缺陷，本發(fā)明的目的是提供一種基于樹狀結(jié)構(gòu)的標(biāo)簽頁分組管理系統(tǒng)及方法，同時(shí)并清晰的查看多個(gè)標(biāo)簽頁，提高用戶查看切換標(biāo)簽的效率和易用性。

根據(jù)本發(fā)明的一個(gè)方面，本發(fā)明提供一種基于樹狀結(jié)構(gòu)的標(biāo)簽頁分組管理系統(tǒng)，其特征在于，包括：

鏈接路由攔截模塊：攔截用戶點(diǎn)擊鏈接和路由切換可能需要在tab頁面中顯示的操作，將頁面內(nèi)容存儲(chǔ)于標(biāo)簽頁面內(nèi)容存儲(chǔ)模塊中；

標(biāo)簽頁頁面內(nèi)容存儲(chǔ)模塊：用于存儲(chǔ)鏈接或路由打開時(shí)所對應(yīng)的具體頁面內(nèi)容，便于標(biāo)簽切換后快速顯示標(biāo)簽頁內(nèi)容；

標(biāo)簽頁頁面內(nèi)容控制模塊：根據(jù)標(biāo)簽頁層級結(jié)構(gòu)控制模塊的輸出，控制頁面上需要渲染顯示的標(biāo)簽頁內(nèi)容；

標(biāo)簽頁頁面內(nèi)容渲染模塊：運(yùn)用HTML、CSS和JS技術(shù)，將標(biāo)簽頁中頁面內(nèi)容渲染于頁面中標(biāo)簽頁內(nèi)容區(qū)域；

路由層級提取模塊：根據(jù)鏈接或路由信息，提取該鏈接或地址對應(yīng)的層級關(guān)系，用于后繼的層級分析；

總體層級結(jié)構(gòu)抽取模塊：頁面中初次點(diǎn)擊鏈接或路由切換時(shí)，根據(jù)鏈接或路由信息，遍歷系統(tǒng)中所有需要在標(biāo)簽頁中顯示的頁面地址，抽取出頁面層級關(guān)系數(shù)據(jù)；

總體層級結(jié)構(gòu)分析模塊：對抽取出的層級關(guān)系數(shù)據(jù)進(jìn)行分析整理，將數(shù)據(jù)格式轉(zhuǎn)換為可供界面標(biāo)簽頁面顯示的具有層級關(guān)系的JSON數(shù)據(jù)格式；

層級結(jié)構(gòu)存儲(chǔ)模塊：用于存儲(chǔ)系統(tǒng)所有層級結(jié)構(gòu)JSON數(shù)據(jù)，以便于分析和控制樹狀結(jié)構(gòu)的標(biāo)簽頁分組；

標(biāo)簽頁層級分析模塊：將當(dāng)前鏈接或路由所對應(yīng)的路由層級與層級結(jié)構(gòu)存儲(chǔ)模塊中的總體層級結(jié)構(gòu)進(jìn)行對比分析，以確定當(dāng)前節(jié)點(diǎn)所在層級；

標(biāo)簽頁層級規(guī)則引擎模塊：定義標(biāo)簽頁根據(jù)樹狀結(jié)構(gòu)進(jìn)行分組展示的規(guī)則和算法，確定打開的節(jié)點(diǎn)在標(biāo)簽欄上顯示的方式，如新增標(biāo)簽、組合標(biāo)簽、在標(biāo)簽分組中增加下級菜單；

標(biāo)簽頁層級管理模塊：根據(jù)標(biāo)簽頁層級規(guī)則引擎模塊中的標(biāo)簽打開規(guī)則，重新構(gòu)建標(biāo)簽欄中的標(biāo)簽數(shù)據(jù)及其相關(guān)標(biāo)識(shí)信息；

標(biāo)簽頁層級結(jié)構(gòu)控制模塊：根據(jù)標(biāo)簽欄中的標(biāo)簽數(shù)據(jù)及相關(guān)標(biāo)識(shí)信息，控制頁面中標(biāo)簽頁的顯示、隱藏、分組、切換；

標(biāo)簽頁渲染模塊：在頁面標(biāo)簽欄區(qū)域中渲染需要顯示的標(biāo)簽、標(biāo)簽分組、標(biāo)簽狀態(tài)界面元素；

頁面交互控制模塊：偵聽用戶對標(biāo)簽頁、菜單各類界面元素的操作，響應(yīng)用戶的操作并及時(shí)控制頁面元素出現(xiàn)相應(yīng)的效果或改變。

本發(fā)明還提供一種基于樹狀結(jié)構(gòu)的標(biāo)簽頁分組管理方法，其特征在于，包括以下步驟：

步驟一，動(dòng)態(tài)建立標(biāo)簽頁層級數(shù)據(jù)緩存；用戶點(diǎn)擊具有多層級關(guān)系的樹狀結(jié)構(gòu)子節(jié)點(diǎn)或鏈接查看詳情時(shí)，獲取該節(jié)點(diǎn)的層級數(shù)據(jù)，并根據(jù)層級關(guān)系動(dòng)態(tài)建立對應(yīng)的標(biāo)簽頁層級數(shù)據(jù)緩存，存儲(chǔ)已知標(biāo)簽頁面層次結(jié)構(gòu)關(guān)系數(shù)據(jù)；

步驟二，分析當(dāng)前預(yù)打開內(nèi)容所屬層級；在準(zhǔn)備打開標(biāo)簽頁時(shí)，根據(jù)標(biāo)簽頁層級數(shù)據(jù)緩存模塊，在標(biāo)簽頁層級分析模塊中得到其所屬層級；如果標(biāo)簽頁管理系統(tǒng)中不存在該標(biāo)簽層級關(guān)系，建立并保存該層級關(guān)系數(shù)據(jù)；

步驟三：分析預(yù)打開內(nèi)容是否已被打開；為了按需顯示標(biāo)簽頁，不顯示多余的內(nèi)容，為用戶需要通過遍歷標(biāo)簽頁管理系統(tǒng)獲取的數(shù)據(jù)，查看當(dāng)前節(jié)點(diǎn)是否有“標(biāo)識(shí)A”屬性，如果包含該屬性，在預(yù)打開時(shí)為其添加“標(biāo)識(shí)A”屬性，為了顯示該節(jié)點(diǎn)所在層級，為它的所以父節(jié)點(diǎn)也添加該屬性；

步驟四：分析預(yù)打開內(nèi)容是否為當(dāng)前顯示內(nèi)容；通過遍歷“標(biāo)簽頁管理系統(tǒng)”獲取的數(shù)據(jù)，查看當(dāng)前節(jié)點(diǎn)是否有“標(biāo)識(shí)B”屬性，如果你含該屬性，在預(yù)打開時(shí)為其添加“標(biāo)識(shí)B”屬性；為了不重復(fù)打開相同的標(biāo)簽頁，“標(biāo)簽頁標(biāo)識(shí)管理模塊”需要實(shí)時(shí)的存儲(chǔ)當(dāng)前正在被顯示的標(biāo)簽，當(dāng)前在顯示的頁面添加“標(biāo)識(shí)B”

步驟五：顯示標(biāo)簽頁標(biāo)題；遍歷標(biāo)簽頁管理系統(tǒng)中的標(biāo)簽頁數(shù)據(jù)，在標(biāo)簽頁菜單欄顯示所有“標(biāo)識(shí)A”的層級或節(jié)點(diǎn)，選中顯示有“標(biāo)識(shí)B”的標(biāo)簽頁；遍歷標(biāo)簽頁管理系統(tǒng)”的標(biāo)簽頁數(shù)據(jù)，提取有“標(biāo)識(shí)A”的節(jié)點(diǎn)數(shù)據(jù)，構(gòu)建一個(gè)包括“標(biāo)識(shí)A”數(shù)據(jù)的所有節(jié)點(diǎn)數(shù)組；讀取該數(shù)組，渲染生成所有標(biāo)簽標(biāo)題；

步驟六：顯示標(biāo)簽頁；在選中該標(biāo)簽頁時(shí)，從標(biāo)簽頁管理系統(tǒng)中獲得該標(biāo)簽相關(guān)數(shù)據(jù)，通過與后端服務(wù)對接，獲取該標(biāo)簽頁內(nèi)容數(shù)據(jù)，使用標(biāo)簽頁頁面內(nèi)容渲染模塊顯示該標(biāo)簽頁內(nèi)容,并將數(shù)據(jù)存儲(chǔ)到標(biāo)簽頁頁面內(nèi)容存儲(chǔ)模塊；同時(shí)根據(jù)當(dāng)前顯示頁，對應(yīng)的在樹狀結(jié)構(gòu)中高亮該鏈接；

步驟七：管理標(biāo)簽頁；用戶除了可以打開標(biāo)簽頁，還可以關(guān)閉標(biāo)簽頁；點(diǎn)擊關(guān)閉按鈕，獲取當(dāng)前標(biāo)簽數(shù)據(jù)，在“標(biāo)簽頁管理系統(tǒng)”中去掉該節(jié)點(diǎn)的“標(biāo)識(shí)A”，并向上找父節(jié)點(diǎn)，如果該父節(jié)點(diǎn)只有當(dāng)前一個(gè)子節(jié)點(diǎn)，也去掉“標(biāo)識(shí)A”；如果有“標(biāo)識(shí)B”也同時(shí)去掉。

優(yōu)選地，所述步驟一包括以下步驟：

步驟十一，獲取當(dāng)前節(jié)點(diǎn)數(shù)據(jù)；點(diǎn)擊鏈接時(shí)，通過路由層級提取模塊，獲取該節(jié)點(diǎn)的位置及數(shù)據(jù)；

步驟十二，建立該節(jié)點(diǎn)所在樹狀結(jié)構(gòu)的數(shù)據(jù)；根據(jù)該節(jié)點(diǎn)的位置，通過層級結(jié)構(gòu)提取模塊找到該節(jié)點(diǎn)的所有父節(jié)點(diǎn)兄弟節(jié)點(diǎn)自己點(diǎn)數(shù)據(jù)；

步驟十三，通過層級結(jié)構(gòu)分析模塊，存儲(chǔ)該樹狀結(jié)構(gòu)數(shù)據(jù)到層級結(jié)構(gòu)存儲(chǔ)模塊中；

步驟十四，根據(jù)層級結(jié)構(gòu)存儲(chǔ)模塊中數(shù)據(jù)，建立標(biāo)簽頁層級數(shù)據(jù)緩存。

與現(xiàn)有技術(shù)相比，本發(fā)明具有如下的有益效果：本發(fā)明可以在一個(gè)頁面中同時(shí)查看多個(gè)來自樹狀結(jié)構(gòu)的數(shù)據(jù)詳情，在查看標(biāo)簽頁內(nèi)容的時(shí)候還能清晰的保持其在樹狀結(jié)構(gòu)的上下文，提高查看多個(gè)標(biāo)簽頁的易用性。

附圖說明

通過閱讀參照以下附圖對非限制性實(shí)施例所作的詳細(xì)描述，本發(fā)明的其它特征、目的和優(yōu)點(diǎn)將會(huì)變得更明顯：

圖1為本發(fā)明的方法流程圖。

圖2為本發(fā)明的系統(tǒng)原理圖。

具體實(shí)施方式

下面結(jié)合具體實(shí)施例對本發(fā)明進(jìn)行詳細(xì)說明。以下實(shí)施例將有助于本領(lǐng)域的技術(shù)人員進(jìn)一步理解本發(fā)明，但不以任何形式限制本發(fā)明。應(yīng)當(dāng)指出的是，對本領(lǐng)域的普通技術(shù)人員來說，在不脫離本發(fā)明構(gòu)思的前提下，還可以做出若干變形和改進(jìn)。這些都屬于本發(fā)明的保護(hù)范圍。

如圖1所示，本發(fā)明基于樹狀結(jié)構(gòu)的標(biāo)簽頁分組管理方法包括以下步驟：

步驟一，動(dòng)態(tài)建立標(biāo)簽頁層級數(shù)據(jù)緩存；用戶點(diǎn)擊具有多層級關(guān)系的樹狀結(jié)構(gòu)子節(jié)點(diǎn)或鏈接查看詳情時(shí)，獲取該節(jié)點(diǎn)的層級數(shù)據(jù)，并根據(jù)層級關(guān)系動(dòng)態(tài)建立對應(yīng)的標(biāo)簽頁層級數(shù)據(jù)緩存，存儲(chǔ)已知標(biāo)簽頁面層次結(jié)構(gòu)關(guān)系數(shù)據(jù)。

步驟二，分析當(dāng)前預(yù)打開內(nèi)容所屬層級；在準(zhǔn)備打開標(biāo)簽頁時(shí)，根據(jù)標(biāo)簽頁層級數(shù)據(jù)緩存模塊，在“標(biāo)簽頁層級分析模塊”中得到其所屬層級；如果“標(biāo)簽頁管理系統(tǒng)”中不存在該標(biāo)簽層級關(guān)系，建立并保存該層級關(guān)系數(shù)據(jù)。

步驟三：分析預(yù)打開內(nèi)容是否已被打開。為了按需顯示標(biāo)簽頁，不顯示多余的內(nèi)容，為用戶需要通過遍歷“標(biāo)簽頁管理系統(tǒng)”獲取的數(shù)據(jù)，查看當(dāng)前節(jié)點(diǎn)是否有“標(biāo)識(shí)A”屬性，如果包含該屬性，在預(yù)打開時(shí)為其添加“標(biāo)識(shí)A”屬性，為了顯示該節(jié)點(diǎn)所在層級，為它的所以父節(jié)點(diǎn)也添加該屬性。

步驟四：分析預(yù)打開內(nèi)容是否為當(dāng)前顯示內(nèi)容。通過遍歷“標(biāo)簽頁管理系統(tǒng)”獲取的數(shù)據(jù)，查看當(dāng)前節(jié)點(diǎn)是否有“標(biāo)識(shí)B”屬性，如果你含該屬性，在預(yù)打開時(shí)為其添加“標(biāo)識(shí)B”屬性。為了不重復(fù)打開相同的標(biāo)簽頁，“標(biāo)簽頁標(biāo)識(shí)管理模塊”需要實(shí)時(shí)的存儲(chǔ)當(dāng)前正在被顯示的標(biāo)簽，當(dāng)前在顯示的頁面添加“標(biāo)識(shí)B”

步驟五：顯示標(biāo)簽頁標(biāo)題；遍歷“標(biāo)簽頁管理系統(tǒng)”中的標(biāo)簽頁數(shù)據(jù)，在標(biāo)簽頁菜單欄顯示所有“標(biāo)識(shí)A”的層級或節(jié)點(diǎn)，選中顯示有“標(biāo)識(shí)B”的標(biāo)簽頁。遍歷“標(biāo)簽頁管理系統(tǒng)”中的標(biāo)簽頁數(shù)據(jù)，提取有“標(biāo)識(shí)A”的節(jié)點(diǎn)數(shù)據(jù)，構(gòu)建一個(gè)包括“標(biāo)識(shí)A”數(shù)據(jù)的所有節(jié)點(diǎn)數(shù)組。讀取該數(shù)組，渲染生成所有標(biāo)簽標(biāo)題。

步驟六：顯示標(biāo)簽頁；在選中該標(biāo)簽頁時(shí)，從“標(biāo)簽頁管理系統(tǒng)”中獲得該標(biāo)簽相關(guān)數(shù)據(jù)，通過與后端服務(wù)對接，獲取該標(biāo)簽頁內(nèi)容數(shù)據(jù)，使用“標(biāo)簽頁頁面內(nèi)容渲染模塊”顯示該標(biāo)簽頁內(nèi)容,并將數(shù)據(jù)存儲(chǔ)到“標(biāo)簽頁頁面內(nèi)容存儲(chǔ)模塊”。同時(shí)根據(jù)當(dāng)前顯示頁，對應(yīng)的在樹狀結(jié)構(gòu)中高亮該鏈接。

步驟七：管理標(biāo)簽頁；用戶除了可以打開標(biāo)簽頁，還可以關(guān)閉標(biāo)簽頁。點(diǎn)擊關(guān)閉按鈕，獲取當(dāng)前標(biāo)簽數(shù)據(jù)，在“標(biāo)簽頁管理系統(tǒng)”中去掉該節(jié)點(diǎn)的“標(biāo)識(shí)A”，并向上找父節(jié)點(diǎn)，如果該父節(jié)點(diǎn)只有當(dāng)前一個(gè)子節(jié)點(diǎn)，也去掉“標(biāo)識(shí)A”；如果有“標(biāo)識(shí)B”也同時(shí)去掉。

所述步驟一包括以下步驟：

步驟十一，獲取當(dāng)前節(jié)點(diǎn)數(shù)據(jù)；點(diǎn)擊鏈接時(shí)，通過路由層級提取模塊，獲取該節(jié)點(diǎn)的位置及數(shù)據(jù)。

步驟十二，建立該節(jié)點(diǎn)所在樹狀結(jié)構(gòu)的數(shù)據(jù)。根據(jù)該節(jié)點(diǎn)的位置，通過層級結(jié)構(gòu)提取模塊找到該節(jié)點(diǎn)的所有父節(jié)點(diǎn)兄弟節(jié)點(diǎn)自己點(diǎn)數(shù)據(jù)。

步驟十三，通過層級結(jié)構(gòu)分析模塊，存儲(chǔ)該樹狀結(jié)構(gòu)數(shù)據(jù)到層級結(jié)構(gòu)存儲(chǔ)模塊中。

步驟十四，根據(jù)層級結(jié)構(gòu)存儲(chǔ)模塊中數(shù)據(jù)，建立標(biāo)簽頁層級數(shù)據(jù)緩存。

步驟三包括以下步驟：

步驟三十一，為了按需顯示標(biāo)簽頁，不顯示多余的內(nèi)容。為所有用戶點(diǎn)擊預(yù)打開的標(biāo)簽添加“標(biāo)識(shí)A”；

步驟三十二，同時(shí)為了顯示該節(jié)點(diǎn)所屬層級，為該節(jié)點(diǎn)的所有父節(jié)點(diǎn)都添加“標(biāo)識(shí)A”；

如圖2所示，基于樹狀結(jié)構(gòu)的標(biāo)簽頁分組管理系統(tǒng)包括以下模塊：

鏈接路由攔截模塊：攔截用戶點(diǎn)擊鏈接和路由切換等可能需要在tab頁面中顯示的操作，將頁面內(nèi)容存儲(chǔ)于標(biāo)簽頁面內(nèi)容存儲(chǔ)模塊中。

標(biāo)簽頁頁面內(nèi)容存儲(chǔ)模塊：用于存儲(chǔ)鏈接或路由打開時(shí)所對應(yīng)的具體頁面內(nèi)容，便于標(biāo)簽切換后快速顯示標(biāo)簽頁內(nèi)容。

標(biāo)簽頁頁面內(nèi)容控制模塊：根據(jù)標(biāo)簽頁層級結(jié)構(gòu)控制模塊的輸出，控制頁面上需要渲染顯示的標(biāo)簽頁內(nèi)容。

標(biāo)簽頁頁面內(nèi)容渲染模塊：運(yùn)用HTML、CSS和JS技術(shù)，將標(biāo)簽頁中頁面內(nèi)容渲染于頁面中標(biāo)簽頁內(nèi)容區(qū)域。

路由層級提取模塊：根據(jù)鏈接或路由信息，提取該鏈接或地址對應(yīng)的層級關(guān)系，用于后繼的層級分析。

總體層級結(jié)構(gòu)抽取模塊：頁面中初次點(diǎn)擊鏈接或路由切換時(shí)，根據(jù)鏈接或路由信息，遍歷系統(tǒng)中所有需要在標(biāo)簽頁中顯示的頁面地址，抽取出頁面層級關(guān)系數(shù)據(jù)。

總體層級結(jié)構(gòu)分析模塊：對抽取出的層級關(guān)系數(shù)據(jù)進(jìn)行分析整理，將數(shù)據(jù)格式轉(zhuǎn)換為可供界面標(biāo)簽頁面顯示的具有層級關(guān)系的JSON數(shù)據(jù)格式。

層級結(jié)構(gòu)存儲(chǔ)模塊：用于存儲(chǔ)系統(tǒng)所有層級結(jié)構(gòu)JSON數(shù)據(jù)，以便于分析和控制樹狀結(jié)構(gòu)的標(biāo)簽頁分組。

標(biāo)簽頁層級分析模塊：將當(dāng)前鏈接或路由所對應(yīng)的路由層級與層級結(jié)構(gòu)存儲(chǔ)模塊中的總體層級結(jié)構(gòu)進(jìn)行對比分析，以確定當(dāng)前節(jié)點(diǎn)所在層級。

標(biāo)簽頁層級規(guī)則引擎模塊：定義標(biāo)簽頁根據(jù)樹狀結(jié)構(gòu)進(jìn)行分組展示的規(guī)則和算法，確定打開的節(jié)點(diǎn)在標(biāo)簽欄上顯示的方式，如新增標(biāo)簽、組合標(biāo)簽、在標(biāo)簽分組中增加下級菜單等。

標(biāo)簽頁層級管理模塊：根據(jù)標(biāo)簽頁層級規(guī)則引擎模塊中的標(biāo)簽打開規(guī)則，重新構(gòu)建標(biāo)簽欄中的標(biāo)簽數(shù)據(jù)及其相關(guān)標(biāo)識(shí)信息等。

標(biāo)簽頁層級結(jié)構(gòu)控制模塊：根據(jù)標(biāo)簽欄中的標(biāo)簽數(shù)據(jù)及相關(guān)標(biāo)識(shí)信息，控制頁面中標(biāo)簽頁的顯示、隱藏、分組、切換等。

標(biāo)簽頁渲染模塊：在頁面標(biāo)簽欄區(qū)域中渲染需要顯示的標(biāo)簽、標(biāo)簽分組、標(biāo)簽狀態(tài)等界面元素。

頁面交互控制模塊：偵聽用戶對標(biāo)簽頁、菜單等各類界面元素的操作，響應(yīng)用戶的操作并及時(shí)控制頁面元素出現(xiàn)相應(yīng)的效果或改變。

以上對本發(fā)明的具體實(shí)施例進(jìn)行了描述。需要理解的是，本發(fā)明并不局限于上述特定實(shí)施方式，本領(lǐng)域技術(shù)人員可以在權(quán)利要求的范圍內(nèi)做出各種變形或修改，這并不影響本發(fā)明的實(shí)質(zhì)內(nèi)容。