一种基于Ztree实现按用户定制横向下拉三级菜单的方法与流程

本发明涉及ztree技术领域，特别涉及一种基于ztree实现按用户定制横向下拉三级菜单的方法。

背景技术：

在开发互联网模式的门店系统时，如果菜单使用纵向方式进行显示，感觉特别的拥挤，特别是不同的门店的显示器不太一样，很难做到兼容，所以不太适合门店；另外门店的员工级别都不一样，他们所能浏览的和所能操作的按钮都不一样，不能在他们进入系统后看到的菜单都一样。

针对以上问题，本发明采用了按用户的角色来进行菜单控制，每个员工登录后只能看到自己角色的对应的菜单；菜单显示时，使用ztree控件进行横向的加载显示，解决了如门店系统菜单显示时拥挤的问题。

技术实现要素：

本发明解决的技术问题在于提供一种基于ztree实现按用户定制横向下拉三级菜单的方法；本发明解决了在某些系统中不能按用户定制菜单以及菜单显示混乱拥挤的问题。

本发明解决上述技术问题的技术方案是：

一、在项目中引入支持文件；二、用户登录后，发送菜单加载请求；三、在后台根据条件查询出用户的菜单id；四、根据用户菜单id，查询出所有的根菜单id；五、根据根菜单id，查询出所有子菜单集合；六、将菜单集合转化为json数据返回给前端；七、前端获取数据后，进行遍历，将每个item信息组装成ztree节点，存入数组中；八、使用ztree对节点数组初始化，完成加载并显示。

所述的方法具体包括如下步骤：

步骤一、在项目中引入ztree相关文件；

步骤二、用户登录后，在主页面的script标签中的预加载函数中，使用ajax技术发送菜单加载请求；

步骤三、后台接收到请求，从session中获取当前用户登录的角色id、用户id等信息，然后根据这些条件查询出用户所有的菜单id；

步骤四、根据用户菜单的id，查询出所有的根菜单id；

步骤五、根据根菜单id，使用递归的方法查询出所有子菜单集合，添加到原菜单集合中；

步骤六、将菜单集合转化为json数据返回给前端；

步骤七、前端获取到json数据，进行三级遍历，将每级的item信息组装成ztree节点，存入数组中；

步骤八、使用ztree对节点数组初始化，为每个节点添加触发事件，当用户点击或鼠标移动到一级菜单后，马上弹出二级菜单，当用鼠标点击或移动到二级菜单后，显示三级菜单。

本发明的有益效果：加载菜单时按用户角色进行筛选，显示时以横向的方式进行展示，达到了菜单按角色显示及多级展示的目的。有效地解决了在某些系统中不能按用户定制菜单以及菜单显示混乱拥挤的问题。

附图说明

下面结合附图对本发明进一步说明：

图1为本发明的流程图;

图2为本发明步骤八所述的横向三级菜单图。

具体实施方式

如图1所示，本发明采用如下步骤：

步骤一、在项目中引入ztree相关文件；如：jquery.treegrid.css、metrostyle.css、ztreestyle.css、ztree.js、jquery.js等；

步骤二、用户登录后，在主页面的script标签中的预加载函数中，使用ajax技术发送菜单加载请求；

步骤三、后台接收到请求，从session中获取当前用户登录的角色id、用户id等信息，然后根据这些条件查询出用户所有的菜单id；

步骤四、根据用户菜单的id，查询出所有的根菜单id；如：

步骤五、根据根菜单id，使用递归的方法查询出所有子菜单集合，添加到原菜单集合中；

步骤六、将菜单集合转化为json数据返回给前端；

步骤七、前端获取到json数据，进行三级遍历，将每级的item信息组装成ztree节点，存入数组中；

步骤八、使用ztree对节点数组初始化，为每个节点添加触发事件，当用户点击或鼠标移动到一级菜单后，马上弹出二级菜单，当用鼠标点击或移动到二级菜单后，显示三级菜单。

技术特征：

1.一种基于ztree实现按用户定制横向下拉三级菜单的方法，其特征在于：一、在项目中引入支持文件；二、用户登录后，发送菜单加载请求；三、在后台根据条件查询出用户的菜单id；四、根据用户菜单id，查询出所有的根菜单id；五、根据根菜单id，查询出所有子菜单集合；六、将菜单集合转化为json数据返回给前端；七、前端获取数据后，进行遍历，将每个item信息组装成ztree节点，存入数组中；八、使用ztree对节点数组初始化，完成加载并显示。

2.根据权利要求1所述的基于ztree技术领域的一种基于ztree实现按用户定制横向下拉三级菜单的方法，其特征在于：在项目中引入ztree相关文件；所述的引入步骤：

（1）到官网下载ztree包；

（2）解压；

（3）提取js与css及图片等资源文件，拷贝到项目中；

（4）在页面中引入。

3.根据权利要求1所述的基于ztree技术领域的一种基于ztree实现按用户定制横向下拉三级菜单的方法，其特征在于：用户登录后，在主页面的script标签中的预加载函数中，使用ajax技术发送菜单加载请求。

4.根据权利要求1所述的基于ztree技术领域的一种基于ztree实现按用户定制横向下拉三级菜单的方法，其特征在于：后台接收到请求，从session中获取当前用户登录的角色id、用户id等信息，然后根据这些条件查询出用户所有的菜单id。

5.根据权利要求1所述的基于ztree技术领域的一种基于ztree实现按用户定制横向下拉三级菜单的方法，其特征在于：根据用户菜单的id，查询出所有的根菜单id。

6.根据权利要求1所述的基于ztree技术领域的一种基于ztree实现按用户定制横向下拉三级菜单的方法，其特征在于：根据根菜单id，使用递归的方法查询出所有子菜单集合，添加到原菜单集合中。

7.根据权利要求1所述的基于ztree技术领域的一种基于ztree实现按用户定制横向下拉三级菜单的方法，其特征在于：将菜单集合转化为json数据返回给前端。

8.根据权利要求1所述的基于ztree技术领域的一种基于ztree实现按用户定制横向下拉三级菜单的方法，其特征在于：前端获取到json数据，进行三级遍历，将每级的item信息组装成ztree节点，存入数组中。

9.根据权利要求1所述的基于ztree技术领域的一种基于ztree实现按用户定制横向下拉三级菜单的方法，其特征在于：使用ztree对节点数组初始化，为每个节点添加触发事件，当用户点击或鼠标移动到一级菜单后，马上弹出二级菜单，当用鼠标点击或移动到二级菜单后，显示三级菜单。

技术总结
本发明涉及Ztree技术领域，特别涉及一种基于Ztree实现按用户定制横向下拉三级菜单的方法：一、在项目中引入支持文件；二、用户登录后，发送菜单加载请求；三、在后台根据条件查询出用户的菜单ID；四、根据用户菜单ID，查询出所有的根菜单ID；五、根据根菜单ID，查询出所有子菜单集合；六、将菜单集合转化为Json数据返回给前端；七、前端获取数据后，进行遍历，将每个Item信息组装成Ztree节点，存入数组中；八、使用Ztree对节点数组初始化，完成加载并显示。本发明解决了在某些系统中不能按用户定制菜单以及菜单显示混乱拥挤的问题。

技术研发人员：陈林;张来卿;庞严冬
受保护的技术使用者：珠海横琴盛达兆业科技投资有限公司
技术研发日：2018.11.29
技术公布日：2020.06.05