JavaScript父子页面之间的相互调用

父页面:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>

<link href="../Content/style/NavPager.css" rel="stylesheet" />

$("#DetailDiv").css("display", "none");
$("#EditDiv").css("display", "none");

});

//绑定点击详情的超级链接
function bindDetailLinkClickEvent() {
$("#tbBody a:contains('详情')").click(function () {

var newsId = $(this).attr("newsId");
getNewsToDetail(newsId);//获取新闻详情然后把数据放到div上去。
showDetailDialog();//弹出一个显示详情的Div

return false;
});
}

//弹出一个显示详情的Div
function showDetailDialog() {
//弹出一个Div
$("#DetailDiv").css("display", "block");
//把这个div弹出到中间，而且是模态
$("#DetailDiv").dialog({
title: "详情对话框",
width: 500,
height: 500,
modal: true,
collapsible: true,
minimizable: true,
maximizable: true,
resizable: true,
buttons: [{
text: "添加",
iconCls: "icon-add",
handler: function () {
alert('add');
}
}, {
text: "关闭",
iconCls: "icon-cancel",
handler: function () {
$("#DetailDiv").dialog("close");
}
}]
});
}

//获取新闻详情然后把数据放到div上去。
function getNewsToDetail(newsId) {
//发送一个异步请求，把后台加载的数据放到div上去。
$.getJSON("GetNewsById.ashx", { id: newsId }, function (data) {
$("#spTitle").text(data.title);
$("#spContent").html(data.content);
});

}

//初始化表格
function initTable(postData) {
$.ajax({
url: "LoadAllNews.ashx",
data: postData,//发送后台数据
dataType: "json",//后台返回数据的类型
type: "post",//请求类型
success: function (data) {
$("#tbBody").html("");
for (var i in data.NewsList) {
var strTr = "<tr>";
strTr += "<td>" + data.NewsList[i].title + "</td>";
strTr += "<td>" + data.NewsList[i].ID + "</td>";
strTr += "<td>" + data.NewsList[i].people + "</td>";
strTr += "<td><a newsId='" + data.NewsList[i].ID + "' href='#'>详情</a> ";
strTr += "<a class='deleteLink' newsId='" + data.NewsList[i].ID + "' href='#'>删除</a>";
strTr += "<a class='editLink' newsId='" + data.NewsList[i].ID + "' href='#'>修改</a></td>";
strTr += "</tr>";
$("#tbBody").append(strTr);
}

//把分页的标签添加到页面里面去
$("#NavLink").html(data.NavHtml);

//绑定分页超级链接标签的点击事件
bindNavLinkClickEvent();

bindDetailLinkClickEvent();//绑定点击详情的超级链接
bindEditLinkClickEvent();//绑定点击修改的超级链接
bindDeleteLinkClickEvent();//绑定点击修改的超级链接

}
});
}

//绑定分页超级链接标签的点击事件
function bindNavLinkClickEvent() {
$(".pageLink").click(function() {
//改变当前页数据。
//改变分页标签。
var href = $(this).attr("href");
var strPostData = href.substr(href.lastIndexOf('?') + 1);
initTable(strPostData);//
return false;
});
}

return false;
});
}

//绑定修改超级链接的事件的响应方法
function bindEditLinkClickEvent() {
$(".editLink").click(function() {
var newsId = $(this).attr("newsId");
//从后台加载数据然后把数据放到修改文本框上去。
//getNews2EditForm(newsId);

//弹出对话框之前，把iframe标签的src属性设置成修改页面地址。
$("#editFrame").attr("src", "EditNews.aspx?id=" + newsId);

showEditDialog(); //显示修改的对话框
});
}

//从后台加载数据然后把数据放到修改文本框上去。
function getNews2EditForm(newsId) {
$.getJSON("GetNewsById.ashx", {id:newsId}, function(data) {
$("#txtTitle").val(data.title);
$("#txtPeople").val(data.people);
$("#hidId").val(data.ID);
});
}

//显示修改的对话框
function showEditDialog() {
//显示一个修改的对话框
$("#EditDiv").css("display", "block");
//把这个div弹出到中间，而且是模态
$("#EditDiv").dialog({
title: "修改对话框",
width: 500,
height: 500,
modal: true,
collapsible: true,
minimizable: true,
maximizable: true,
resizable: true,
buttons: [{
text: "修改",
iconCls: "icon-edit",
handler: submitChildEditFrm //submitEditFrm
}, {
text: "关闭",
iconCls: "icon-cancel",
handler: function () {
$("#EditDiv").dialog("close");
}
}]
});
}

//提交子容器的修改表单。
function submitChildEditFrm()
{
//拿到子容器的windows对象
var domFrame = $("#editFrame")[0];
domFrame.contentWindow.submitFrm();
}

//当修改成功之后，由子容器来调用的方法
function afterEditSuccess() {
//关闭对话框，刷新表格
$("#EditDiv").dialog("close");
initTable();
}

//异步提交修改的表单
function submitEditFrm() {
var postData = $("#editFrm").serializeArray();
$.post("ProcessEdit.ashx",postData, function(data) {
if (data == "ok") {
//修改成功：关闭修改对话框，刷新表格
$("#EditDiv").dialog("close");
initTable();//刷新表格
} else {
$.messager.alert("提醒消息", "修改败了", "warning");
}
});
}
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>新闻标题</th><th>新闻编号</th><th>发布人</th><th>操作</th>
</tr>
</thead>
<tbody id="tbBody">

</tbody>
</table>

<div id="NavLink" class="paginator">

</div>

<div id="EditDiv">
<iframe src="javascript:void(0)" id="editFrame" width="100%" height="100%" frameborder="0"></iframe>
</div>

<div id="DetailDiv">
<h1>显示详情信息</h1>
<hr/>
<table>
<tr>
<td>新闻标题：</td>
<td><span id="spTitle"></span></td>
</tr>
<tr>
<td>新闻内容：</td>
<td><span id="spContent"></span></td>
</tr>
</table>
</div>

</body>
</html>

子页面:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EditNews.aspx.cs" Inherits="WebDemo.Web._2013_12_3.EditNews" ValidateRequest="false" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function () {
});

</table>

</div>
</form>
</body>
</html>

秒客网

JavaScript父子页面之间的相互调用

相关文章