easyui子页面,提交表单之后关闭,刷新父页面

qq_33446201 2018-02-09 01:58:26
easyUI 3个页面嵌套,index页面是layout布局,左边是accordion手风琴组件,中间是tabs选项卡,点击手风琴里的按钮,新增一个tabs显示list页面,展示datagrid数据表格,list页面有个添加按钮,当我点击添加按钮的时候,再新建一个tabs,来显示add页面,add页面是一个form表单写在dialog里,现在我想实现,点击dialog的确认按钮,关闭当前的选项卡(add页面),并刷新datagrid(list页面),如何实现求高手指教


index页面代码
 <head>
<script type="text/javascript">
$(function(){
$("#linkbutton a").click(function(){
//获取组件的属性或内容
var title=$(this).text();
var src=$(this).attr("title");
if($("#tt").tabs("exists",title)){
$("#tt").tabs("select",title);
} else {
$('#tt').tabs('add',{
title:title,
content:'<iframe frameborder=0 style=width:100%;height:100% src='+ src +' ></iframe>',
closable:true
});
}
});
/* linkbutton按钮 */
$('#linkbutton a').linkbutton({
toggle : true,
group : 'g2',
plain : true
});
});
</script>
</head>

<body>
<div id="cc" class="easyui-layout" fit=true
style="width:100%;height:100%;">
<div region="north" title="easyui-layout" split="false"
style="height:100px;"></div>
<div region="west" iconCls="icon-ok" split="true" title="菜单"
style="width:200px;">
<div id="aa" class="easyui-accordion" fit=true>
<div title="用户管理" id="linkbutton">
 <a title="${cxt}user/list">用户列表</a> <br />
</div>
</div>
</div>
<div region="center" title="主界面" style="padding:0px;">
<div id="tt" class="easyui-tabs" fit=true>
<div id="myid" title="首页" style="padding:20px;"></div>
</div>
</div>
</div>
</body>


list页面代码
<body>
<!-- datagrid -->
<table id="dg" ></table>
<!-- toolbar -->
<div id="toolbar">
<a id="addBtn" title="${cxt}user/add" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
<a id="editBen" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">修改</a>
<a id="deleteBtn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>
</div>
<!-- window -->
<div id="mywin" class="easyui-window" data-options="title:'添加',width:300,hieght:400,closed:true">

</div>
<script type="text/javascript">
$(function() {
$("#dg").datagrid({
//idField:"id",
title : "数据表格",
url:'${cxt}user/main',
fit:true,
loadMsg:"数据加载...",
rownumbers:true,
pagination:true,
columns:[[
{field:'id',title:'主键id',width:100,checkbox:true},
{field:'name',title:'姓名',width:100},
{field:'password',title:'密码',width:100},
{field:'idCard',title:'身份证号',width:100},
{field:'phone',title:'手机号',width:100},
{field:'address',title:'地址',width:100},

]],
toolbar: "#toolbar"
});

//点击添加打开窗口
$("#addBtn").click(function(){
var jq = parent.jQuery;
var title=$(this).text();
var src=$(this).attr("title");

if (jq(".easyui-tabs").tabs('exists', title)){
jq(".easyui-tabs").tabs('select',title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src='+ src +' style="width:100%;height:100%;"></iframe>';
jq(".easyui-tabs").tabs('add',{
title:title,
content:content,
closable:true
});
}
});
});

//子页面调用刷新datagrid
function reloadDatagrid(){
$("#dg").datagrid('reload');
}
});
</body>



add页面代码

<head>
<script type="text/javascript">
$(function(){
//dialog
$('#dialog').dialog({
title:'添加',
closable: false,
fit:true,
buttons:[{
text:'确定' ,
iconCls:'icon-ok' ,

handler : function(){
debugger;
$("#myform").form("submit",{
url:'${cxt}user/saveperson',
onSubmit:function(){
return $("#myform").form("validate");
},
success:function(data){
data = eval("("+data+")");
if(data.success){
//1.清空表单
$("#myform").form("clear");
//2.关闭窗口
var jq = parent.jQuery;
jq(".easyui-tabs").tabs('close', '添加');
//3.刷新datagrid
window.parent.reloadDatagrid();
$.messager.show({
title:"提示",
msg:"保存成功"
});
}else{
$.messager.alert("提示","保存失败"+data.msg,"error");
}
}
});
}
},
{
text:'取消',
iconCls:'icon-cancel',
handler : function(){

}
}]
});

});
</script>
</head>

<body>
<div id="dialog" >
<form id="myform">
<table>
<tr>
<td>
姓名:<input type="text" name="name" class="easyui-validatebox" required=true />
</td>
</tr>
<tr>
<td>
密码:<input type="password" name="password" class="easyui-validatebox" required=true />
</td>
</tr>
<tr>
<td>
生份证号:<input type="text" name="idCard" class="easyui-validatebox" required=true />
</td>
</tr>
<tr>
<td>
手机号:<input type="text" name="phone" class="easyui-validatebox" required=true />
</td>
</tr>
<tr>
<td>
地址:<input type="text" name="address" class="easyui-validatebox" required=true />
</td>
</tr>
</table>
</form>
</div>
</body>
...全文
1431 13 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
Simon_胡 2020-05-27
  • 打赏
  • 举报
