微客导航 » 文章资讯 » SSM框架JSP使用Layui实现layer弹出层效果

SSM框架JSP使用Layui实现layer弹出层效果

2023-08-04 11:37:04 155

最近做的系统里，使用layui当作前端的框架，就是用了layui自带的layer弹出层，效果图如下。

首先，导入layui需要的css，js文件，这个就不需要多说了。但是有关键的一步必须要做，也是许多新手会常犯的错误，就是没有预定义layui的form和layer，导致表单和弹出层不显示。

下面是layui的预定义。

layui.use(['jquery','table','layer','form'],function(){
//加载layui模块，使用其推荐的【预先加载】方式，详见官网【模块规范】一节
var$=layui.$;
vartable=layui.table;
varlayer=layui.layer;
varform=layui.form;

定义完之后可以先写layer弹出层的表单样式，下面是我的layer弹出层表单样式。

ID

会议主题

备注

提交重置

下面是layer弹出层需要的代码。

//监听行工具事件
table.on('tool(test)',function(obj){
vardata=obj.data;
//console.log(obj)
if(obj.event==='del'){
$.ajax({
url:"/delMeeting",
type:"POST",
data:{id:data.id,roomShStatus:data.roomShStatus},
success:function(msg){
if(msg){
//删除这一行
obj.del();
//关闭弹框
layer.msg("删除成功",{icon:6});
}else{
layer.msg("删除失败",{icon:6});
}
}
});
}
elseif(obj.event==='update'){
//每次显示更新会议室的表单前自动为表单填写该行的数据
form.val('update-form',{
"id":data.id,
"subject":data.subject,
"remarks":data.remarks
});
//显示更新用户表单的弹出层
layer.open({
type:1,
title:'更新会议室',
skin:'layui-layer-molv',
area:['500px'],
content:$('#update-layer')
});
//更新会议室表单提交
form.on('submit(update-form-submit)',function(data){
//ajax方式更新会议室
$.ajax({
url:"updateMeeting",
type:"POST",
data:JSON.stringify(data.field),
contentType:'application/json',
dataType:'json',
success:function(data){
if(data.status==0){
layer.close(layer.index);
layer.msg('更新成功');
table.reload('test');
$("#update-user-form")[0].reset();
layui.form.render();
}elseif(data.status==1){
layer.close(layer.index);
layer.msg('更新失败');
$("#update-user-form")[0].reset();
layui.form.render();
}
},
error:function(){
console.log("ajaxerror");
}
});
//阻止表单跳转
returnfalse;
})
}
});

直接复制上面的代码，稍作修改，就可以生成自己想要的layer弹出层了

总结

以上所述是小编给大家介绍的SSM框架JSP使用Layui实现layer弹出层效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

SSM框架JSP使用Layui实现layer弹出层效果

热门推荐

随机推荐