layui+springboot实现树状菜单

layui+springboot实现树状菜单

rolelist.html：

admin.popup({
    title: '角色授权'
    , area: ['500px', '580px']
    , id: 'LAY-popup-role-edit'
    , success: function (layero, index) {
        view(this.id).render('sys/role/roleMenu', {index: index}).done(function () {
            form.render(null, 'roleMenuTip');
            form.val("roleMenuTip", obj.data);
            $.ajax({
                url: '/role/getRoleMenu',
                method: 'post',
                data: {roleid: data.id},
                dataType: 'JSON',
                //headers: {Authorization: (layui.data('layuiAdmin')['Authorization'] || '')},
                success: function (res) {
                    if (res.code == 0) {
                        //开启复选框
                        tree.render({
                            elem: '#LAY-role-menu'
                            , data: res.data
                            , showCheckbox: true
                            , id: "ids"
                        });
                    }
                    else
                        layer.msg(res.msg);
                }
            });
            form.on('submit(roleMenuSubmit)', function (data) {
                var data = data.field;
                var checkedData = tree.getChecked('ids');
                var ids = new Array();
                /*$.each(checkData, function (index, o) {
                    ids.push(o.id);
                    var children = o.children;
                    $.each(children, function (index, c) {
                        ids.push(c.id);
                        var child = c.children;
                        $.each(child, function (index, s) {
                            ids.push(s.id);
                        });
                    });
                })*/

                ids = getChildNodes(checkedData, []);
                $.ajax({
                    url: '/role/saveRoleMenu',
                    method: 'post',
                    data: {roleid: data.id, ids: ids.toString()},
                    dataType: 'JSON',
                    //headers: {Authorization: (layui.data('layuiAdmin')['Authorization'] || '')},
                    success: function (res) {
                        if (res.code == 0) {
                            layer.msg("成功");
                            layer.close(index); //执行关闭
                            queryrolelist();
                        }
                        else
                            layer.msg(res.msg);
                    }
                });
                return false;
            });
        });
    }
});

rolemenu.html:

<form class="layui-form" action="" type="post" lay-filter="roleMenuTip" style="padding: 20px 30px 0 0;">
    <div class="layui-col-md11">
        <div class="layui-form-item" style="margin-top: 2px;left: 1px">
            <input type="hidden" name="id"/>
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input type="text" disabled="true" name="vc2rolename" id="vc2rolename" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <table id="LAY-role-menu" lay-filter="LAY-role-menu"></table>
        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: center">
                <button class="layui-btn" lay-submit lay-filter="roleMenuSubmit">确定</button>
                <script type="text/html" template>
                    <span class="layui-btn layui-btn-primary" onclick="layer.close({{d.params.index || ''}});">取消</span>
                </script>
            </div>
        </div>
    </div>
</form>

controller:

@RequestMapping("/getRoleMenu")
public ResponseData roleMenu(HttpServletRequest request) {
    Long roleid = Long.parseLong(request.getParameter("roleid"));
    try {
        Object roleMenuList = roleService.getAtreeMenu(roleid);
        return ResponseData.SUCCESS(roleMenuList);
    } catch (Exception e) {
        e.printStackTrace();
        logger.error("获取角色菜单树失败!", e.getMessage());
        return ResponseData.FAIL("失败");
    }
}

service:

/**
 * 根据roleid获取菜单树
 *
 * @param roleId
 * @return: java.util.List<com.ihandy.sys.model.sys.AtreeMenu>
 */
public List<AtreeMenu> getAtreeMenu(Long roleId) {
    List<Map<String, Object>> allMenuList = tlSysRoleExtMapper.getMenuListByRoleId(roleId); //当前角色拥有的菜单
    TlSysMenuExample example = new TlSysMenuExample();
    TlSysMenuExample.Criteria criteria = example.createCriteria();
    criteria.andNumstatusEqualTo((short) 1);
    List<TlSysMenu> menuList = tlSysMenuMapper.selectByExample(example);
    ;//所有菜单列表
    List<AtreeMenu> atreeMenus = new ArrayList<>();
    List<AtreeMenu> menuList1 = new ArrayList<>();
    List allMenuIdList = new ArrayList();
    for (int i = 0; i < allMenuList.size(); i++) {
        allMenuIdList.add(allMenuList.get(i).get("ID") + "");
    }
    TlSysMenu tlSysMenu = new TlSysMenu();
    for (int i = 0; i < menuList.size(); i++) {
        AtreeMenu treeNode = new AtreeMenu();
        tlSysMenu = menuList.get(i);
        String id = tlSysMenu.getId() + "";
        treeNode.setId(id);
        if(tlSysMenu.getVc2menudesc() == null){
            treeNode.setTitle(tlSysMenu.getVc2menuname());
        }else{
            treeNode.setTitle(tlSysMenu.getVc2menuname()+"（"+tlSysMenu.getVc2menudesc()+"）");
        }
        String pid = tlSysMenu.getPid() + "";
        treeNode.setSuperId(pid);
        if (allMenuIdList.contains(id)) {
            if (Integer.parseInt(pid) != 0)
                treeNode.setChecked(true);
        }
        menuList1.add(treeNode);
    }
    for (AtreeMenu treeNode : menuList1) {
        if (!(isBlank(treeNode.getSuperId())) && Integer.parseInt(treeNode.getSuperId()) == 0) {
            atreeMenus.add(findChildren(treeNode, menuList1));
        }
    }
    return atreeMenus;
}

/**
 * 查找菜单树子节点
 *
 * @param menu
 * @param menuList
 * @return: com.ihandy.sys.model.sys.AtreeMenu
 */
public AtreeMenu findChildren(AtreeMenu menu, List<AtreeMenu> menuList) {
    for (AtreeMenu item : menuList) {
        if (menu.getId().equals(item.getSuperId())) {
            if (menu.getChildren() == null) {
                menu.setChildren(new ArrayList<AtreeMenu>());
  menu.setChecked(false);
            }
            menu.getChildren().add(findChildren(item, menuList));
        }
    }
    return menu;
}

效果：