回复
引用 12 楼 Simon_胡 的回复:
[quote=引用 7 楼 chaoyu12 的回复:] 点击添加按钮的时候,用$('#id').window()打开新的页面 然后但新的页面处理完就可以调用父页面的函数 window.parent.xxxxx(); xxxxxx()就是父页面中的刷新方法。 举个例子 父页面打开window

function leaveRefresh() {
	var start_day = $("#start_day").datebox('getValue');
	var end_day = $("#end_day").datebox('getValue');
	var param = {start_day:start_day,end_day:end_day};
	$('#tableleavedata').datagrid('load',param);
}
var leaveOpenWindow = function(url){
	$("#leaveWin").window({
		title:"请假申请",
	    width:450,    
	    height:350,
	    collapsible:false,
	    minimizable:false,
	    maximizable:false,
	    modal:true ,
	    href:url
	});
}
function closeLeaveWin(){
	$("#leaveWin").window("close");
}
这三个一个是刷新,一个是关闭,一个是打开window,参数url是跳转到子页面的地址 定义leaveWin,只要一个div就可以

<div id="leaveWin"></div>
然后看下子页面

function submitLeaveForm(){
	$('#form0').form('submit',{
		url:path + '/leave/saveday.do?random='+Math.random(),
		onSubmit:function(){
			return $(this).form('enableValidation').form('validate');
		},
		success:function(data){
			var json = eval('(' + data + ')');
			var jsonDate = eval('(' + json + ')');
			if(jsonDate.error){
				$.messager.alert('提示', jsonDate.error);
			}else{
				$.messager.alert('提示', jsonDate.success);
			}
			window.parent.leaveRefresh();
			window.parent.closeLeaveWin();
		}
	});
}
子页面的js,其他的后不用看,关注success部分,处理完后,刷新父页面,关闭当前页面
Uncaught TypeError: window.parent.closeLeaveWin is not a function[/quote] 我的table和dialog在一个页面上,所以找不到parent方法,直接调用closeLeaveWin()就可以了
Simon_胡 2020-05-27
  • 打赏
  • 举报
回复
引用 7 楼 chaoyu12 的回复:
点击添加按钮的时候,用$('#id').window()打开新的页面 然后但新的页面处理完就可以调用父页面的函数 window.parent.xxxxx(); xxxxxx()就是父页面中的刷新方法。 举个例子 父页面打开window

function leaveRefresh() {
	var start_day = $("#start_day").datebox('getValue');
	var end_day = $("#end_day").datebox('getValue');
	var param = {start_day:start_day,end_day:end_day};
	$('#tableleavedata').datagrid('load',param);
}
var leaveOpenWindow = function(url){
	$("#leaveWin").window({
		title:"请假申请",
	    width:450,    
	    height:350,
	    collapsible:false,
	    minimizable:false,
	    maximizable:false,
	    modal:true ,
	    href:url
	});
}
function closeLeaveWin(){
	$("#leaveWin").window("close");
}
这三个一个是刷新,一个是关闭,一个是打开window,参数url是跳转到子页面的地址 定义leaveWin,只要一个div就可以

<div id="leaveWin"></div>
然后看下子页面

function submitLeaveForm(){
	$('#form0').form('submit',{
		url:path + '/leave/saveday.do?random='+Math.random(),
		onSubmit:function(){
			return $(this).form('enableValidation').form('validate');
		},
		success:function(data){
			var json = eval('(' + data + ')');
			var jsonDate = eval('(' + json + ')');
			if(jsonDate.error){
				$.messager.alert('提示', jsonDate.error);
			}else{
				$.messager.alert('提示', jsonDate.success);
			}
			window.parent.leaveRefresh();
			window.parent.closeLeaveWin();
		}
	});
}
子页面的js,其他的后不用看,关注success部分,处理完后,刷新父页面,关闭当前页面
Uncaught TypeError: window.parent.closeLeaveWin is not a function
appleyk 2018-02-11
  • 打赏
  • 举报
回复


感兴趣的可以下载下来,我的资源地址:http://download.csdn.net/download/appleyk/10116452
appleyk 2018-02-11
  • 打赏
  • 举报
回复
appleyk 2018-02-11
  • 打赏
  • 举报
回复
$("#dg").datagrid('reload'); 你刷新list页面 再调一下这个不就行了




还有一个小技巧就是


chaoyu12 2018-02-10
  • 打赏
  • 举报
回复
点击添加按钮的时候,用$('#id').window()打开新的页面 然后但新的页面处理完就可以调用父页面的函数 window.parent.xxxxx(); xxxxxx()就是父页面中的刷新方法。 举个例子 父页面打开window

