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定时刷新的解决方案
373 0
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
601 0
|
JavaScript 前端开发
layui用layer.open打开子页面并获取子页面的ueditor富文本编辑器的内容
该内容描述了一个Web应用的交互流程,其中父页面通过调用子页面的JavaScript函数来获取富文本编辑器的内容。子页面包含一个富文本编辑器和一个`callbackdata`函数,用于返回编辑器的文本内容。父页面使用`layer.open`打开子页面作为弹窗,并在用户点击提交时,访问子页面的`callbackdata`获取编辑器内容,同时检查其他表单字段,如类型、标题等是否为空,以确保数据完整。
981 0
|
前端开发 JavaScript 安全
前端框架Layui实现动态选项卡&iframe使用(附源码)
前端框架Layui实现动态选项卡&iframe使用(附源码)
2126 0
|
Java 测试技术 API
Java RESTful中的PATCH请求:局部更新与资源修改
在RESTful架构中,PATCH请求是一种用于局部更新已有资源的操作。PATCH请求允许客户端将部分数据发送到服务器,以便对资源进行局部修改,而不必替换整个资源。本文将引导您深入了解Java中使用PATCH请求构建RESTful API,探讨其特点、实现方式、用例以及在实际应用中的优势。
layUI数据表格可编辑扩展下拉框
layUI数据表格可编辑扩展下拉框
398 0
|
前端开发 安全 Java
SpringBoot 实现登录验证码(附集成SpringSecurity)
SpringBoot 实现登录验证码(附集成SpringSecurity)
770 0
|
数据格式
Layui中table数据表格使用方法渲染 返回的数据不符合规范,正确的成功状态码应为:“code“: 0异常处理
Layui中table数据表格使用方法渲染 返回的数据不符合规范,正确的成功状态码应为:“code“: 0异常处理
1496 0
|
JSON 前端开发 JavaScript
layui-数据表格的实现
`layui`是一个前端UI框架,本文档介绍了如何使用layui创建数据表格。首先展示了三张截图来预览效果,接着讲解了下载layui资源包并导入到项目中的步骤。然后,在新建的web项目中引入layui的CSS和JS文件。文档提供了模拟的JSON数据来展示表格内容。接下来,详细说明了数据表格的实现,包括注意事项和代码实现,强调了`table`标签的`id`与`script`中`elem`的匹配。此外,文档还涵盖了监听头部工具栏和工具条事件的方法,并展示了弹出层的实现,用于添加和编辑表格数据。最后,给出了完整的HTML源码示例。
430 0
wx:for 微信小程序双重for嵌套如何获取内层的迭代对象
本文介绍了微信小程序中`wx:for`循环嵌套的使用方法,特别是如何在外层循环中访问内层循环的迭代对象。通过在外层`wx:for`中使用默认的`item`进行迭代,并在内层`wx:for`中通过`wx:for-item`属性指定迭代对象的名称,从而实现了双重`for`嵌套并获取内层迭代对象的目的。