SpringMVC+ZTree实现树形菜单权限配置的方法

下面是完整攻略：

1. 准备工作

1.1 搭建SpringMVC项目

首先我们需要搭建一个SpringMVC项目，这里不做过多介绍，建议使用Maven进行管理。

1.2 引入ZTree插件

在搭建完SpringMVC项目后，在项目中引入ZTree插件。可以使用CDN的方式，也可以下载到本地引入。

1.3 数据库设计

在实现权限配置时，需要通过数据库保存树形菜单数据和权限数据。以下是示例的MySQL数据表设计：

树形菜单数据表

CREATE TABLE `menu` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL COMMENT '名称',
  `pid` int(11) NOT NULL DEFAULT '0' COMMENT '父节点id',
  `level` tinyint(4) NOT NULL DEFAULT '1' COMMENT '层级',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

权限数据表

CREATE TABLE `auth` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `menu_id` int(11) NOT NULL COMMENT '对应菜单id',
  `role_id` int(11) NOT NULL COMMENT '对应角色id',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

2. 实现步骤

2.1 后端实现

2.1.1 菜单树形结构数据查询

在后端实现中，我们需要通过查询数据库将菜单树形结构数据返回给前端。以下是示例代码：

@RequestMapping("/menu/tree")
@ResponseBody
public List<TreeVO> getMenuTree() {
    List<Menu> menuList = menuService.getAllMenu();
    List<TreeVO> treeList = new ArrayList<>();
    for (Menu menu : menuList) {
        TreeVO treeVO = new TreeVO();
        treeVO.setId(menu.getId());
        treeVO.setPid(menu.getPid());
        treeVO.setName(menu.getName());
        treeVO.setOpen(menu.getLevel() == 1);
        treeList.add(treeVO);
    }
    return TreeBuilder.build(treeList);
}

这里返回的是List，其中TreeVO是一个用于返回ZTree插件所需数据的封装类，包含节点id、父节点id、节点名称等信息。这里用到了一个TreeBuilder的工具类来将数据封装成ZTree所需的格式。

2.1.2 权限配置

在实现权限配置时，需要将前端传过来的权限信息保存至数据库。以下是示例代码：

@RequestMapping("/auth/save")
@ResponseBody
public CommonResult saveAuth(@RequestParam("menuId") Integer menuId,
                             @RequestParam("roleIdList") List<Integer> roleIdList) {
    try {
        authAdminService.saveAuth(menuId, roleIdList);
        return CommonResult.success();
    } catch (Exception e) {
        logger.error("saveAuth error:{}", e.getMessage(), e);
        return CommonResult.failed("保存失败");
    }
}

这里通过@RequestParam注解来获取前端传过来的参数，其中roleIdList是一个List类型，保存了该菜单所对应的角色id集合。

2.2 前端实现

2.2.1 ZTree插件初始化

在前端实现中，我们需要使用ZTree插件来展示树形菜单和实现权限配置。以下是初始化ZTree插件的示例代码：

<script type="text/javascript">
    $(function () {
        $.ajax({
            url: '/menu/tree',
            success: function (data) {
                $.fn.zTree.init($("#tree"), {
                    check: {
                        enable: true,
                        chkboxType: {"Y": "ps", "N": "ps"}
                    },
                    data: {
                        simpleData: {
                            enable: true,
                            idKey: "id",
                            pIdKey: "pid",
                            rootPId: 0
                        }
                    },
                    callback: {
                        onCheck: function (event, treeId, treeNode) {
                            // 处理权限保存
                        }
                    }
                }, data);
            }
        });
    });
</script>

在上述代码中，我们通过$.ajax()方法来请求后端接口获取树形结构数据，并在成功后通过$.fn.zTree.init()方法来初始化ZTree插件。

2.2.2 权限保存

在前端实现中，我们需要实现权限保存的功能，通过将前端选中的角色id集合传递给后端接口来保存权限。以下是示例代码：

callback: {
    onCheck: function (event, treeId, treeNode) {
        var menuId = treeNode.id;
        var checkedRoleIdList = [];
        var zTree = $.fn.zTree.getZTreeObj(treeId);
        var checkedNodes = zTree.getCheckedNodes(true);
        for (var i = 0; i < checkedNodes.length; i++) {
            checkedRoleIdList.push(checkedNodes[i].id);
        }
        $.ajax({
            url: '/auth/save',
            type: 'post',
            data: {menuId: menuId, roleIdList: checkedRoleIdList},
            success: function () {
                alert('保存成功');
            },
            error: function () {
                alert('保存失败');
            }
        });
    }
}

在上述代码中，我们通过$.fn.zTree.getZTreeObj()方法获取ZTree对象，再通过getCheckedNodes()方法获取选中的节点数据，最终将节点id集合传递给后端接口进行保存。

3. 总结

通过以上步骤，我们可以实现SpringMVC+ZTree来完成树形菜单权限配置的需求。在实现过程中，后端需要提供菜单树形结构数据查询和权限保存的接口，前端需要使用ZTree插件展示树形菜单和处理权限保存的功能。