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=https://bbs.csdn.net/topics/$(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='https://bbs.csdn.net/topics/+ 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=https://bbs.csdn.net/topics/$(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='https://bbs.csdn.net/topics/+ 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>
uj5u.com熱心網友回復：
好久不來了，確定按鈕添加事件唄，原諒我你的太長了，今天要回家，沒心情看。。這不就跟easyui中的dialog中的確定取消按鈕一樣么，重繪父頁面呼叫父頁面的datagrid的那個方法唄。。uj5u.com熱心網友回復：
我用的是另一個方法。放在同一個頁面中，呼叫和關閉 div實作的uj5u.com熱心網友回復：
這個方法我也實作了
uj5u.com熱心網友回復：
沒太看懂你的解釋，但如果tabs內容是href請求過來的，easyui里的這些一般都是放在panel里的，具體看官方檔案，panel是有自己的重繪方法的。如果是全部是div的，那么你應該是想要重繪datagrid，datagrid也是有自己的重繪方法的
uj5u.com熱心網友回復：
仔細看了看你用的是iframe，也不知道你的實作困在了哪里？你不仔細描述，靠一堆代碼估計很少有人有耐心的看完。
我只能說說如果我實作的思路，因為你的頁面看起來邏輯難度不大，如果是我，我會首選一個頁面全div的方式寫這個tabs，但如果為了邏輯清晰，一定要分離，
我也會用href來加載tabs的內容。href加載有個問題，是它只加載body之間的內容，偷懶的做法就是把js寫到body之間，最穩妥的是把子頁面的js邏輯寫到tabs所在的頁面。
這樣里面的內容就好控制了。
uj5u.com熱心網友回復：
其實我想實作的功能很簡單，就是點擊圖3右下角的確定按鈕，表單提交成功之后，這個【添加】tabs選項卡關閉，提示保存成功，并且重繪圖二【用戶串列】tabs選項卡中的datagrid資料表格
uj5u.com熱心網友回復：
點擊添加按鈕的時候，用$('#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部分，處理完后，重繪父頁面，關閉當前頁面
uj5u.com熱心網友回復：
對了，你要關閉tab的話，要用window.top.xxxxx()uj5u.com熱心網友回復：
$("#dg").datagrid('reload'); 你重繪list頁面 再調一下這個不就行了
還有一個小技巧就是
uj5u.com熱心網友回復：
uj5u.com熱心網友回復：
感興趣的可以下載下來，我的資源地址：http://download.csdn.net/download/appleyk/10116452
uj5u.com熱心網友回復：
Uncaught TypeError: window.parent.closeLeaveWin is not a function
uj5u.com熱心網友回復：
我的table和dialog在一個頁面上，所以找不到parent方法，直接呼叫closeLeaveWin()就可以了
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/63215.html
標籤：Web 開發
上一篇：希望在JTree添加滾動條并且顯示出來，最好可以修改好源代碼然后發在回復，謝謝
下一篇：救命啊