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>
