layui如何实现添加数据时关闭页面层,并实时刷新表格数据?

简介: layui如何实现添加数据时关闭页面层,并实时刷新表格数据?

可能看到标题的你没有明白我到底想表达啥?(我起名字时删改多遍,这是最终定下来的),不过,为了让大家看的明白,我专门去做了个演示视频:

演示案例使用的技术:ssh框架+layui表格,即简单的对单表数据做了个增删改查。

相信大家看过视频之后,已经知道大体的业务流程,我在这里在简单的说明一下。

1.默认进入首页default.jsp,进入该页面之前将所有数据查询出来,在控制器中放入对象集合,在页面上直接遍历数据即可。

控制器中的代码:

//查询全部年级
  public String getGradeAll(){
    gradeList = gradeService.getGradeAll();
    return "success";
  }

default.jsp中的主要代码:

<table class="layui-table admin-table">
  <thead>
    <tr>
      <th style="width: 30px;">
        <input type="checkbox" lay-filter="allselector" lay-skin="primary">
      </th>
      <th>编号</th>
      <th>名称</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody id="content">
    <c:forEach items="${gradeList }" var="grade">
    <tr>
      <td style="width: 30px;">
        <input type="checkbox" lay-filter="allselector" lay-skin="primary">
      </td>
      <td>${grade.gid }</td>
      <td>${grade.gname }</td>
      <td>
        <a href="javascript:void up(${grade.gid }) ;" id="update" class="layui-btn layui-btn-warm layui-btn-small">修改</a>
        <a href="delGradeById?gid=${grade.gid }" class="layui-btn layui-btn-danger layui-btn-small">删除</a>
      </td>
    </tr>
  </c:forEach>
  
</tbody>
</table>

点击添加的按钮:

利用layui自带的好看弹出层,弹出来一个添加的页面层,代码如下:

添加的按钮:

<blockquote class="layui-elem-quote">
  <a href="javascript:;" class="layui-btn layui-btn-small" id="add">
    <i class="layui-icon">&#xe608;</i> 添加信息
  </a>
</blockquote>

按钮事件:

/* 添加弹出页面 */
$("#add").click(function(){
  layui.use('layer', function(){
    var layer = layui.layer;
    /* 弹出一个页面 */
    layer.open({
      type: 2,
      content: 'saveGrade.jsp' //弹出来一个添加年级的页面
    });
  });
});

添加页面的代码:

<form class="layui-form" action="" id="forms">
  <div class="layui-form-item">
    <label class="layui-form-label">年级名称</label>
    <div class="layui-input-block">
      <input type="text" name="grade.gname" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button id="save" class="layui-btn" lay-submit="" lay-filter="demo1">添加</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

点击添加时,利用ajax异步刷新,可以避免添加的弹出层关不掉,或者查询全部的数据没有及时更新,下面是添加时主要的代码:

<!-- 引入jquery -->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
  $("#save").click(function(){
          //执行添加的操作ajax
          $.ajax({
            cache:true,
            type:"post",
            url:"saveGrade",
            data:$("#forms").serialize(),
            async:false,
            success:function(){
              window.parent.location.href="getGradeAll";
            }
          })
        });
})
</script>

这个问题当时上网查找了好久没有解决掉,最后试着使用ajax结合网上的其他解决方法才得以解决。

后面的修改和添加的方法也是一样的。


相关文章
|
容器
layui组件table定时刷新的解决方案
layui组件table定时刷新的解决方案
352 0
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
575 0
|
前端开发 JavaScript 安全
前端框架Layui实现动态选项卡&iframe使用(附源码)
前端框架Layui实现动态选项卡&iframe使用(附源码)
2065 0
|
JavaScript 前端开发
layui用layer.open打开子页面并获取子页面的ueditor富文本编辑器的内容
该内容描述了一个Web应用的交互流程,其中父页面通过调用子页面的JavaScript函数来获取富文本编辑器的内容。子页面包含一个富文本编辑器和一个`callbackdata`函数,用于返回编辑器的文本内容。父页面使用`layer.open`打开子页面作为弹窗,并在用户点击提交时,访问子页面的`callbackdata`获取编辑器内容,同时检查其他表单字段,如类型、标题等是否为空,以确保数据完整。
956 0
layUI数据表格可编辑扩展下拉框
layUI数据表格可编辑扩展下拉框
372 0
|
前端开发 安全 Java
SpringBoot 实现登录验证码(附集成SpringSecurity)
SpringBoot 实现登录验证码(附集成SpringSecurity)
754 0
|
数据格式
Layui中table数据表格使用方法渲染 返回的数据不符合规范,正确的成功状态码应为:“code“: 0异常处理
Layui中table数据表格使用方法渲染 返回的数据不符合规范,正确的成功状态码应为:“code“: 0异常处理
1430 0
|
5月前
|
存储 SQL 数据库连接
C#程序调用Sql Server存储过程异常处理:调用存储过程后不返回、不抛异常的解决方案
本文分析了C#程序操作Sql Server数据库时偶发的不返回、不抛异常问题,并提出了解决思路。首先解析了一个执行存储过程的函数`ExecuteProcedure`,其功能是调用存储过程并返回影响行数。针对代码执行被阻塞但无异常的情况,文章总结了可能原因,如死锁、无限循环或网络问题等。随后提供了多种解决方案:1) 增加日志定位问题;2) 使用异步操作提升响应性;3) 设置超时机制避免阻塞;4) 利用线程池分离主线程;5) 通过信号量同步线程;6) 监控数据库连接状态确保可用性。这些方法可有效应对数据库操作中的潜在问题,保障程序稳定性。
389 11
|
9月前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
244 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
wx:for 微信小程序双重for嵌套如何获取内层的迭代对象
本文介绍了微信小程序中`wx:for`循环嵌套的使用方法,特别是如何在外层循环中访问内层循环的迭代对象。通过在外层`wx:for`中使用默认的`item`进行迭代,并在内层`wx:for`中通过`wx:for-item`属性指定迭代对象的名称,从而实现了双重`for`嵌套并获取内层迭代对象的目的。