父页面调用子页面方法, 子页面加载父页面传送的数据
先看效果图就明白需求了:
点击search查询结果集, 点击某一条将该条的其他信息分别加载到tab1和tab2中, 即net bill和other amount这两个tab.
点击clear清空查询条件及datagrid, 同时清空tab1和tab2内的数据.
父页面:
- 1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
- 2 <%@include file="/context/mytags.jsp"%>
- 3 <t:base type="jquery,easyui,tools,DatePicker"></t:base>
- 4 <div>
- 5 <div class="easyui-layout" fit="true">
- 6 <div region="center" style="padding:0px;border:0px">
- 7 <t:datagrid name="topupRecordList" sortName="accNo" pagination="true" fitColumns="true" checkbox="true" singleSelect="true"
- 8 title="Topup Record List" actionUrl="topupRecordController.do?datagrid" pageSize="5"
- 9 idField="id" fit="true" queryMode="group" filter="true" autoLoadData="false">
- 10 <t:dgCol align="center" title="id" field="id" hidden="true" width="120"></t:dgCol>
- 11 <t:dgCol align="center" title="Account Number" field="accNo" width="120"></t:dgCol>
- 12 <t:dgCol align="center" title="Terminal" field="tmnlCode" width="120"></t:dgCol>
- 13 <t:dgCol align="center" title="Counter" field="counterId" width="120"></t:dgCol>
- 14 <t:dgCol align="right" title="Topup Amt" field="topupAmt" width="120"></t:dgCol>
- 15 <t:dgCol align="center" title="Transaction Type" field="txnStatus" dictionary="TXN_STATUS,typecode,showname" width="120"></t:dgCol>
- 16 <t:dgCol align="center" title="Top-up Date" field="txnDate" formatter="yyyy-MM-dd hh:mm:ss" width="120"></t:dgCol>
- 17 <t:dgCol align="center" title="Operator name" field="cashierId" width="120"></t:dgCol>
- 18 <t:dgCol align="center" title="Payment Mode" field="payMode" dictionary="PAY_MODE,typecode,showname" width="120"></t:dgCol>
- 19 <t:dgCol align="right" title="Net Bill" field="prepaidAmt" hidden="true" width="120"></t:dgCol><%--隐藏字段--%>
- 20 <t:dgCol align="right" title="Credit" field="curBal" hidden="true" width="120"></t:dgCol>
- 21 <t:dgCol align="right" title="Arrear Amount" field="arrearAmt" hidden="true" width="120"></t:dgCol>
- 22 </t:datagrid>
- 23 <div id="topupRecordListtb" style="padding: 3px; height: 65px;">
- 24 <div style="float: left;" class="searchColums">
- 25 <table id="searchtab">
- 26 <tr>
- 27 <td align="left">
- 28 Account Number：
- 29 <input class="inuptxt ac_input" type="text" id="accNo" name="accNo" style="width: 150px">
- 30 </td>
- 31 <td align="left">
- 32 Center：
- 33 <select id="tmnlCode" name="tmnlCode" style="width: 150px">
- 34 <option selected value="">Please Select</option>
- 35 </select>
- 36 </td>
- 37 <td align="right">
- 38 Counter：
- 39 <select id="counterId" name="counterId" style="width: 145px">
- 40 <option selected value="">Please Select</option>
- 41 </select>
- 42 </td>
- 43
- 44 <td align="right">
- 45 Operator name：
- 46 <input class="inuptxt ac_input" type="text" id="cashierId" name="cashierId">
- 47 </td>
- 48 </tr>
- 49 <tr>
- 50 <td align="right">
- 51 Topup Time：
- 52 <input class="Wdate" onClick="WdatePicker({dateFmt:\'yyyy-MM-dd HH:mm:ss\'})" type="text" style="width: 150px" id="txnDate1" name="txnDate1" ignore="ignore" value="<fmt:formatDate value=\'${customerInfoPage.sheduledActivationDate}\' type="date" pattern="yyyy-MM-dd HH:mm:ss"/>" />
- 53 </td>
- 54 <td align="right">
- 55 to
- 56 <input class="Wdate" onClick="WdatePicker({dateFmt:\'yyyy-MM-dd HH:mm:ss\'})" type="text" style="width: 150px" id="txnDate2" name="txnDate2" ignore="ignore" value="<fmt:formatDate value=\'${customerInfoPage.sheduledActivationDate}\' type="date" pattern="yyyy-MM-dd HH:mm:ss"/>" />
- 57 </td>
- 58 <td align="right">
- 59 Topup Amount：
- 60 <input class="inuptxt ac_input" type="text" id="topupAmt" name="topupAmt"
- 61 <%--onkeyup= "if(!/^[0-9]{1,}(?:.[0-9]{0,2})?$/.test(this.value)){alertTip(\'Only Numbers are allowed, with two decimal places left.\');this.value=\'\';}"--%>
- 62 >
- 63 </td>
- 64 <td align="left">
- 65 SGD
- 66 </td>
- 67 </tr>
- 68 </table>
- 69 </div>
- 70 <div align="right">
- 71 <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="topupRecordListsearch()">Search</a>
- 72 <a href="#" class="easyui-linkbutton" iconCls="icon-reload" onclick="searchReset()">Clear</a>
- 73 </div>
- 74 </div>
- 75 </div>
- 76 </div>
- 77 </div>
- 78 <div style="height:330px;width: 100%;overflow: hidden" name="tt" id="tt" fit="true"><%-- class="easyui-panel"--%>
- 79 <t:tabs id="tabsOne" iframe="false" tabPosition="top" fit="false">
- 80 <t:tab iframe="topupRecordController.do?netBill" title="Net Bill" icon="" id="tab1" heigth="140px"></t:tab>
- 81 <t:tab iframe="topupRecordController.do?otherAccount" title="Other Amount" icon="" id="tab2" heigth="140px"></t:tab>
- 82 </t:tabs>
- 83 </div>
- 84 <script type="text/javascript">
- 85 //隐藏滚动条，固定高度，可根据表单字段数量调整
- 86 $("body").css({"overflow": "hidden","height": "500px;","margin-top":"0px","margin-left":"0px"});
- 87
- 88 //重置
- 89 function searchReset() {
- 90 $(":input").each(
- 91 function () {
- 92 $(this).val("");
- 93 }
- 94 );
- 95 $("#topupRecordList").datagrid(\'loadData\',{total:0,rows:[]});
- 96
- 97 iframe1 = $("#tab1")[0].contentWindow;
- 98 iframe2 = $("#tab2")[0].contentWindow;
- 99 iframe1.searchReset1();
- 100 iframe2.searchReset2();
- 101
- 102 }
- 103
- 104 //页面初始化加载counter和terminal信息(激活状态的)
- 105 var counterList = \'${counterList}\';
- 106 var terminalList = \'${terminalList}\';
- 107 $(function () {
- 108 var counterObj = $.parseJSON(counterList);
- 109 var terminalObj = $.parseJSON(terminalList);
- 110 if (counterObj) {
- 111 for (var i = 0; i < counterObj.length; i++) {
- 112 $("#counterId").append("<option value=\'" + counterObj[i].code + "\'>" + counterObj[i].name + "</option>");
- 113 }
- 114 }
- 115 if (terminalObj) {
- 116 for (var i = 0; i < terminalObj.length; i++) {
- 117 $("#tmnlCode").append("<option value=\'" + terminalObj[i].code + "\'>" + terminalObj[i].name + "</option>");
- 118 }
- 119 }
- 120 })
- 121
- 122 //tab页数据
- 123 $("#topupRecordList").datagrid({
- 124 onSelect: function (index, row) {
- 125 $("#tab1")[0].contentWindow.getRecordList1(row);
- 126 $("#tab2")[0].contentWindow.getRecordList2(row);
- 127 }
- 128 });
- 129
- 130 //查询充值记录列表
- 131 function topupRecordListsearch() {
- 132 if (true) {
- 133 var queryParams = {};
- 134 var flag = true;
- 135
- 136 var accNo = $("#accNo").val();
- 137 var tmnlCode = $("#tmnlCode").val();
- 138 var counterId = $("#counterId").val();
- 139 var cashierId = $("#cashierId").val();
- 140 var txnDate1 = $("#txnDate1").val();
- 141 var txnDate2 = $("#txnDate2").val();
- 142
- 143 //金额格式校验
- 144 var topupAmt = $("#topupAmt").val();
- 145 var longitudeRegExp = /^\d+(\.\d+)?$/;
- 146 var reg = new RegExp(longitudeRegExp);
- 147 if(topupAmt!=\'\'){
- 148 if (!reg.test(topupAmt)) {
- 149 alertTip("金额格式错误,请重新输入");
- 150 flag = false;
- 151 }
- 152 }
- 153
- 154 if (!flag) {
- 155 return false;
- 156 }
- 157 $(\'#topupRecordList\').datagrid({
- 158 url: \'topupRecordController.do?datagrid&field=accNo,tmnlCode,counterId,topupAmt,txnStatus,txnDate,cashierId,payMode,prepaidAmt,curBal,arrearAmt,\',
- 159 pageNumber: 1,
- 160 queryParams: {
- 161 accNo:accNo,
- 162 tmnlCode:tmnlCode,
- 163 counterId:counterId,
- 164 cashierId:cashierId,
- 165 txnDate1:txnDate1,
- 166 txnDate2:txnDate2,
- 167 topupAmt:topupAmt
- 168 }
- 169 });
- 170 }
- 171 }
- 172
- 173 </script>
View Code
子页面:
tab1:
- 1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
- 2 <%@include file="/context/mytags.jsp"%>
- 3 <t:base type="jquery,easyui,tools,DatePicker"></t:base>
- 4 <div class="easyui-layout" fit="true">
- 5 <div region="center" style="padding:0px;border:0px">
- 6 <t:datagrid name="topupRecordList1" checkbox="false" sortName="accNo" pageSize="5" pagination="false" fitColumns="true" singleSelect="true"
- 7 title="" actionUrl="topupRecordController.do?otheraccountDatagrid" height="189px" autoLoadData="false">
- 8 <t:dgCol align="center" title="Account Number" field="accNo" width="120"></t:dgCol>
- 9 <t:dgCol align="right" title="Net Bill" field="prepaidAmt" width="120"></t:dgCol>
- 10 <t:dgCol align="right" title="Credit" field="curBal" width="120"></t:dgCol>
- 11 <t:dgCol align="center" title="Top-up Date" field="txnDate" formatter="yyyy-MM-dd hh:mm:ss" width="120"></t:dgCol>
- 12 </t:datagrid>
- 13 </div>
- 14 </div>
- 15 <script type="text/javascript">
- 16
- 17 function searchReset1() {
- 18 $("#topupRecordList1").datagrid(\'loadData\',{total:0,rows:[]});
- 19 }
- 20
- 21 function getRecordList1(rows){
- 22 var rowtotal = $(\'#topupRecordList1\').datagrid(\'getRows\');
- 23 if(rowtotal.length>0){
- 24 clearRow();
- 25 }
- 26 $(\'#topupRecordList1\').datagrid(\'insertRow\',{
- 27 index: 0, // 索引从0开始
- 28 row: {
- 29 accNo: rows.accNo,
- 30 prepaidAmt: rows.prepaidAmt,
- 31 txnDate: rows.txnDate,
- 32 curBal: rows.curBal
- 33 }
- 34 });
- 35 }
- 36
- 37 function clearRow() {
- 38 $(\'#topupRecordList1\').datagrid(\'deleteRow\', 0);
- 39 }
- 40
- 41 </script>
View Code
tab2:
- 1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
- 2 <%@include file="/context/mytags.jsp"%>
- 3 <t:base type="jquery,easyui,tools,DatePicker"></t:base>
- 4 <div class="easyui-layout" fit="true">
- 5 <div region="center" style="padding:0px;border:0px">
- 6 <t:datagrid name="topupRecordList2" checkbox="false" sortName="accNo" pageSize="5" pagination="false" fitColumns="true" singleSelect="true"
- 7 title="" actionUrl="topupRecordController.do?otheraccountDatagrid" height="189px" autoLoadData="false">
- 8 <t:dgCol align="center" title="Account Number" field="accNo" width="120"></t:dgCol>
- 9 <t:dgCol align="center" title="Fees Type" field="feesType" width="120"></t:dgCol><%--缴费类型 arear--%>
- 10 <t:dgCol align="right" title="Arrear Amount" field="arrearAmt" width="120"></t:dgCol>
- 11 <t:dgCol align="center" title="Top-up Date" field="txnDate" formatter="yyyy-MM-dd hh:mm:ss" width="120"></t:dgCol>
- 12
- 13 </t:datagrid>
- 14 </div>
- 15 </div>
- 16 <script type="text/javascript">
- 17
- 18 function searchReset2() {
- 19 $("#topupRecordList2").datagrid(\'loadData\',{total:0,rows:[]});
- 20 }
- 21
- 22 function getRecordList2(rows){
- 23 var rowtotal = $(\'#topupRecordList2\').datagrid(\'getRows\');
- 24 if(rowtotal.length>0){
- 25 clearRow();
- 26 }
- 27 $(\'#topupRecordList2\').datagrid(\'insertRow\',{
- 28 index: 0, // 索引从0开始
- 29 row: {
- 30 accNo: rows.accNo,
- 31 feesType: \'Arear\',
- 32 arrearAmt: rows.arrearAmt,
- 33 txnDate: rows.txnDate
- 34 }
- 35 });
- 36 }
- 37
- 38 function clearRow() {
- 39 $(\'#topupRecordList2\').datagrid(\'deleteRow\', 0);
- 40 }
- 41
- 42 </script>
View Code
总结:
父页面调用子页面方法:tab1和tab2是iframe的id.
- iframe1 = $("#tab1")[0].contentWindow;
- iframe2 = $("#tab2")[0].contentWindow;
- iframe1.searchReset1();
- iframe2.searchReset2();
子页面加载父页面传送的数据:rows即是父页面传送的数据.
- function getRecordList1(rows){
- var rowtotal = $(\'#topupRecordList1\').datagrid(\'getRows\');
- if(rowtotal.length>0){
- clearRow();
- }
- $(\'#topupRecordList1\').datagrid(\'insertRow\',{
- index: 0, // 索引从0开始
- row: {
- accNo: rows.accNo,
- prepaidAmt: rows.prepaidAmt,
- txnDate: rows.txnDate,
- curBal: rows.curBal
- }
- });
- }
感谢:https://www.cnblogs.com/it-xcn/p/5896231.html
https://blog.csdn.net/liu4071325/article/details/55657044
版权声明：本文为yadongliang原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。