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

 更新时间:2020-01-26 03:00:15   作者:佚名   我要评论(0)

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

首先,导入layui需要的css,js文件,这个就不需要多说了。但是有关键的

最近做的系统里,使用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弹出层效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

您可能感兴趣的文章:

  • 使用layui的layer组件做弹出层的例子
  • 解决layui弹出层layer的area过大被遮挡的问题
  • 在layui中layer弹出层点击事件无效的解决方法
  • 解决layer弹出层自适应页面大小的问题
  • 解决layer弹出层的内容页点击按钮跳转到新的页面问题
  • layer实现关闭弹出层刷新父界面功能详解
  • 详解Layer弹出层样式
  • jQuery Layer弹出层传值到父页面的实现代码

相关文章

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

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

    最近做的系统里,使用layui当作前端的框架,就是用了layui自带的layer弹出层,效果图如下。 首先,导入layui需要的css,js文件,这个就不需要多说了。但是有关键的
    2020-01-26
  • Bash 脚本实现每次登录到 Shell 时可以查看 Linux 系统信息

    Bash 脚本实现每次登录到 Shell 时可以查看 Linux 系统信息

    Linux 中有很多可以查看系统信息如处理器信息、生产商名字、序列号等的命令。你可能需要执行多个命令来收集这些信息。同时,记住所有的命令和他们的选项也是有难度。
    2020-01-25
  • shell 里面的奇葩字符实现

    shell 里面的奇葩字符实现

    在我接触过的编程语言里面,最奇葩的两个就属 JavaScript 和 Shell 了。因为它们有着太多的语法糖跟特殊字符,总是能够让你措手不及,并且编程习惯也跟Java 和 Pyth
    2020-01-25
  • flask框架渲染Jinja模板与传入模板变量操作详解

    flask框架渲染Jinja模板与传入模板变量操作详解

    本文实例讲述了flask框架渲染Jinja模板与传入模板变量操作。分享给大家供大家参考,具体如下: 1. 模板简介 模板是一个web开发中必备的模块,因为我们在渲染一个网页
    2020-01-25
  • yii2.0框架场景的简单使用示例

    yii2.0框架场景的简单使用示例

    本文实例讲述了yii2.0框架场景的简单使用。分享给大家供大家参考,具体如下: 一、规则中使用场景 规则场景的使用 模型层 public function rules() { return [
    2020-01-25
  • golang切片内存应用技巧详解

    golang切片内存应用技巧详解

    在 Go 语言中切片是使用非常频繁的一种聚合类型,它代表变长的序列,底层引用一个数组对象。一个切片由三个部分构成:指针、长度和容量。指针指向该切片自己第一个元
    2020-01-25
  • 分享6个Go处理字符串的技巧小结

    分享6个Go处理字符串的技巧小结

    如果你从 Ruby 或者 Python 转型到 Go,将会有很多语言差异需要学习,其中很多问题都是围绕处理 string 类型。 下面是一些字符串的技巧,这些技巧解决了我在使用
    2020-01-25
  • 浅谈go中defer的一个隐藏功能

    浅谈go中defer的一个隐藏功能

    在开始使用Go进行编码时,Defer是要关注的一个很重要的特性。它非常简单:在任何函数中,给其他函数的调用加上前缀 defer以确保该函数在外部函数退出之前立即执行,
    2020-01-25
  • Go 验证字符串中是否包含中文(推荐)

    Go 验证字符串中是否包含中文(推荐)

    发现一个验证字符串是否包含中文滴时候,一个比正则更好使滴方法,而且是golang 自带滴验证。 不需要自己写正则验证,代码如下: package main import ( "fmt"
    2020-01-25
  • 详解golang中发送http请求的几种常见情况

    详解golang中发送http请求的几种常见情况

    方式一 使用http.Newrequest 先生成http.client -> 再生成 http.request -> 之后提交请求:client.Do(request) -> 处理返回结果,每一步的过程都可以设置一些具体
    2020-01-25

最新评论