function leaveRefresh() {
	var start_day = $("#start_day").datebox('getValue');
	var end_day = $("#end_day").datebox('getValue');
	var param = {start_day:start_day,end_day:end_day};
	$('#tableleavedata').datagrid('load',param);
}
var leaveOpenWindow = function(url){
	$("#leaveWin").window({
		title:"请假申请",
	    width:450,    
	    height:350,
	    collapsible:false,
	    minimizable:false,
	    maximizable:false,
	    modal:true ,
	    href:url
	});
}
function closeLeaveWin(){
	$("#leaveWin").window("close");
}
这三个一个是刷新,一个是关闭,一个是打开window,参数url是跳转到子页面的地址 定义leaveWin,只要一个div就可以

<div id="leaveWin"></div>
然后看下子页面

function submitLeaveForm(){
	$('#form0').form('submit',{
		url:path + '/leave/saveday.do?random='+Math.random(),
		onSubmit:function(){
			return $(this).form('enableValidation').form('validate');
		},
		success:function(data){
			var json = eval('(' + data + ')');
			var jsonDate = eval('(' + json + ')');
			if(jsonDate.error){
				$.messager.alert('提示', jsonDate.error);
			}else{
				$.messager.alert('提示', jsonDate.success);
			}
			window.parent.leaveRefresh();
			window.parent.closeLeaveWin();
		}
	});
}
子页面的js,其他的后不用看,关注success部分,处理完后,刷新父页面,关闭当前页面
chaoyu12 2018-02-10
  • 打赏
  • 举报
回复
对了,你要关闭tab的话,要用window.top.xxxxx()
qq_33446201 2018-02-09
  • 打赏
  • 举报
回复
引用 5 楼 xiaoyuyu1111 的回复:
[quote=引用 4 楼 xiaoyuyu1111 的回复:] 没太看懂你的解释,但如果tabs内容是href请求过来的,easyui里的这些一般都是放在panel里的,具体看官方文档,panel是有自己的刷新方法的。 如果是全部是div的,那么你应该是想要刷新datagrid,datagrid也是有自己的刷新方法的
仔细看了看你用的是iframe,也不知道你的实现困在了哪里?你不仔细描述,靠一堆代码估计很少有人有耐心的看完。 我只能说说如果我实现的思路,因为你的页面看起来逻辑难度不大,如果是我,我会首选一个页面全div的方式写这个tabs,但如果为了逻辑清晰,一定要分离, 我也会用href来加载tabs的内容。href加载有个问题,是它只加载body之间的内容,偷懒的做法就是把js写到body之间,最稳妥的是把子页面的js逻辑写到tabs所在的页面。 这样里面的内容就好控制了。[/quote] 其实我想实现的功能很简单,就是点击图3右下角的确定按钮,表单提交成功之后,这个【添加】tabs选项卡关闭,提示保存成功,并且刷新图二【用户列表】tabs选项卡中的datagrid数据表格
xiaoyuyu1111 2018-02-09
  • 打赏
  • 举报
回复
引用 4 楼 xiaoyuyu1111 的回复:
没太看懂你的解释,但如果tabs内容是href请求过来的,easyui里的这些一般都是放在panel里的,具体看官方文档,panel是有自己的刷新方法的。
如果是全部是div的,那么你应该是想要刷新datagrid,datagrid也是有自己的刷新方法的


仔细看了看你用的是iframe,也不知道你的实现困在了哪里?你不仔细描述,靠一堆代码估计很少有人有耐心的看完。
我只能说说如果我实现的思路,因为你的页面看起来逻辑难度不大,如果是我,我会首选一个页面全div的方式写这个tabs,但如果为了逻辑清晰,一定要分离,
我也会用href来加载tabs的内容。href加载有个问题,是它只加载body之间的内容,偷懒的做法就是把js写到body之间,最稳妥的是把子页面的js逻辑写到tabs所在的页面。
这样里面的内容就好控制了。
xiaoyuyu1111 2018-02-09
  • 打赏
  • 举报
回复
没太看懂你的解释,但如果tabs内容是href请求过来的,easyui里的这些一般都是放在panel里的,具体看官方文档,panel是有自己的刷新方法的。 如果是全部是div的,那么你应该是想要刷新datagrid,datagrid也是有自己的刷新方法的
qq_33446201 2018-02-09
  • 打赏
  • 举报
回复
引用 2 楼 computerclass 的回复:
我用的是另一个方法。放在同一个页面中,调用和关闭 div实现的
这个方法我也实现了
computerclass 2018-02-09
  • 打赏
  • 举报
回复
我用的是另一个方法。放在同一个页面中,调用和关闭 div实现的
zk_Kang 2018-02-09
  • 打赏
  • 举报
回复
好久不来了,确定按钮添加事件呗,原谅我你的太长了,今天要回家,没心情看。。这不就跟easyui中的dialog中的确定取消按钮一样么,刷新父页面调用父页面的datagrid的那个方法呗。。

81,122

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