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

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

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

下面是layui的预定义。

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

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

1. <!-- 更新会议弹出层 -->
2. <div id="update-layer" style="display: none; padding: 20px">
3. <form id="update-form" class="layui-form layui-form-pane" lay-filter="update-form">
4. <div class="layui-form-item" style="display: none;">
5. <label class="layui-form-label">ID</label>
6. <div class="layui-input-block">
7. <input type="text" name="id" class="layui-input" readonly>
8. </div>
9. </div>
10. <div class="layui-form-item">
11. <label class="layui-form-label">会议主题</label>
12. <div class="layui-input-block">
13. <input type="text" name="subject" class="layui-input" lay-verify="required"autocomplete="off">
14. </div>
15. </div>
16. <div class="layui-form-item layui-form-text">
17. <label class="layui-form-label">备注</label>
18. <div class="layui-input-block">
19. <textarea name="remarks" placeholder="请输入内容" class="layui-textarea" ></textarea>
20. </div>
21. </div>
22. <div class="layui-form-item">
23. <div class="layui-input-block">
24. <button class="layui-btn" lay-submit lay-filter="update-form-submit">提交</button>
25. <button type="reset" class="layui-btn layui-btn-primary">重置</button>
26. </div>
27. </div>
28. </form>
29. </div>

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

1. //监听行工具事件
2. table.on('tool(test)', function(obj){
3. var data = obj.data;
4. //console.log(obj)
5. if(obj.event === 'del'){
6. $.ajax({
7. url: "/delMeeting",
8. type: "POST",
9. data: {id: data.id,roomShStatus: data.roomShStatus},
10. success: function (msg) {
11. if (msg) {
12. //删除这一行
13. obj.del();
14. //关闭弹框
15. layer.msg("删除成功", {icon: 6});
16. } else {
17. layer.msg("删除失败", {icon: 6});
18. }
19. }
20. });
21. }
22. else if(obj.event === 'update'){
23. // 每次显示更新会议室的表单前自动为表单填写该行的数据
24. form.val('update-form', {
25. "id": data.id,
26. "subject": data.subject,
27. "remarks": data.remarks
28. });
29. // 显示更新用户表单的弹出层
30. layer.open({
31. type: 1,
32. title: '更新会议室',
33. skin: 'layui-layer-molv',
34. area: ['500px'],
35. content: $('#update-layer')
36. });
37. // 更新会议室表单提交
38. form.on('submit(update-form-submit)', function(data) {
39. // ajax方式更新会议室
40. $.ajax({
41. url: "updateMeeting",
42. type: "POST",
43. data: JSON.stringify(data.field),
44. contentType: 'application/json',
45. dataType: 'json',
46. success: function(data) {
47. if (data.status == 0) {
48. layer.close(layer.index);
49. layer.msg('更新成功');
50. table.reload('test');
51. $("#update-user-form")[0].reset();
52. layui.form.render();
53. } else if(data.status == 1) {
54. layer.close(layer.index);
55. layer.msg('更新失败');
56. $("#update-user-form")[0].reset();
57. layui.form.render();
58. }
59. },
60. error: function() {
61. console.log("ajax error");
62. }
63. });
64. // 阻止表单跳转
65. return false;
66. })
67. }
68. });

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

总结

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