SSM框架之酒店管理系统六(角色管理分配菜单)layui.dtree树形菜单插件使用
SSM框架之酒店管理系统六(角色管理分配菜单)
1、树形菜单的使用
-
复制下载的layu树形图到
webapp.statics
文件夹下官网下载地址:layui.dtree帮助手册 (wisdomelon.com)
-
根据官网的使用导入相关的css和js文件,到
roleManager.jsp
角色管理页面 -
layui开始采用继承的方式才可以使用插件
'${pageContext.request.contextPath}/statics/layui_ext/dtree/dtree’后面的【dtree.js】的后缀是省略不写的
第三方插件必须采取继承的方式,否之会报错
layui.extend({dtree: '${pageContext.request.contextPath}/statics/layui_ext/dtree/dtree'}).use(['form', 'table', 'laydate', 'jquery','layer','dtree'], function () {var $ = layui.jquery,form = layui.form,laydate = layui.laydate,dtree = layui.dtree,layer = layui.layer,table = layui.table; });
2、点击分配菜单按钮事件
前提是在页面准备一个,存放树形图的ul标签,官方文档有写
<div style="display: none;" id="selectRoleMenuDiv"><ul id="roleTree" class="dtree" data-id="0">ul>
div>
按钮点击事件
// 分配菜单弹出窗口
function openGrantMenuWindow(data){mainIndex = layer.open({type: 1,title:"分配菜单信息",area: ['600px', '280px'],content:$("#selectRoleMenuDiv"),success:function(){// 初始化树dtree.render({elem: "#roleTree",url: "/admin/role/initMenuTree", // 使用url加载(可与data加载同时存在)dataStyle:"layuiStyle", // 使用layui风格样式的数据格式dataFormat:"list", // 配置data的风格为listresponse:{message:"msg",statusCode:0} // 修改response中返回数据的定义});}});
}
2.1、查询树形菜单实体工具类编写【返回的数据类型是规定的】
package com.zcl.utils;import com.fasterxml.jackson.annotation.JsonProperty;import java.util.ArrayList;
import java.util.List;/*** 树节点属性类*/
public class TreeNode {private Integer id;//菜单节点编号@JsonProperty(value = "parentId")private Integer pid;//父节点菜单编号private String title;//菜单节点名称private String icon;//菜单节点图标private String href;//菜单路径private Boolean spread;//是否展开//子节点菜单private List<TreeNode> children = new ArrayList<TreeNode>();//复选框是否被选中private String checkArr = "0";//默认不选中public String getCheckArr() {return checkArr;}public void setCheckArr(String checkArr) {this.checkArr = checkArr;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public Integer getPid() {return pid;}public void setPid(Integer pid) {this.pid = pid;}public String getTitle() {return title;}public void setTitle(String title) {this.title = title;}public String getIcon() {return icon;}public void setIcon(String icon) {this.icon = icon;}public String getHref() {return href;}public void setHref(String href) {this.href = href;}public Boolean getSpread() {return spread;}public void setSpread(Boolean spread) {this.spread = spread;}public List<TreeNode> getChildren() {return children;}public void setChildren(List<TreeNode> children) {this.children = children;}public TreeNode() {}/*** 构建树节点菜单* @param id 节点编号* @param pid 父节点* @param title 节点标题* @param icon 节点图标* @param href 节点菜单路径* @param spread 节点展开状态*/public TreeNode(Integer id, Integer pid, String title, String icon, String href, Boolean spread) {this.id = id;this.pid = pid;this.title = title;this.icon = icon;this.href = href;this.spread = spread;}/*** 构建dtree组件* @param id 编号* @param pid 父级编号* @param title 名称* @param spread 展开状态*/public TreeNode(Integer id, Integer pid, String title, Boolean spread) {this.id = id;this.pid = pid;this.title = title;this.spread = spread;}/*** 带参构造方法* @param id 菜单权限ID* @param pid 菜单权限父ID* @param title 菜单权限名称* @param spread 是否展开* @param checkArr 复选框是否选中*/public TreeNode(Integer id, Integer pid, String title, Boolean spread, String checkArr) {this.id = id;this.pid = pid;this.title = title;this.spread = spread;this.checkArr = checkArr;}
}
2.2、初始化查询树形菜单控制器
在
RoleController
角色管理控制器中编写
@Resource
MenuService menuService;
/*** 查询菜单数节点返回* @return*/
@RequestMapping("/initMenuTree")
public DataGridViewResult initMenuTree(){List<Menu> menuList = menuService.findMenuList();// 创建集合保存树节点信息List<TreeNode> treeNodes = new ArrayList<TreeNode>();// 循环菜单添加for (Menu menu : menuList) {// 定义变量,表示是否展开boolean spread = (menu.getSpread() == null || menu.getSpread() == 1)?true:false;treeNodes.add(new TreeNode(menu.getId(),menu.getPid(),menu.getTitle(),spread));}return new DataGridViewResult(treeNodes);
}
渲染效果
3、完成初始化菜单数
3.1、创建中间表数据库
CREATE TABLE `db_hotel_jt11`.`sys_role_menu` (`rid` int NOT NULL,`mid` int NOT NULL
);
3.2、根据角色id查询菜单信息
在
MenuMapper
接口中编写查询接口以及对于的查询映射配置
/*** 根据角色id查询菜单id* @param roleid* @return*/
List<Integer> findMenuListByRoleId(int roleid);
查询映射配置
<select id="findMenuListByRoleId" resultType="java.lang.Integer">select mid from sys_role_menu where rid = #{roleId}
select>
3.3、根据角色id查询菜单的业务层编写
在
MenuService
中编写接口和实现类
/*** 根据角色id查询菜单信息* @param roleid* @return*/
public List<Integer> findMenuListByRoleId(int roleid) {return menuMappere.findMenuListByRoleId(roleid);
}
3.4、对于的持久层和业务层代码编写
持久层接口,在MenuMapper
中编写
/*** 根据菜单编号查询菜单信息* @param menuListByRoleId* @return*/
List<Menu> findMenuByMenuid(List<Integer> menuListByRoleId);
映射文件
<select id="findMenuByMenuid" resultType="com.zcl.entity.Menu">select * from sys_menu where id in<foreach collection="list" item="menuIds" open="(" separator="," close=")">#{menuIds}foreach>
select>
业务层接口,在MenuService
中编写
/*** 根据菜单id查询菜单信息* @param menuListByRoleId*/
List<Menu> findMenuByMenuid(List<Integer> menuListByRoleId);
业务层实现类
/*** 根据菜单id查询菜单信息* @param menuListByRoleId*/
public List<Menu> findMenuByMenuid(List<Integer> menuListByRoleId) {return menuMappere.findMenuByMenuid(menuListByRoleId);
}
控制器的实现
完善上一次的控制器
一定要在请求的页面中传递角色id过来查询数据
/*** 查询菜单数节点返回* @return*/
@RequestMapping("/initMenuTree")
public DataGridViewResult initMenuTree(Integer roleId){// 1、查询所有的菜单信息List<Menu> menuList = menuService.findMenuList();// 2、根据角色id查询已拥有的菜单信息List<Integer> menuListByRoleId = menuService.findMenuListByRoleId(roleId);// 3、创建临时变量存储List<Menu> currentMenus = new ArrayList<Menu>();// 判断集合是否有菜单idif(menuListByRoleId != null && menuListByRoleId.size() > 0){// 根据菜单id查询菜单信息【对比已有菜单】currentMenus = menuService.findMenuByMenuid(menuListByRoleId);}// 创建集合保存树节点信息List<TreeNode> treeNodes = new ArrayList<TreeNode>();// 循环菜单遍历所有菜单for (Menu menu : menuList) {// 定义变量,是否被选择状态,0表示不选择,1表示选择String checkArr = "0";// 内层循环遍历当前角色拥有的权限菜单for (Menu currentMenu : currentMenus) {// 判断菜单id是否相等if(currentMenu.getId().equals(menu.getId())){checkArr = "1";break;}}// 定义变量,表示是否展开boolean spread = (menu.getSpread() == null || menu.getSpread() == 1)?true:false;treeNodes.add(new TreeNode(menu.getId(),menu.getPid(),menu.getTitle(),spread,checkArr));}return new DataGridViewResult(treeNodes);
}
展示效果
前提是在数据库表中填写了角色和菜单的关系到中间表中
4、保存分配菜单【重点】
1、前端页面改造
// 分配菜单弹出窗口
function openGrantMenuWindow(data){mainIndex = layer.open({type: 1,title:"分配【"+data.roleName+"】菜单信息",area: ['300px', '500px'],content: $("#selectRoleMenuDiv"), btn: ['确认', '取消'], yes: function (index, layero) {// 获取复选框选中的值var params = dtree.getCheckbarNodesParam("roleTree");// 判断是否选中if(params.length > 0){// 定义数组保存选中的菜单值var idArr = [];// 循环获取选中的值for (let i = 0; i < params.length; i++) {// nodeId是选中的树节点的值,固定不能更改的idArr.push(params[i].nodeId);}// 将数组装转换成字符串[选中的菜单id]var ids = idArr.join(",");// 发起ajax请求,$.post("/admin/role/saveRoleMenu",{"ids":ids,"roleId":data.id},function (result) {layer.msg(result.message);},"json");}else {layer.msg("请选择要分配的菜单");}}, btn2: function (index, layero) {//按钮【按钮二】的回调},success:function(){// 初始化树dtree.render({elem: "#roleTree",url: "/admin/role/initMenuTree?roleId="+data.id, // 使用url加载(可与data加载同时存在)dataStyle:"layuiStyle", // 使用layui风格样式的数据格式dataFormat:"list", // 配置data的风格为listresponse:{message:"msg",statusCode:0}, // 修改response中返回数据的定义checkbar: true,checkbarType: "all" // 默认就是all,其他的值为: no-all p-casc self only});}});
}
2、控制器改造
/*** 分配菜单给角色* @param ids* @param roleId* @return*/
@RequestMapping("/saveRoleMenu")
public String saveRoleMenu(String ids,Integer roleId){HashMap<String, Object> map = new HashMap<String, Object>();// 调用保存菜单分配信息if(roleService.saveRoleMenu(ids,roleId)>0){map.put("message","角色菜单分配成功");}else{map.put("message","角色菜单分配失败");}return JSON.toJSONString(map);
}
3、业务逻辑层
接口就不写了
/*** 保存角色菜单关系* @param ids* @param roleId* @return*/
public int saveRoleMenu(String ids, Integer roleId) {try {// 根据角色id删除原有的菜单关系roleMapper.deleteRoleMenu(roleId);// 将ids拆分成数组String[] idsStr = ids.split(",");// 循环调用添加角色菜单关系for (int i = 0; i < idsStr.length; i++) {// 调用保存关系roleMapper.addRoleMenu(roleId,idsStr[i]);}return 1; // 成功}catch (Exception e) {e.printStackTrace();}return 0;
}
4、持久层的编写
使用注解的形式开发
/*** 根绝角色id删除原来的角色数据* @param roleId*/
@Delete("delete from sys_role_menu where rid = #{roleId}")
void deleteRoleMenu(Integer roleId);/*** 添加保存角色和菜单数据* @param roleId* @param menus*/
@Insert("insert into sys_role_menu(mid,rid) values (#{menus},#{roleId})")
void addRoleMenu(@Param("roleId") Integer roleId, @Param("menus") String menus);
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!