ASP.NET實現彈出框真分頁將複選框選擇的資料存到資料庫中（三）
阿新 • • 發佈：2019-02-13
這是第三步將資料在父頁面上顯示。程式碼如下：
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 { width: 110px; text-align: right; } .style2 { width: 92px; text-align: right; } .style3 { width: 57px; } .style4 { width: 123px; } .style5 { width: 159px; } .style6 { text-align: right; width: 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物件，動態的顯示錶格。