layui实现树形菜单（一）

「这是我参与11月更文挑战的第 5 天，活动详情查看：2021最后一次更文挑战」

1、前言

​ 因为前段时间换了新工作。新的项目组要求前后端都写，前端是使用的layui。虽然说现在流行前后端分离，前端大多使用vue、react等模块化框架，但是还有好多公项目因为历史原因、人员因素等，使用的还是前后端一体或者前后端一起写。并且layui这种jQuery框架对后端开发来说也相对友好些。(PS：虽然layui的官网已经下架，但是在gitee的issue上还是有相关文档的镜像网站的，如：layui.itze.cn/ ，虽然有文档参考，但是在实际的开发过程中还是遇到了很多问题，踩了很多坑。主要是因为版本呢的不同导致的，我现在使用的是v2.2.5版本，参考文档的是v2.5，好多函数以及特性都不支持。但layui的源码大部分还是能看懂的，不懂得看看源码也就解决了。

​ 下面我们就详细介绍下，如何基于layui实现左侧树形菜单。

2、后端代码

​ 首先我们要在后端构建出树形结构的菜单数据。这里父子级关系的关联是将数据放在同一张表中根据parent_id来实现的，根节点的parent_id设为null或者000-000这样的。然后对于构建父子级结构推荐大家在代码中实现，而不是先查父级再for循环查子级，这样如果菜单数的深度很深的话是很浪费时间的。下面就上代码来具体说明下：

1、菜单数据的查询

​ 这里是根据用户查到所属角色，然后再根据角色信息查出角色的权限

	select cm.* from com_menu cm
            inner join com_role_menu crm on crm.com_menu_id = cm.com_menu_id
                inner join com_user_role cur on crm.com_role_id = cur.com_role_id
        where cur.com_user_id = #{comUserId}
复制代码

2、构建树形结构信息
这里我使用的双层循环来实现的，整体思路是遍历查找每一个元素的上一级，将子菜单添加到父级元素下，最后移除掉所有的子菜单就得到了一个树形菜单结构。

private static List<MenuTreeNode> getTreeMenu(List<MenuTreeNode> menuList) {
        List<MenuTreeNode> removeMenus = new ArrayList<MenuTreeNode>();
        for (int i = 0; i < menuList.size(); i ++) {
            try {
                MenuTreeNode currMenu = menuList.get(i);
                String upperValue = currMenu.getUpperid();
                if (StringUtils.isBlank(upperValue)) {
                   continue;
                }
                for (int j = 0; j < menuList.size(); j++) {
                    //从遍历查找上级
                    try {
                        MenuTreeNode upperMenu = menuList.get(j);
                        String baseValue = upperMenu.getCom_menu_id();
                        if (baseValue.equals(upperValue)) {
                            //找到上级、将该行添加到上级的childrens中
                            if (null == upperMenu.getChildren()) {
                                upperMenu.setChildren(new ArrayList<>());
                            }
                            upperMenu.getChildren().add(currMenu);
                            //保存要从menuList中移去的行，将在后面统一移去
                            removeMenus.add(currMenu);
                            break;
                        }
                    } catch (Exception e) {
                        log.error(e.getMessage(), e);
                    }
                }
            } catch (Exception e1) {
                log.error(e1.getMessage(), e1);
            }
        }
        menuList.removeAll(removeMenus);
        return menuList;
    }
复制代码

​ 好了，这次就先分享到这里，下次为大家介绍下基于递归实现树形结构的构建以及前端代码的实现。