页面布局参考
关键代码参考
关键代码：
<%@ Page Title="" Language="C#" MasterPageFile="~/Popup.Master" AutoEventWireup="true" CodeBehind="FareInformationDetail.aspx.cs" Inherits="TravelExpert.T2.Web.QueryForSales.FareInformationDetail" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> <script type="text/javascript"> var condition = ""; $(function () { $("#<%=hdFareListID.ClientID %>").val(getQueryString("id")); $("#<%=hdFareInfoID.ClientID %>").val(getQueryString("infoid")); $("#<%=hdFarePriceNo.ClientID %>").val(getQueryString("priceid")); if ($.trim($("#<%=hdFareInfoID.ClientID %>").val()) != "") { condition += '&fareinfoid=' + $("#<%=hdFareInfoID.ClientID %>").val(); } if ($.trim($("#<%=hdFarePriceNo.ClientID %>").val()) != "") { condition += '&farepriceno=' + $("#<%=hdFarePriceNo.ClientID %>").val(); } $("#<%=hdKeyword.ClientID %>").val(condition); $(".refundFareLists-tab-content").tabs({ selected: 0, select: function (event, ui) { var id = $(".refundFareLists-tab-content ul a").eq(ui.index).attr("href"); switch (id) { case "#WebFareList": //LoadFareList; break; } } }); LoadListEnglish; LoadListChinese; LoadListRefundFareLists; LoadListFareLists; LoadFareLevelCities; LoadListFaresFare; selectOnChange; }); </script> <script type="text/javascript"> var LoadListEnglish = $(function () { $("#listEnglish").bindGrid("pageEnglish", ['Fare News No.', 'Heading'], [ { name: 'FareNewsRefNo', index: 'FareNewsRefNo', align: 'center' }, { name: 'FareNewsHeading', index: 'FareNewsHeading' } ], "../WebService/DataService.svc/GetFareInfoNews", { keywordID: "<%=hdKeyword.ClientID %>", height: 200, 920, multiSelect: false, loadWithSearch: true, selectFirstRow: true, refresh: false }); }); var LoadListChinese = $(function () { $("#listChinese").bindGrid("pageChinese", ['Fare News No.', 'Heading'], [ { name: 'FareNewsRefNo', index: 'FareNewsRefNo', align: 'center' }, { name: 'FareNewsHeading', index: 'FareNewsHeading' } ], "../WebService/DataService.svc/GetFareInfoNews", { keywordID: "<%=hdKeyword.ClientID %>", height: 200, 920, multiSelect: false, loadWithSearch: true, selectFirstRow: true, refresh: false }); }); var fareListFiles = function (no) { $('#hdFareListNo').val(no); $('#listFareList').trigger("reloadGrid"); }
<%-- 表格绑定格式 --%> var LoadListRefundFareLists = $(function () { $("#listRefundFareLists").bindGrid("pageRefundFareLists", ['FareInfoID', '', 'Supplier', 'Fare List No.'], [ { name: 'FareInfoID', index: 'FareInfoID', hidden: true, key: true }, { name: 'Refund', index: 'Refund', hidden: true }, { name: 'Supplier_Name', index: 'Supplier_Name', align: 'center' }, { name: 'FileNo', index: 'FileNo' } ], "../WebService/DataService.svc/GetRefundFareLists", //此处调用WebService中的方法，可通过../**/**?id=*或keywordID两种方式传参，并由**（id）{}方式获取；目前来看应该是优先获取?id=*参数。 { keywordID: "<%=hdKeyword.ClientID %>", height: 200, 920, multiSelect: false, loadWithSearch: true, selectFirstRow: true, refresh: false, onSelectRow: function (rowid) { var selectRow = $("#listRefundFareLists").jqGrid('getGridParam', 'selrow'); var dataRow = $("#listRefundFareLists").jqGrid('getRowData', selectRow); //获取点击行信息 $("#<%=txtRefund.ClientID %>").val(dataRow.Refund); fareListFiles(dataRow.FileNo); } }); }); var LoadListFareLists = $(function () { $("#listFareLists").bindGrid("pageFareLists", ['FareInfoID', 'Supplier', 'Adult', 'Child', 'Senior', 'SupplierID'], [ { name: 'FareInfoID', index: 'FareInfoID', hidden: true, key: true }, { name: 'Supplier_Name', index: 'Supplier_Name', align: 'center' }, { name: 'Supplier_Adult', index: 'Supplier_Adult' }, { name: 'Supplier_Child', index: 'Supplier_Child' }, { name: 'Supplier_Senior', index: 'Supplier_Senior' }, { name: 'SupplierID', index: 'SupplierID', hidden: true } ], "../WebService/DataService.svc/GetRefundFareListsFare", { keywordID: "<%=hdKeyword.ClientID %>", height: 100, 360, multiSelect: false, loadWithSearch: true, selectFirstRow: true, refresh: false, onSelectRow: function () { var selectRow = $("#listFareLists").jqGrid('getGridParam', 'selrow'); var dataRow = $("#listFareLists").jqGrid('getRowData', selectRow); $("#<%=hdSupplierAdult.ClientID %>").val(dataRow.Supplier_Adult); $("#<%=hdSupplierChild.ClientID %>").val(dataRow.Supplier_Child); $("#<%=hdSupplierSenior.ClientID %>").val(dataRow.Supplier_Senior); CalFee(); }, ondblClickRow: function (row) { var rowData = $("#listFareLists").jqGrid('getRowData', row); top.$.fn.popupDialogSecondary("Business Counterpart --- View --- " + rowData.Supplier_Name, "../Master/Business/BusinessCounterpartDetail.aspx?action=view&Id=" + rowData.SupplierID + "&open=dialog", 660, 1100); } }); }); function CalFee() { //todo 计算的方式等有数据时再测试 var sAdult = $("#<%=hdSupplierAdult.ClientID %>").val(); var sChild = $("#<%=hdSupplierChild.ClientID %>").val(); var sSenior = $("#<%=hdSupplierSenior.ClientID %>").val(); var adult = $("#<%=hdAdult.ClientID %>").val(); var child = $("#<%=hdChild.ClientID %>").val(); var senior = $("#<%=hdSenior.ClientID %>").val(); $("#<%=lblAdult.ClientID %>").text(DataFloatToZero(DataIsNaN(adult)) - DataFloatToZero(DataIsNaN(sAdult))); $("#<%=lblChild.ClientID %>").text(DataFloatToZero(DataIsNaN(child)) - DataFloatToZero(DataIsNaN(sChild))); $("#<%=lblSenior.ClientID %>").text(DataFloatToZero(DataIsNaN(senior)) - DataFloatToZero(DataIsNaN(sSenior))); } function DataFloatToZero(data) { var toFloat; try { toFloat = parseFloat(data); } catch (e) { toFloat = 0; } return toFloat; } function DataIsNaN(data) { if (!isNaN(data)) { return data; } else { return 0; } } var LoadListFaresFare = $(function () { $("#listFaresFare").bindGrid("pageFaresFare", ['Fare_ListID', 'Start Date', 'End Date', 'Class', 'Adult', 'Child', 'Senior', 'Ref.Price'], [ { name: 'Fare_ListID', index: 'Fare_ListID', hidden: true, key: true }, { name: 'StartDate', index: 'StartDate', align: 'center' }, { name: 'EndDate', index: 'EndDate' }, { name: 'Class', index: 'Class' }, { name: 'adult', index: 'adult' }, { name: 'Child', index: 'Child' }, { name: 'Senior', index: 'Senior' }, { name: 'RefPrice', index: 'RefPrice' } ], "../WebService/DataService.svc/GetFareInfoPriceResults", { keywordID: "<%=hdKeyword.ClientID %>", height: 200, 500, multiSelect: false, loadWithSearch: true, selectFirstRow: true, refresh: false, onSelectRow: function (rowid) { var selectRow = $("#listFaresFare").jqGrid('getGridParam', 'selrow'); var dataRow = $("#listFaresFare").jqGrid('getRowData', selectRow); $("#<%=hdAdult.ClientID %>").val(dataRow.adult); $("#<%=hdChild.ClientID %>").val(dataRow.Child); $("#<%=hdSenior.ClientID %>").val(dataRow.Senior); CalFee(); } }); }); var LoadFareLevelCities = $(function () { $("#listFareLevelCities").bindGrid("pageFareLevelCities", ['City Code', 'Comm City'], [ { name: 'CityCode', index: 'CityCode' }, { name: 'CommCity', index: 'CommCity' } ], "../WebService/DataService.svc/GetFareLevelCities", { keywordID: "<%=hdKeyword.ClientID %>", height: 100, 360, multiSelect: false, loadWithSearch: true, selectFirstRow: true, refresh: false }); }); var selectOnChange = $(function () { $("#<%=ddl_Currency.ClientID %>").change(function () { var tmep = "¤cy=" + this.value; $("#<%=hdKeyword.ClientID %>").val(condition + tmep); FuzzyQuery("listFaresFare"); FuzzyQuery("listFareLists"); //LoadListFaresFare; }); }) var LoadFareList = $(function () { $("#listFareList").bindGrid("pagerFareList", ['Fare_ListID', 'Fare Name', 'Last Modified Date'], [ { name: 'Fare_ListID', index: 'Fare_ListID', hidden: true, key: true }, { name: 'FareInfoNo', index: 'FareInfoNo', 300, sortable: false, formatter: function (cellvalue, options, rowObject) { return FormatDialogFile("listFareList", options, cellvalue); } }, { name: 'DateTime', index: 'DateTime', 120, sortable: false } ], "../WebService/DataService.svc/FareInfoUploads", { keywordID: 'hdFareListNo', height: 100, 900, multiSelect: false, loadWithSearch: true, refresh: false }); }); function FormatDialogFile(gridId, options, cellvalue) { var fareinfono = $('#hdFareListNo').val(); var html = '<a target="_blank" href="../Upload/FareList/' + fareinfono + '/' + cellvalue + '">' + cellvalue + '</a>'; return html; } </script> <style type="text/css"> .f-l-fare { float: left; width: 510px; } .f-r-fare { float: right; width: 400px; } </style> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder" runat="server"> <asp:HiddenField ID="hdKeyword" runat="server" /> <asp:HiddenField ID="hdFareListID" runat="server" /> <asp:HiddenField ID="hdFareInfoID" runat="server" /> <input type="hidden" id="hdFareListNo" /> <asp:HiddenField ID="hdFarePriceNo" runat="server" /> <asp:HiddenField ID="hdSupplierAdult" runat="server" /> <asp:HiddenField ID="hdSupplierChild" runat="server" /> <asp:HiddenField ID="hdSupplierSenior" runat="server" /> <asp:HiddenField ID="hdAdult" runat="server" /> <asp:HiddenField ID="hdChild" runat="server" /> <asp:HiddenField ID="hdSenior" runat="server" /> <div class="tab-content"> <div class="common-tab-title"> <ul> <li class="active"><a href="#EnglishConditions"><span>English Conditions</span></a></li> <li><a href="#ChineseConditions"><span>Chinese Conditions</span></a></li> <li><a href="#General"><span>General</span></a></li> <li><a href="#Fare"><span>Fare</span></a></li> <li><a href="#RefundFareLists"><span>Refund / Fare Lists</span></a></li> <li><a href="#Remark"><span>Remark</span></a></li> </ul> </div> <div id="EnglishConditions" class="hide"> <table id="listEnglish"> </table> <div id="pageEnglish"> </div> <div class="grid-operation-bottom"> <asp:TextBox TextMode="MultiLine" Columns="20" Width="94%" runat="server" ID="txtEnglish" CssClass="full-txtarea"></asp:TextBox> </div> </div> <div id="ChineseConditions" class="hide"> <table id="listChinese"> </table> <div id="pageChinese"> </div> <div class="grid-operation-bottom"> <asp:TextBox TextMode="MultiLine" Columns="20" Width="94%" runat="server" ID="txtChinese" CssClass="full-txtarea"></asp:TextBox> </div> </div> <div id="General" class="hide"> <table class="edit-form"> <tr> <th> Fare Type: </th> <td> <asp:TextBox runat="server" ID="txtFareType1" CssClass="textbox"></asp:TextBox> <asp:TextBox runat="server" ID="txtFareType2" CssClass="textbox"></asp:TextBox> <asp:TextBox runat="server" ID="txtFareType3" CssClass="textbox"></asp:TextBox> <asp:TextBox runat="server" ID="txtFareType4" CssClass="textbox"></asp:TextBox> </td> </tr> <tr> <th> </th> <td> <asp:TextBox runat="server" ID="txtFareType5" CssClass="textbox"></asp:TextBox> <asp:TextBox runat="server" ID="txtFareType6" CssClass="textbox"></asp:TextBox> <asp:TextBox runat="server" ID="txtFareType7" CssClass="textbox"></asp:TextBox> <asp:TextBox runat="server" ID="txtFareType8" CssClass="textbox"></asp:TextBox> </td> </tr> <tr> <th> Validity--Min: </th> <td> <asp:TextBox runat="server" ID="txtMin" CssClass="textbox"></asp:TextBox> </td> </tr> <tr> <th> Validity--Max: </th> <td> <asp:TextBox runat="server" ID="txtMax" CssClass="textbox"></asp:TextBox> </td> </tr> <tr> <th> Airline: </th> <td> <asp:TextBox runat="server" ID="txtAirline1" CssClass="textbox"></asp:TextBox> <asp:TextBox runat="server" ID="txtAirline2" CssClass="textbox"></asp:TextBox> </td> </tr> <tr> <th> Connecting City: </th> <td> <asp:TextBox runat="server" ID="txtConnectionCity" CssClass="textbox large"></asp:TextBox> </td> </tr> </table> </div> <div id="Fare" class="hide"> <fieldset class="f-l-fare"> <legend>Fare</legend> <table id="listFaresFare"> </table> <div id="pageFaresFare"> </div> <br /> <table class="edit-form"> <tr> <th> Undercut Price: </th> <td> Adult:( <asp:Label ID="lblAdult" runat="server" ForeColor="Red"></asp:Label> ) Child:( <asp:Label ID="lblChild" runat="server" ForeColor="Red"></asp:Label>) Senior:( <asp:Label ID="lblSenior" runat="server" ForeColor="Red"></asp:Label>) </td> </tr> </table> </fieldset> <fieldset class="f-r-fare"> <legend>Supplier Lists</legend> <table id="listFareLists"> </table> <div id="pageFareLists"> </div> <br /> <legend>Same Fare Level Cities</legend> <table id="listFareLevelCities"> </table> <div id="pageFareLevelCities"> </div> <br /> <table class="edit-form"> <tr> <th> <font color='red'>Currency:</font> </th> <td> <%--<asp:TextBox runat="server" ID="txtCurrency" Text="HKD" CssClass="textbox"></asp:TextBox>--%> <asp:DropDownList ID="ddl_Currency" runat="server"> </asp:DropDownList> </td> </tr> <tr> <th> Effective Date: </th> <td> <asp:TextBox runat="server" ID="txtEffective" CssClass="textbox"></asp:TextBox> </td> </tr> <tr> <th> Expiry Date: </th> <td> <asp:TextBox runat="server" ID="txtExpiry" CssClass="textbox"></asp:TextBox> </td> </tr> </table> </fieldset> </div> <div id="RefundFareLists" class="hide"> <%-- important code--%> <table id="listRefundFareLists"> </table> <div id="pageRefundFareLists"> </div> <div class="refundFareLists-tab-content"> <ul> <li class="active"><a href="#WebFareList"><span>Web Fare List</span></a></li> <li><a href="#Refund"><span>Refund</span></a></li> </ul> <div id="WebFareList"> <table id="listFareList"> </table> <div id="pagerFareList" class="left"> </div> </div> <div id="Refund"> <div class="grid-operation-bottom"> <asp:TextBox TextMode="MultiLine" Columns="20" Width="94%" runat="server" ID="txtRefund" CssClass="full-txtarea"></asp:TextBox> </div> </div> </div> </div> <div id="Remark" class="hide"> <div class="grid-operation-bottom"> <asp:TextBox TextMode="MultiLine" Columns="20" Width="94%" runat="server" ID="txtRemark" CssClass="full-txtarea"></asp:TextBox> </div> </div> </div> <div class="form-operation clear"> <ul class="log-info two-columns"> <li>Modified On:<asp:Label runat="server" ID="lblModifiedOn"></asp:Label></li> <li>Ref.No.:<asp:Label runat="server" ID="lblRefNo"></asp:Label> </li> <li>Fare Price No.:<asp:Label runat="server" ID="lblFarePriceNo"></asp:Label></li> </ul> <div class="buttons"> <input type="button" class="btn-back btnIframeClose" value="Close" /> </div> </div> </asp:Content>