使用layui弹框实现添加时,当添加成功之后如何进行关闭当前窗口刷新父页面的数据
一看标题可能大家都比较模糊,我就去特意做了一个gif的演示图,结果发现太小了,就改成了现在的视频,视频地址:
使用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"></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弹框实现添加时,当添加成功之后如何进行关闭当前窗口刷新父页面的数据相关推荐
- layui弹框提示层:倒计时(layui-font-red颜色定义)
layui弹框提示层:倒计时(layui-font-red颜色定义) 官方文档:https://layer.layui.com/ 效果图 · 截图示下: 以上就是关于" layui弹框提示层 ...
- layui+thymeleaf 点击弹框右上角叉号刷新父页面
需求:在关闭弹框的时候,刷新父页面的内容,弹框没有确定和取消的按钮,只有右上方的叉号.实现:在父页面里掉子弹框的地方更改为下面代码: function importFun(title, url, w, ...
- artDialog弹出新页面,保存后关闭弹出框并刷新父页面
artDialog 弹出框插件,或者说是弹出对话框插件,需要对弹出后的对话框操作?artDialog的控制接口就是用来干这些事情的,这在异步消息操作中非常有用. artDialog功能特性: 自适应内 ...
- el-tree动态添加时重复添加问题
el-tree动态添加时重复添加问题 const res = new Map(); c.children = c.children.filter((a) => !res.has(a.label) ...
- Layer弹出层关闭后刷新父页面
一.Layer弹出层关闭后刷新父页面 //编辑 $("#edit").on("click", function(){var id = getIdSelectio ...
- layui提交成功之后刷新当前页、关闭当前页、刷新父页、重载父页数据表格
刷新当前页: layer.msg(data.msg, {icon:1,time:1000},function(){setTimeout('window.location.reload()',1000) ...
- js 弹出子页面与关闭子页面刷新父页面的问题
在使用js弹出子页面并在关闭子页面的时候刷新父页面的时候遇到不能刷新的问题,为这个事郁闷了好久,在网上找相关的资料基本上都是使用window.opener.location.href=window.o ...
- layui弹框确认及取消按钮
1.取消按钮function btn1() {layer.closeAll(); } 2.确认按钮 function btn() {layui.use('layer', function(){var ...
- 解决ckeditor富文本在layui 弹框中大小字体等下拉不显示
css <div class="layui-input-inline" style="width:1100px;"><div class=&q ...
最新文章
- crontab工具类 断给定的时间 是否 满足 crontab 表达式.md
- WPF INotifyPropertyChanged 通过特性减少代码量
- 安装head插件依赖包grunt-cli
- java的remove iterator_Java集合 iterator.remove()方法详解
- 代码安全招聘岗位火热来袭(职位更新)
- freopen()函数
- 预编译头文件来自编译器的早期版本,或者预编译头为 C++ 而在 C 中使用它(或相反)...
- nanopc t3开发板系统烧录_基础教程18 定制 Arduino 系统
- 【脑电信号】基于matlab HMM睡眠状态检测【含Matlab源码 050期】
- id 查找apple_Apple ID忘记了怎么办 Apple ID找回方法【详细介绍】
- Android app中这样用flow更方便-加载列表数据
- Android scroller控件,Android Scroller完全解析
- 【java小游戏】老虎杠子鸡游戏
- python爬取微博评论点赞数_python 爬虫 爬微博 分析 数据
- WGS84(GPS坐标) BD09坐标(百度坐标)GCJ02(国测局坐标) 的相互转换
- Python作为移动客户端后台服务器
- Mathon广告过滤规则发现
- QGIS教程-1:软件安装
- 常用正则大全,npm包vue-canonical-encyclopedia,以及如何在Vue、React等项目实际开发当中使用vue-canonical-encyclopedia
- C语言实现大小写转换,如果输入的不是字母就重新输入
热门文章
- C++实现线段树RMQ-单点修改,区间查询
- C++vector容器-构造函数
- 用一个单链表L实现一个栈(算法导论第十章10.2-2题)
- Two Arrays And Swaps CodeForces - 1353B(贪心+分类)
- Docker基本组成 和 基本命令
- Educational Codeforces Round 76 (Rated for Div. 2) F. Make Them Similar 折半搜索
- 【CF1194E】Count The Rectangles【类扫描线】【单调性】【树状数组】
- CF1000G. Two-Paths(树形dp)
- G List it all
- L :WeChat Walk