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

港控/mmm° 2022-12-25 01:55 190阅读 0赞

![format_png][]

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

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

![format_png 1][]

相信大家看过视频之后，已经知道大体的业务流程，我在这里在简单的说明一下。  
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>

点击添加的按钮：

![format_png 2][]

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

![format_png 3][]

添加的按钮：

按钮事件：

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

添加页面的代码：

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

<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结合网上的其他解决方法才得以解决。

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

![format_png 4][]

[format_png]: /images/20221120/74c8dabc49924184b35f205fffde9216.png
[format_png 1]: /images/20221120/19a454f50fb64ce7993a1f2b6c62f4b7.png
[format_png 2]: /images/20221120/f672ac20a87344cbaa83559062e31b80.png
[format_png 3]: /images/20221120/a46139b0b6f449fe9d6d04d78f4006fa.png
[format_png 4]: /images/20221120/87ef892d39da4330bbabaf0e25354d66.png