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

举报
穆雄雄 发表于 2022/12/13 21:58:15 2022/12/13
【摘要】 可能看到标题的你没有明白我到底想表达啥?(我起名字时删改多遍,这是最终定下来的),不过,为了让大家看的明白,我专门去做了个演示视频:演示案例使用的技术:ssh框架+layui表格,即简单的对单表数据做了个增删改查。​编辑相信大家看过视频之后,已经知道大体的业务流程,我在这里在简单的说明一下。1.默认进入首页default.jsp,进入该页面之前将所有数据查询出来,在控制器中放入对象集合,在页...

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

演示案例使用的技术: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结合网上的其他解决方法才得以解决。

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

​编辑

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。