最近做的系统里,使用layui当作前端的框架,就是用了layui自带的layer弹出层,效果图如下。
首先,导入layui需要的css,js文件,这个就不需要多说了。但是有关键的一步必须要做,也是许多新手会常犯的错误,就是没有预定义layui的form和layer,导致表单和弹出层不显示。
下面是layui的预定义。
layui.use(['jquery', 'table', 'layer', 'form'], function() { // 加载layui模块,使用其推荐的【预先加载】方式,详见官网【模块规范】一节 var $ = layui.$; var table = layui.table; var layer = layui.layer; var form = layui.form;
定义完之后可以先写layer弹出层的表单样式,下面是我的layer弹出层表单样式。
<!-- 更新会议弹出层 --> <div id="update-layer" style="display: none; padding: 20px"> <form id="update-form" class="layui-form layui-form-pane" lay-filter="update-form"> <div class="layui-form-item" style="display: none;"> <label class="layui-form-label">ID</label> <div class="layui-input-block"> <input type="text" name="id" class="layui-input" readonly> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">会议主题</label> <div class="layui-input-block"> <input type="text" name="subject" class="layui-input" lay-verify="required" autocomplete="off"> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">备注</label> <div class="layui-input-block"> <textarea name="remarks" placeholder="请输入内容" class="layui-textarea" ></textarea> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="update-form-submit">提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div>
下面是layer弹出层需要的代码。
//监听行工具事件 table.on('tool(test)', function(obj){ var data = 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}); } } }); } else if(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(); } else if(data.status == 1) { layer.close(layer.index); layer.msg('更新失败'); $("#update-user-form")[0].reset(); layui.form.render(); } }, error: function() { console.log("ajax error"); } }); // 阻止表单跳转 return false; }) } });
直接复制上面的代码,稍作修改,就可以生成自己想要的layer弹出层了
总结
以上所述是小编给大家介绍的SSM框架JSP使用Layui实现layer弹出层效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月23日
2024年11月23日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]