[發(fā)明專利]一種基于Ztree實(shí)現(xiàn)按用戶定制橫向下拉三級(jí)菜單的方法

在審

• 申請(qǐng)?zhí)枺?/td>: 201811268038.1
• 申請(qǐng)日: 2018-11-29
• 公開（公告）號(hào): CN111240554A
• 公開（公告）日: 2020-06-05
• 發(fā)明（設(shè)計(jì)）人: 陳林;張來卿;龐嚴(yán)冬
• 申請(qǐng)（專利權(quán)）人: 珠海橫琴盛達(dá)兆業(yè)科技投資有限公司
• 主分類號(hào): G06F3/0482
• 分類號(hào): G06F3/0482;G06F9/451
• 代理公司: 暫無信息
• 代理人: 暫無信息

本發(fā)明涉及Ztree技術(shù)領(lǐng)域，特別涉及一種基于Ztree實(shí)現(xiàn)按用戶定制橫向下拉三級(jí)菜單的方法：一、在項(xiàng)目中引入支持文件；二、用戶登錄后，發(fā)送菜單加載請(qǐng)求；三、在后臺(tái)根據(jù)條件查詢出用戶的菜單ID；四、根據(jù)用戶菜單ID，查詢出所有的根菜單ID；五、根據(jù)根菜單ID，查詢出所有子菜單集合；六、將菜單集合轉(zhuǎn)化為Json數(shù)據(jù)返回給前端；七、前端獲取數(shù)據(jù)后，進(jìn)行遍歷，將每個(gè)Item信息組裝成Ztree節(jié)點(diǎn)，存入數(shù)組中；八、使用Ztree對(duì)節(jié)點(diǎn)數(shù)組初始化，完成加載并顯示。本發(fā)明解決了在某些系統(tǒng)中不能按用戶定制菜單以及菜單顯示混亂擁擠的問題。

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

本發(fā)明涉及Ztree技術(shù)領(lǐng)域，特別涉及一種基于Ztree實(shí)現(xiàn)按用戶定制橫向下拉三級(jí)菜單的方法。

背景技術(shù)

在開發(fā)互聯(lián)網(wǎng)模式的門店系統(tǒng)時(shí)，如果菜單使用縱向方式進(jìn)行顯示，感覺特別的擁擠，特別是不同的門店的顯示器不太一樣，很難做到兼容，所以不太適合門店；另外門店的員工級(jí)別都不一樣，他們所能瀏覽的和所能操作的按鈕都不一樣，不能在他們進(jìn)入系統(tǒng)后看到的菜單都一樣。

針對(duì)以上問題，本發(fā)明采用了按用戶的角色來進(jìn)行菜單控制，每個(gè)員工登錄后只能看到自己角色的對(duì)應(yīng)的菜單；菜單顯示時(shí)，使用Ztree控件進(jìn)行橫向的加載顯示，解決了如門店系統(tǒng)菜單顯示時(shí)擁擠的問題。

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

本發(fā)明解決的技術(shù)問題在于提供一種基于Ztree實(shí)現(xiàn)按用戶定制橫向下拉三級(jí)菜單的方法；本發(fā)明解決了在某些系統(tǒng)中不能按用戶定制菜單以及菜單顯示混亂擁擠的問題。

本發(fā)明解決上述技術(shù)問題的技術(shù)方案是：

一、在項(xiàng)目中引入支持文件；二、用戶登錄后，發(fā)送菜單加載請(qǐng)求；三、在后臺(tái)根據(jù)條件查詢出用戶的菜單ID；四、根據(jù)用戶菜單ID，查詢出所有的根菜單ID；五、根據(jù)根菜單ID，查詢出所有子菜單集合；六、將菜單集合轉(zhuǎn)化為Json數(shù)據(jù)返回給前端；七、前端獲取數(shù)據(jù)后，進(jìn)行遍歷，將每個(gè)Item信息組裝成Ztree節(jié)點(diǎn)，存入數(shù)組中；八、使用Ztree對(duì)節(jié)點(diǎn)數(shù)組初始化，完成加載并顯示。

所述的方法具體包括如下步驟：

步驟一、在項(xiàng)目中引入Ztree相關(guān)文件；

步驟二、用戶登錄后，在主頁(yè)面的Script標(biāo)簽中的預(yù)加載函數(shù)中，使用Ajax技術(shù)發(fā)送菜單加載請(qǐng)求；

步驟三、后臺(tái)接收到請(qǐng)求，從Session中獲取當(dāng)前用戶登錄的角色I(xiàn)D、用戶ID等信息，然后根據(jù)這些條件查詢出用戶所有的菜單ID；

步驟四、根據(jù)用戶菜單的ID，查詢出所有的根菜單ID；

步驟五、根據(jù)根菜單ID，使用遞歸的方法查詢出所有子菜單集合，添加到原菜單集合中；

步驟六、將菜單集合轉(zhuǎn)化為Json數(shù)據(jù)返回給前端；

步驟七、前端獲取到Json數(shù)據(jù)，進(jìn)行三級(jí)遍歷，將每級(jí)的Item信息組裝成Ztree節(jié)點(diǎn)，存入數(shù)組中；

步驟八、使用Ztree對(duì)節(jié)點(diǎn)數(shù)組初始化，為每個(gè)節(jié)點(diǎn)添加觸發(fā)事件，當(dāng)用戶點(diǎn)擊或鼠標(biāo)移動(dòng)到一級(jí)菜單后，馬上彈出二級(jí)菜單，當(dāng)用鼠標(biāo)點(diǎn)擊或移動(dòng)到二級(jí)菜單后，顯示三級(jí)菜單。

本發(fā)明的有益效果：加載菜單時(shí)按用戶角色進(jìn)行篩選，顯示時(shí)以橫向的方式進(jìn)行展示，達(dá)到了菜單按角色顯示及多級(jí)展示的目的。有效地解決了在某些系統(tǒng)中不能按用戶定制菜單以及菜單顯示混亂擁擠的問題。

附圖說明

下面結(jié)合附圖對(duì)本發(fā)明進(jìn)一步說明：

圖1為本發(fā)明的流程圖;

圖2為本發(fā)明步驟八所述的橫向三級(jí)菜單圖。

具體實(shí)施方式

如圖1所示，本發(fā)明采用如下步驟：