共计 20618 个字符，预计需要花费 52 分钟才能阅读完成。
1 菜单治理页面设计
1.1 业务设计
菜单治理又称为资源管理，是系统资源对外的表现形式。本模块次要是实现对菜单进行增加、批改、查问、删除等操作。
CREATE TABLE `sys_menus` (`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(50) DEFAULT NULL COMMENT '资源名称',
`url` varchar(200) DEFAULT NULL COMMENT '资源 URL',
`type` int(11) DEFAULT NULL COMMENT '类型 1：菜单 2：按钮',
`sort` int(11) DEFAULT NULL COMMENT '排序',
`note` varchar(100) DEFAULT NULL COMMENT '备注',
`parentId` int(11) DEFAULT NULL COMMENT '父菜单 ID，一级菜单为 0',
`permission` varchar(500) DEFAULT NULL COMMENT '受权(如：sys:user:create)',
`createdTime` datetime DEFAULT NULL COMMENT '创立工夫',
`modifiedTime` datetime DEFAULT NULL COMMENT '批改工夫',
`createdUser` varchar(20) DEFAULT NULL COMMENT '创立用户',
`modifiedUser` varchar(20) DEFAULT NULL COMMENT '批改用户',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='资源管理';菜单表与角色表是多对多的关系，在表设计时，多对多关系通常由两头表 (关系表) 进行保护
基于角色菜单表的设计，其角色和菜单对应的关系数据要存储到关系表中，其具体存储模式
菜单与角色的关系表脚本设计如下：
CREATE TABLE `sys_role_menus` (`id` int(11) NOT NULL AUTO_INCREMENT,
`role_id` int(11) DEFAULT NULL COMMENT '角色 ID',
`menu_id` int(11) DEFAULT NULL COMMENT 'ID',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='角色与菜单对应关系';1.2 原型设计
当在主页左侧菜单栏，点击菜单治理时，在主页内容出现区，出现菜单列表页面
当在菜单列表页面点击增加按钮时，异步加载菜单编辑页面，并在列表内容出现区，出现菜单编辑页面, 如图 - 4 所示。
在菜单编辑页面抉择上级菜单时，异步加载菜单信息，并以树结构的模式出现上级菜单
1.3 API 设计
菜单治理业务后盾 API 分层架构及调用关系如图
2 菜单治理页面展现
2.1 首页菜单事件处理
▪ 业务形容与设计实现
首先筹备菜单列表页面(/templates/pages/sys/menu_list.html)，而后在 starter.html 页面中点击菜单治理时异步加载菜单列表页面。
▪ 要害代码设计与实现
找到我的项目中的 starter.html 页面，页面加载实现当前，注册菜单治理项的点击事件，当点击菜单治理时，执行事件处理函数。要害代码如下：
$(function(){
…
doLoadUI("load-menu-id","menu/menu_list")
})阐明: 对于 doLoadUI 函数, 如果在 starter.html 中曾经定义, 则无需再次定义.
function doLoadUI(id,url){$("#"+id).click(function(){$("#mainContentId").load(url);
});
}其中，load 函数为 jquery 中的 ajax 异步申请函数。
2.2 菜单列表页面
▪ 业务形容与设计实现
本页面出现菜单信息时要以树结构模式进行出现。此树结构会借助 jquery 中的 treeGrid 插件进行实现，所以在菜单列表页面须要引入 treeGrid 相干 JS。然而，具体的 treeGrid 怎么用可自行在网上进行查问（已比拟成熟）。
▪ 要害代码设计与实现：
要害 JS 引入（menu_list.html），代码如下：
<script type="text/javascript" src="bower_components/treegrid/jquery.treegrid.extension.js"></script>
<script type="text/javascript" src="bowe
r_components/treegrid/jquery.treegrid.min.js"></script>
<script type="text/javascript" src="bower_components/treegrid/tree.table.js"></script>3 菜单治理页面代码实现
3.1 菜单列表数据实现
3.1.1 数据加载时序
页面数据展现
菜单列表页面加载实现，启动菜单数据异步加载操作，本次菜单列表页面要出现菜单以及上级菜单信息, 其数据查问时，数据的封装及传递过程
页面菜单数据删除展现
基于用户在列表页面上抉择的的菜单记录 ID，执行删除操作，本次删除业务实现中，首先要基于 id 判断以后菜单是否有子菜单，如果有子菜单则不容许删除，没有则先删除菜单角色关系数据，而后再删除菜单本身信息。
上级菜单页面展现
在菜单编辑页面上，点击上级菜单时，其数据加载时序剖析
菜单数据增加实现
用户在菜单编辑页面输出数据，而后异步提交到服务端，其繁难数据传递根本架构
用户在菜单增加页面中填写好菜单数据，而后点击保留按钮，将用户填写的数据增加到数据库。
菜单数据更新展现
当点击编辑页面更新按钮时
3.1.2 代码实现
第一步：创立 SysMenuDao 层接口
package com.cy.pj.sys.dao;
import com.cy.pj.common.pojo.Node;
import com.cy.pj.sys.pojo.SysMenu;
import com.cy.pj.sys.pojo.SysUserMenu;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
import java.util.Map;
@Mapper
public interface SysMenuDao {List<SysUserMenu> findMenusByIds(List<Integer> menuIds);
// 基于菜单 ID 获取受权示意
List<String> findPermissions(List<Integer> menuIds);
int updateObject(SysMenu entity);
@Insert("insert into sys_menus" +
"(name,url,type,sort,note,parentId,permission,createdTime,modifiedTime,createdUser,modifiedUser)" +
"values" +
"(#{name},#{url},#{type},#{sort},#{note},#{parentId},#{permission},now(),now(),#{createdUser},#{modifiedUser})")
int insertObject(SysMenu entity);
@Select("select id,name,parentId from sys_menus")
List<Node> findZtreeMenuNodes();
@Select("select count(*) from sys_menus where parentId=#{id}")
int getChildCount(Integer id);
@Delete("delete from sys_menus where id=#{id}")
int deleteObject(Integer id);
// 查问所有菜单信息
List<Map<String,Object>> findObjects();}第二步：创立 SysMenuMapper.xml 映射文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.cy.pj.sys.dao.SysMenuDao">
<resultMap type="com.cy.pj.sys.pojo.SysUserMenu" id="sysUserMenu">
<!-- 一级菜单映射 -->
<id property="id" column="id"/>
<result property="name" column="name"/>
<result property="url" column="url"/>
<!-- 二级菜单映射 -->
<collection property="childs" ofType="com.cy.pj.sys.pojo.SysUserMenu">
<id property="id" column="cid"/>
<result property="name" column="cname"/>
<result property="url" column="curl"/>
</collection>
</resultMap>
<select id="findMenusByIds"
resultMap="sysUserMenu">
select p.id,p.name,p.url,c.id cid,c.name cname,c.url curl
from sys_menus p join sys_menus c
on c.parentId=p.id
<where>
<foreach collection="menuIds"
open="("
close=")"
separator="or"
item="menuId">
c.id=#{menuId}
</foreach>
and p.parentId is null
</where>
</select>
<select id="findPermissions"
resultType="string">
select permission <!-- sys:user:update -->
from sys_menus
where id in
<foreach collection="menuIds"
open="("
close=")"
separator=","
item="item">
#{item}
</foreach>
</select>
<!-- 查问所有菜单以及菜单对应的上级菜单，当没有上级菜单时，以后菜单的上级菜单显示为 null-->
<select id="findObjects" resultType="map">
/* 办法 1（左外关联查问）*/
/*select c.*,p.name parentName
from sys_menus c left join sys_menus p
on c.parentId=p.id*/
/* 办法 2（嵌套查问）*/
select c.*,(select p.name
from sys_menus p
where c.parentId=p.id) parentName
from sys_menus c
</select>
<update id="updateObject"
parameterType="com.cy.pj.sys.pojo.SysMenu">
update sys_menus
set
name=#{name},
type=#{type},
sort=#{sort},
url=#{url},
parentId=#{parentId},
permission=#{permission},
modifiedUser=#{modifiedUser},
modifiedTime=now()
where id=#{id}
</update>
</mapper>第三步：创立 SysMenuService 接口
在菜单查问中，业务层对象次要是借助数据层对象实现菜单数据的查问。后续还能够基于 AOP 对数据进行缓存，记录拜访日志等。
package com.cy.pj.sys.servive;
import com.cy.pj.common.pojo.Node;
import com.cy.pj.sys.pojo.SysMenu;
import com.cy.pj.sys.pojo.SysUserMenu;
import java.util.List;
import java.util.Map;
public interface SysMenuService {List<SysUserMenu> findUserMenusByUserId(Integer id);
int updateObject(SysMenu entity);
int saveObject(SysMenu entity);
List<Node> findZtreeMenuNodes();
int deleteObject(Integer id);
List<Map<String,Object>> findObjects();}第四步：创立 SysMenuServiceImpl 实现类
package com.cy.pj.sys.servive.impl;
import com.cy.pj.common.exception.ServiceException;
import com.cy.pj.common.pojo.Node;
import com.cy.pj.sys.dao.SysUserRoleDao;
import com.cy.pj.sys.pojo.SysMenu;
import com.cy.pj.sys.dao.SysMenuDao;
import com.cy.pj.sys.dao.SysRoleMenuDao;
import com.cy.pj.sys.pojo.SysUserMenu;
import com.cy.pj.sys.servive.SysMenuService;
import io.micrometer.core.instrument.util.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
import java.util.Map;
@Service
public class SysMenuServiceImpl implements SysMenuService {
@Autowired
private SysMenuDao sysMenuDao;
@Autowired
private SysRoleMenuDao sysRoleMenuDao;
@Autowired
private SysUserRoleDao sysUserRoleDao;
@Override
public List<SysUserMenu> findUserMenusByUserId(Integer id) {
//1. 对用户 id 进行判断
//2. 基于用户 id 查找用户对应的角色 id
List<Integer> roleIds=
sysUserRoleDao.findRoleIdsByUserId(id);
//3. 基于角色 id 获取角色对应的菜单信息, 并进行封装.
List<Integer> menuIds=
sysRoleMenuDao.findMenuIdsByRoleIds(roleIds);
//4. 基于菜单 id 获取用户对应的菜单信息并返回
return sysMenuDao.findMenusByIds(menuIds);
}
@Override
public int updateObject(SysMenu entity) {
//1. 非法验证
if(entity==null)
throw new ServiceException("保留对象不能为空");
if(StringUtils.isEmpty(entity.getName()))
throw new ServiceException("菜单名不能为空");
//2. 更新数据
int rows=sysMenuDao.updateObject(entity);
if(rows==0)
throw new ServiceException("记录可能曾经不存在");
//3. 返回数据
return rows;
}
@Override
public int saveObject(SysMenu entity) {
//1. 非法验证
if(entity==null)
throw new IllegalArgumentException("保留对象不能为空");
if(StringUtils.isEmpty(entity.getName()))
throw new IllegalArgumentException("菜单名不能为空");
//2. 保留数据
int rows=sysMenuDao.insertObject(entity);
//3. 返回数据
return rows;
}
@Override
public List<Node> findZtreeMenuNodes() {return sysMenuDao.findZtreeMenuNodes();
}
@Override
public int deleteObject(Integer id) {
//1, 参数校验
if(id==null||id<1)
throw new IllegalArgumentException("id 值有效");
//2，断定菜单是否有子菜单，有则不容许删除
int childCount=sysMenuDao.getChildCount(id);
if(childCount>0)
throw new ServiceException("请先删除子菜单");
//3，删除关系数据
sysRoleMenuDao.deleteObjectsByMenuId(id);
int rows=sysMenuDao.deleteObject(id);
//4，删除本身信息
if(rows==0)
throw new ServiceException("记录可能曾经不存在");
return rows;
}
@Override
public List<Map<String, Object>> findObjects() {return sysMenuDao.findObjects();
}
}第五步：创立 SysMenuController 管制层
管制层对象次要负责申请和响应数据的解决，例如，本模块通过业务层对象执行业务逻辑，再通过 VO 对象封装响应后果(次要对业务层数据增加状态信息)，最初将响应后果转换为 JSON 格局的字符串响应到客户端。
package com.cy.pj.sys.controller;
import com.cy.pj.common.pojo.JsonResult;
import com.cy.pj.sys.pojo.SysMenu;
import com.cy.pj.sys.servive.SysMenuService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class SysMenuController {
@Autowired
private SysMenuService sysMenuService;
@RequestMapping("/menu/doUpdateObject")
public JsonResult doUpdateObject(SysMenu entity){sysMenuService.updateObject(entity);
return new JsonResult("update ok");
}
@RequestMapping("/menu/doSaveObject")
public JsonResult doSaveObject(SysMenu entity){sysMenuService.saveObject(entity);
return new JsonResult("save ok");
}
@RequestMapping("/menu/doFindZtreeMenuNodes")
public JsonResult doFindZtreeMenuNodes(){
return new JsonResult(sysMenuService.findZtreeMenuNodes());
}
@RequestMapping("/menu/doDeleteObject")
public JsonResult doDeleteObject(Integer id){sysMenuService.deleteObject(id);
return new JsonResult("delete ok");
}
@GetMapping("menu/doFindObjects")
public JsonResult doFindObjects(){return new JsonResult(sysMenuService.findObjects());
}
}第六步：创立 SysRoleMenuDao 接口
package com.cy.pj.sys.dao;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import java.util.List;
@Mapper
public interface SysRoleMenuDao {
List<Integer> findMenuIdsByRoleIds(@Param("roleIds")List<Integer> roleIds);
int insertObjects(@Param("roleId")Integer roleId,
@Param("menuIds")Integer[] menuIds);
@Delete("delete from sys_role_menus where role_id=#{roleId}")
int deleteObjectsByRoleId(Integer roleId);
// 基于菜单 id 执行关系
@Delete("delete from sys_role_menus where menu_id=#{menuId}")
int deleteObjectsByMenuId(Integer menuId);
}第七步：创立 SysRoleMenuMapper.xml 文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.cy.pj.sys.dao.SysRoleMenuDao">
<select id="findMenuIdsByRoleIds"
resultType="int">
select menu_id
from sys_role_menus
where role_id in
<foreach collection="roleIds"
open="("
close=")"
separator=","
item="item">
#{item}
</foreach>
</select>
<select id="findMenuIdsByRoleId"
resultType="int">
select menu_id
from sys_role_menus
where role_id=#{id}
</select>
<insert id="insertObjects">
insert into sys_role_menus
(role_id,menu_id)
values
<foreach collection="menuIds"
separator=","
item="menuId">
(#{roleId},#{menuId})
</foreach>
</insert>
</mapper>第八步：创立 Node 类
定义值对象封装查问到的上级菜单 id，name，parentId 信息。
package com.cy.pj.common.pojo;
import lombok.Data;
import java.io.Serializable;
@Data
public class Node implements Serializable {
private static final long serialVersionUID = -7022202313802285223L;
private Integer id;
private String name;
private Integer parentId;
}第九步：创立 SysMenu 类
定义长久化对象，封装客户端申请数据，并将数据传递到数据层进行长久化。
package com.cy.pj.sys.pojo;
import lombok.Data;
import java.io.Serializable;
import java.util.Date;
@Data
public class SysMenu implements Serializable {
private static final long serialVersionUID = -1086340530112865421L;
private Integer id;
/** 菜单名称 */
private String name;
/** 菜单 url: log/doFindPageObjects*/
private String url;
/** 菜单类型(两种: 按钮, 一般菜单)*/
private Integer type=1;
/** 排序(序号)*/
private Integer sort;
/** 备注 */
private String note;
/** 上级菜单 id*/
private Integer parentId;
/** 菜单对应的权限标识(sys:log:delete)*/
private String permission;
/** 创立用户 */
private String createdUser;
/** 批改用户 */
private String modifiedUser;
private Date createdTime;
private Date modifiedTime;
}3.2 客户端页面出现
menu_list.html
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">
菜单治理 </h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 100px;">
<div class="input-group-btn">
<button type="button"
class="btn btn-success btn-delete">
删除 </button>
<button type="button" class="btn btn-default btn-add"> 增加 </button>
<button type="button" class="btn btn-default btn-update"> 批改 </button>
</div>
</div>
</div>
</div>
<!-- /.box-header -->
<div class="box-body table-responsive no-padding">
<table id="menuTable" class="table table-hover">
<thead>
<tr>
<th data-field="selectItem" data-checkbox="true"></th>
</tr>
</thead>
</table>
</div>
</div>
<!-- /.box -->
</div>
</div>
<script type="text/javascript" src="bower_components/treegrid/jquery.treegrid.extension.js"></script>
<script type="text/javascript" src="bower_components/treegrid/jquery.treegrid.min.js"></script>
<script type="text/javascript" src="bower_components/treegrid/tree.table.js"></script>
<script type="text/javascript">
/**
* 初始化表格的列
*/
var columns = [
{
field : 'selectItem',
radio : true
},
{
title : '菜单 ID',
field : 'id',
align : 'center',
valign : 'middle',
width : '80px'
},
{
title : '菜单名称',
field : 'name',
align : 'center',
valign : 'middle',
width : '130px'
},
{
title : '上级菜单',
field : 'parentName',
align : 'center',
valign : 'middle',
sortable : true,
width : '100px'
},
{
title : '类型',
field : 'type',
align : 'center',
valign : 'middle',
width : '70px',
formatter : function(item, index) {if (item.type == 1) {return '<span class="label label-success"> 菜单 </span>';}
if (item.type == 2) {return '<span class="label label-warning"> 按钮 </span>';}
}
},
{
title : '排序号',
field : 'sort',
align : 'center',
valign : 'middle',
sortable : true,
width : '70px'
},
{
title : '菜单 URL',
field : 'url',
align : 'center',
valign : 'middle',
width : '160px'
},
{
title : '受权标识',// 要显示的题目名称
field : 'permission',//json 串中的 key
align : 'center',// 程度居中
valign : 'middle',// 垂直居中
sortable : false // 是否排序
} ];// 格局来自官网 demos -->treeGrid(jquery 扩大的一个网格树插件)
$(function(){doGetObjects();
$(".input-group-btn")
.on("click",".btn-delete",doDeleteObject)
.on("click",".btn-add,.btn-update",doLoadEditUI);
})
function doLoadEditUI(){
var title;
// 基于点击对象的 class 属性值, 批改题目
if($(this).hasClass("btn-add")){title="增加菜单";}else{
title="批改菜单";
var item=doGetCheckedItem();
if(!item){alert("请先抉择");
return;
}
$("#mainContentId")
.data("rowData",item);
}
// 异步加载编辑页面
var url="menu/menu_edit";
$("#mainContentId").load(url,function(){$(".box-title").html(title);
})
}
function doGetCheckedItem(){return $("tbody input[type='radio']:checked")
.parents("tr").data("rowData");
}
function doGetCheckedId(){
// 办法 1:
//var radio=$("tbody input[type='radio']:checked"); //if(radio)return radio.val(); // 办法 2:
//1. 获取选中的记录
var selections=$("#menuTable")
//bootstrapTreeTable 是 treeGrid 插件外部定义的 jquery 扩大函数
//getSelections 为扩大函数外部要调用的一个办法
.bootstrapTreeTable("getSelections");
//2. 对记录进行断定
if(selections.length==1)
return selections[0].id;
}
function doDeleteObject(){
//1. 获取选中记录的 id 值
var id=doGetCheckedId();
console.log("id="+id);
if(!id){alert("请先选中");
return;
}
//2. 给出提醒是否确认删除
if(!confirm("确认删除吗"))return;
//3. 发送异步申请执行删除操作
//3.1 定义申请参数
var params={"id":id};
//3.2 定义申请 url
var url="menu/doDeleteObject";
//3.3 发送异步申请
$.post(url,params,function(result){if(result.state==1){alert(result.message);
$("tbody input[type='radio']:checked")
.parents("tr").remove();}else{alert(result.message);
}
})
}
function doGetObjects(){
// 移除 mainContentId 地位的数据
$("#mainContentId").removeData();
var treeTable=new TreeTable(
"menuTable",//tableId
"menu/doFindObjects",//url
columns);// 表中列的配置
//treeTable.setExpandColumn(2);
// 做表格初始化
treeTable.init(); // 发动 ajax 申请(借助 ajax 函数)
}菜单列表页面(/templates/pages/sys/menu_edit.html)
<!-- Horizontal Form -->
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title"> 增加菜单 </h3>
</div>
<!-- /.box-header -->
<!-- form start --> <form class="form-horizontal">
<div class="box-body">
<div class="form-group">
<label for="nameId" class="col-sm-2 control-label"> 类型 </label>
<div class="col-sm-10 typeRadio">
<label class="radio-inline">
<input type="radio" name="typeId" value="1" checked> 菜单 </label>
<label class="radio-inline">
<input type="radio" name="typeId" value="2"> 按钮 </label>
</div>
</div>
<div class="form-group">
<label for="nameId" class="col-sm-2 control-label"> 菜单名称 </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="nameId" placeholder="名称">
</div>
</div>
<div class="form-group">
<label for="parentId" class="col-sm-2 control-label"> 上级菜单 </label>
<div class="col-sm-10">
<input type="text" class="form-control load-sys-menu" readonly="readonly" id="parentId" placeholder="上级菜单">
</div>
</div>
<div class="form-group">
<label for="urlId" class="col-sm-2 control-label"> 菜单 URL</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="urlId" placeholder="url">
</div>
</div>
<div class="form-group">
<label for="permissionId" class="col-sm-2 control-label"> 受权标识：</label>
<div class="col-sm-10">
<input type="text" id="permissionId"
placeholder="多个用逗号分隔，如：user:list,user:create"
class="form-control">
</div>
</div>
<div class="form-group">
<label for="sortId" class="col-sm-2 control-label"> 排序号：</label>
<div class="col-sm-10">
<input type="text" id="sortId" placeholder="排序号"
class="form-control">
</div>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<button type="button" class="btn btn-default btn-cancel">Cancel</button>
<button type="button" class="btn btn-info pull-right btn-save">Save</button>
</div>
<!-- /.box-footer -->
</form>
<!-- zTree 对应的 div -->
<div class="layui-layer layui-layer-page layui-layer-molv layer-anim" id="menuLayer" type="page" times="2" showtime="0" contype="object"
style="z-index:59891016; width: 300px; height: 450px; top: 100px; left: 500px; display:none">
<div class="layui-layer-title" style="cursor: move;"> 抉择菜单 </div>
<div class="layui-layer-content" style="height: 358px;">
<div style="padding: 10px;" class="layui-layer-wrap">
<ul id="menuTree" class="ztree"></ul> <!-- 动静加载树 -->
</div>
</div>
<span class="layui-layer-setwin"> <a class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel" ></a></span>
<div class="layui-layer-btn layui-layer-btn-">
<a class="layui-layer-btn0 btn-confirm"> 确定 </a>
<a class="layui-layer-btn1 btn-cancel"> 勾销 </a>
</div>
</div>
</div>
<script type="text/javascript" src="bower_components/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="bower_components/layer/layer.js">
</script>
<script type="text/javascript">
var zTree; //zTree 是第三方扩大的一个 Jquery 插件
// 初始化 zTree 时会用到
var setting = {
data : {
simpleData : {
enable : true,// 示意应用简略数据模式
idKey : "id", // 节点数据中保留惟一标识的属性名称
pIdKey : "parentId", // 节点数据中保留其父节点惟一标识的属性名称
rootPId : null // 根节点 id
}//json 格局 javascript 对象
}
}//json 格局的 javascript 对象
$(function(){$(".form-horizontal")// 事件不能注册到 $("#mainContentId")对象上
.on("click",".load-sys-menu",doLoadZtreeNodes);
$("#menuLayer")
.on("click",".btn-confirm",doSetSelectNode)
.on("click",".btn-cancel",doHideTree);
$(".box-footer")
.on("click",".btn-cancel",doCancel)
.on("click",".btn-save",doSaveOrUpdate)
var data=$("#mainContentId").data("rowData");
if(data)doInitEditFormData(data);
})
function doInitEditFormData(data){/* $("input[type='radio']").each(function(){if($(this).val()==data.type){$(this).prop("checked",true); } }) */ $(".typeRadio input[value='"+data.type+"']").prop("checked",true);
$("#nameId").val(data.name);
$("#sortId").val(data.sort);
$("#urlId").val(data.url);
$("#permissionId").val(data.permission);
$("#parentId").val(data.parentName);
$("#parentId").data("parentId",data.parentId);
}
// 获取表单数据
function doGetEditFormData(){
var params={type:$("form input[name='typeId']:checked").val(),
name:$("#nameId").val(),
url:$("#urlId").val(),
sort:$("#sortId").val(),
permission:$("#permissionId").val(),
parentId:$("#parentId").data("parentId")
}
return params;
}
function doSaveOrUpdate(){
//1. 获取表单数据
var params=doGetEditFormData();
var rowData=
$("#mainContentId").data("rowData");
//2. 异步提交表单数据(post)
var insertUrl="menu/doSaveObject";
var updateUrl="menu/doUpdateObject";
var url=rowData?updateUrl:insertUrl;
if(rowData)params.id=rowData.id;
$.post(url,params,function(result){if(result.state==1){alert(result.message);
doCancel();}else{alert(result.message);
}
});
}
// 编辑页面 cancel 事件处理
function doCancel(){
//1. 定义 url
var url="menu/menu_list";
//2. 异步加载列表页面
$("#mainContentId").load(url);
}
//zTree 勾销按钮事件处理函数
function doHideTree(){$("#menuLayer").css("display","none");
}
//zTree 确定按钮事件处理函数
function doSetSelectNode(){
//1. 获取选中的节点对象
var nodes=zTree.getSelectedNodes();
if(nodes.length==1){var selectedNode=nodes[0];
console.log("selectNode",selectedNode);
var rowData=$("#mainContentId").data("rowData");
if(rowData){// 批改时做如下解决
// 断定以后选中的上级菜单节点是否为以后要批改节点的子节点.
var flag=isChild(rowData.id,selectedNode);
if(flag){alert("不能抉择以后节点以及对应子节点");
return;
}
}
//2. 将对象中内容, 填充到表单
$("#parentId").data("parentId",selectedNode.id);
$("#parentId").val(selectedNode.name);
}
//3. 暗藏树对象
doHideTree();}
// 断定以后选中节点是否是以后节点的子节点
function isChild(currentNodeId,selectNode){if(selectNode.id==currentNodeId)return true;
var node=selectNode.getParentNode();
if(!node)return false;
return isChild(currentNodeId,node);
}
function doLoadZtreeNodes(){
var url="menu/doFindZtreeMenuNodes";
// 异步加载数据, 并初始化数据
$.getJSON(url,function(result){if(result.state==1){
// 应用 init 函数须要先引入 ztree 对应的 js 文件
zTree=$.fn.zTree.init($("#menuTree"),
setting,
result.data);//id,name,parentId
//doRemoveNodeFromZtree();// 批改时, 可思考此计划
// 显示 zTree 对应的 div
$("#menuLayer").css("display","block");
}else{alert(result.message);
}
})
}
function doRemoveNodeFromZtree(){
// 断定是否是批改, 如果是批改, 从 zTree 中移除以后菜单以及对应子菜单
var rowData=$("#mainContentId").data("rowData");
if(rowData){//rowData 有值, 示意是批改.
console.log("zTree",zTree);
//1. 获取以后的菜单对象
var node=zTree.getNodeByParam("id",rowData.id,null);
console.log("node",node);
//2. 移除以后菜单.
zTree.removeNode(node);
}
}
</script>
正文完
发表至： springboot
2020-12-12
