layui + layer弹出层增删改的操作
一、弹出层说明
/* ========== 弹出层说明 ==============*/
function useradd() { // useradd()，点击事件
//var pageNum = $('.uid').val();
layui.use('layer', function () {
layer.open({ // 打开弹出层
type: 2, // 2 - url
content: ["/user/user_add"], // 弹出层的 url []不出现滚动,'no
area: ["600px", "400px"], // 大小
title: ['用户添加'], // 定义弹出层名称 'font-size:13px;margin-top:10px;'
fixed: false, // 鼠标滚动时，层是否固定在可视区域
//maxmin: true, // 最大小化按钮
shadeClose: true,
btn: ['添加', '取消'], //按钮，可定义多个，btn2，btn3....获取回调，第一个按钮为 yes 获取回调
yes: function (index, layero) { //请求回调，按钮【添加】的回调
var iframeWin = window[layero.find('iframe')[0]['name']]; //当前页获得 iframe页的窗口对象，执行iframe页的方法：
iframeWin.userlayuiadd(); //调用子页面的方法，得到子页面返回的值
//layer.msg('添加成功');
layer.close(index); //关闭窗口（需要手动）
}, btn2: function (index, layero) { //请求回调，按钮【取消】的回调 return false 开启该代码可禁止点击该按钮关闭
}, cancel: function () { //请求回调，右上角关闭执行 return false 开启该代码可禁止点击该按钮关闭
}, success: function (layero, index) { //请求回调，打开窗口时执行
}, end: function () { //请求回调，窗口销毁时执行
//window.location.href='/user/pageAll';
location.reload(); //窗口销毁时刷新主页面数据
}
})
})
}
二、1.添加弹出层（父）
添加按钮，定义在右上
<-- layui -js 引自己的 -->
二、2.添加弹出层（子表单）
使用 ajax 提交表单方便获取成功失败消息
======================添加页，弹出层的子页面======================
<-- layui -js 引自己的 jquery.js 随意引哪里的 -->
三、1.修改弹出层（父）
1、使用 ajax 提交表单方便获取成功失败消息
2、修改url 需要 Id ，从后台查询数据回显到添加页，
如：th:value="${user.username}"
3、th:οnclick="|user_update(’${u.userId}’)|"
此为 thymeleaf 模版的点击事件传值
按钮事件
/* ========== 修改弹出层 =========user_update=====*/
function user_update(id) {
layui.use('layer', function () {
layer.open({
type: 2,
content: ["/user/updateId?id="+id],
area: ["600px", "400px"],
title: ['用户修改'],
fixed: false,
//maxmin: true,
shadeClose: true,
end: function () {
location.reload();
}
})
})
}
三、2.修改弹出层（子）
jquery + layui js，自己引
四、删除弹出层（父）
此方法使用的url ，不安全，后台需要重定向，或者自己写ajax，
不过执行完删除的 ajax 后主页面刷新就自己想办法处理了，可以调用window.location.href 到主页的url
mvc重定向 : redirect ----- 如： redirect:/user/pageAll 重定向到查询数据的方法
/* ========== 删除提示弹出层 ==============*/
function user_delete(id) {
layui.use('layer', function () {
layer.msg('你确定要删除么？', {
time: 0 //不自动关闭
,btn: ['必须删', '不删了']
,yes: function(index){
window.location.href='/user/deleteId?id='+id;
layer.close(index);
layer.msg('删除成功', { icon: 6 });
}
});
})
}
// id 删除数据
@GetMapping("/deleteId")
public String deleteUserId(Long id) {
userService.deleteId(id);
return "redirect:/user/pageAll";
}