这是第三步将数据在父页面上显示。代码如下：
AddDD.aspx代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddDJLJDD.aspx.cs" Inherits="WEB.DDGL.AddDJLJDD" %>
<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="../css/admin.content.css" rel="stylesheet" type="text/css" />
<link href="../css/admin.global.css" rel="stylesheet" type="text/css" />
<link href="../css/admin.index.css" rel="stylesheet" type="text/css" />
<!--JS导入的公共js文件-->
<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../js/jquery.utils.js" type="text/javascript"></script>
<script src="../js/admin.js" type="text/javascript"></script>
<!--引用jBox样式css文件及js文件-->
<link href="../jBox/Skins/Green/jbox.css" rel="stylesheet" type="text/css" />
<script src="../jBox/jquery.jBox-2.3.min.js" type="text/javascript"></script>
<script src="../jBox/i18n/jquery.jBox-zh-CN.js" type="text/javascript"></script>
<!--JS导入的界面操作js文件-->
<script src="js/AddDD.js" type="text/javascript"></script>
<style type="text/css">
.style1
{
110px;
text-align: right;
}
.style2
{
92px;
text-align: right;
}
.style3
{
57px;
}
.style4
{
123px;
}
.style5
{
159px;
}
.style6
{
text-align: right;
97px;
}
.contentDisplay
{
display: none;
}
</style>
<script type="text/javascript">
//弹出框
</script>
</head>
<body onload="search_Click()">
<form id="form2" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="search block">
<div class="h">
<span class="icon-sprite icon-magnifier"></span>
<h3>
主单信息</h3>
<div class="bar">
<td class="searchtables">
<input id="btnAdd" class="btn-lit span a" type="button" value="添加" onclick="SaveToJson() " />
</td>
</div>
</div>
<div class="tl corner">
</div>
<div class="tr corner">
</div>
<div class="bl corner">
</div>
<div class="br corner">
</div>
<div class="cnt-wp">
<div class="cnt">
<div class="search-bar">
<table>
<tbody>
<tr>
<td class="style2">
<label class="txt-green">
单位 ：</label>
</td>
<td class="searchtabled">
<asp:Label ID="lblCompany" runat="server" Text=""></asp:Label>
</td>
<td class="style1">
<label class="txt-green">
代理商代码 ：</label>
</td>
<td class="style4">
<asp:Label ID="lblDLSCode" runat="server" Text=""></asp:Label>
</td>
<td class="searchtables">
<label class="txt-green">
NO.</label>
</td>
<td class="style3">
<asp:Label ID="lblNO" runat="server" Text=""></asp:Label>
</td>
<td class="searchtables">
<label class="txt-green">
订单日期</label>
</td>
<td class="searchtabled">
<asp:Label ID="lblDate" runat="server" Text=""></asp:Label>
</td>
</tr>
<tr>
<td class="style2">
<label class="txt-green">
转库凭证号 ：</label>
</td>
<td class="searchtabled">
<asp:TextBox ID="txtZKPZH" CssClass="searchbox" runat="server" onblur="VerificationPName();"></asp:TextBox><span
id="Span4"></span>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="不能为空！"
ControlToValidate="txtZKPZH"></asp:RequiredFieldValidator>
</td>
<td class="style1 txt-green">
下单类型 ：
</td>
<td class="style4">
<asp:DropDownList ID="ddXDLX" runat="server">
<asp:ListItem Value="正常下单">正常下单</asp:ListItem>
<asp:ListItem Value="原物返回">原物返回</asp:ListItem>
</asp:DropDownList>
</td>
<td class="searchtables">
<label class="txt-green">
所能支配金额：</label>
</td>
<td class="style3">
<asp:Label ID="lblMoney" runat="server" Text=""></asp:Label>
</td>
<td class="searchtables">
</td>
<td class="searchtabled">
<asp:Button ID="Button1" runat="server" Text="添加物料" OnClientClick="openDia();return false;" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="block" id="WLInfo" runat="server">
<div class="h">
<span class="icon-sprite icon-list"></span>
<h3>
物料信息</h3>
<div class="bar">
</div>
</div>
<div class="tl corner">
</div>
<div class="tr corner">
</div>
<div class="bl corner">
</div>
<div class="br corner">
</div>
<div class="cnt-wp">
<div class="cnt">
<!--多标签标签部分-->
<input id="Hidden1" type="hidden" runat="server" value="0" />
<!--内容部分-->
<table class="data-table contentin" id="mainTable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th scope="col">
物料编码
</th>
<th scope="col">
产品名称
</th>
<th scope="col">
数量
</th>
<th scope="col">
单价
</th>
<th scope="col">
管理费
</th>
<th scope="col">
工时费
</th>
<th scope="col">
金额
</th>
<th scope="col">
单据编号
</th>
</tr>
<tr id="content">
<td class="txt c" id="LJBM">
</td>
<td class="txt c" id="LJMC">
</td>
<td class="txt c" id="LJSL">
</td>
<td class="txt c" id="LJDJ">
</td>
<td class="txt c" id="LJGLF">
</td>
<td class="txt c" id="LJGSF">
</td>
<td class="txt c" id="Money">
</td>
<td class="txt c" id="DJBH">
</td>
</tr>
</tbody>
</table>
</div>
<input id="hidJBID" type="hidden" runat="server" />
<input id="hidDLSID" type="hidden" runat="server" />
<input id="hidWLMC" type="hidden" />
</div>
</div>
</div>
</form>
</body>
</html>
JS代码：
var returned;
function openDia() {
var selectValue = document.getElementById("ddXDLX");
if (selectValue.value == "正常下单") {
returned = window.showModalDialog("ZCXDWLInfo.aspx?JBID=" + $('#hidJBID').val() + "&TotalMoney=" + $("#lblMoney").text(), window)
alert(returned);
// if (returned != "") {
// returned = returned + returned;
// }
// alert(returned)
getData()
} else {
returned = [];
returned = window.showModalDialog("YWFHWL.aspx?DLSID=" + $('#hidDLSID').val(), window);
// //returned = returned
alert(returned);
getData();
}
}
function getData() {
//=================根据级别ID查询零件ID================================
var obj = eval(returned.toString()); //eval 计算 JavaScript 字符串，并把它作为脚本代码来执行
//检查后台返回的数据
//将获取到的数据动态的加载到table中
$("#mainTable tr").eq(1).removeClass("contentDisplay"); //移除模板行的样式
$("#mainTable tr").eq(1).nextAll().remove(); //将标题行的tr删除 这里指的是删除第二个tr
//依次遍历获得的json数据，向数据表table中动态加载数据
for (var i = 0; i < obj.length; i++) {
var row = $("#content").clone(); //clone clone() 方法生成被选元素的副本，包含子节点、文本和属性。
row.find("#LJBM").text(obj[i].LJBM);
row.find("#LJMC").text(obj[i].LJMC);
row.find("#LJSL").text(obj[i].SL);
row.find("#LJDJ").text(obj[i].DJ);
row.find("#LJGSF").text(obj[i].GSF)
row.find("#LJGLF").text(obj[i].GLF)
row.find("#Money").text(obj[i].Money);
row.find("#DJBH").text(obj[i].DJBH);
row.find("#hidLJID").val(obj[i].ID);
row.appendTo("#mainTable"); //添加到mainTable中
}
$("#mainTable tr").eq(1).addClass("contentDisplay"); //添加模板列的css样式
// 隔行变色
$('table.data-table tr:even').addClass('even');
}就利用JS循环的把下面的Table画出来。效果图：
综述：
这个功能也可以单独使用，这个是利用JSON字符串转化为JSON对象，动态的显示表格。