js父子页面传值

最新推荐文章于 2024-04-14 23:34:00 发布

huangying383

最新推荐文章于 2024-04-14 23:34:00 发布

阅读量1.5k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/huangying383/article/details/13631939

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在母页面弹出子页面，在子页面输入信息得到查询结果，再将结果return 回母页面。

1. 母页面search 方法

function changeSender() {
		var url = "${test}/searchUser"; //调用方法找到searchUser页面
					//自定义弹出窗口大小
		var features = "dialogWidth:700px;" + "dialogHeight:250px;"
				+ "dialogLeft:" + (window.event.screenX - 10) + "px;"
				+ "dialogTop:" + window.event.screenY + "px;" + "center:yes;"
				+ "help:off;" + "resizable:yes;" + "scroll:no;" + "status:no;"
				+ "unadorned:yes;";
		// obj为子页面返回object
		var obj = window.showModalDialog(url, window, features);
		//将返回值赋值到页面
		if (obj) {
			document.getElementById("senderName").value = obj.firstName;
			document.getElementById("business").value = obj.lastName;

		}
	}

2. 子页面searchUser.jsp

<html>
<head>

<script type="text/javascript">
function findClick(){
		  find(); 
	}

function find(){
	  picklist.submit();
	}

</script>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Search </title>
</head>

<body style="margin-bottom:25px;">

<form:form class="picklist" name="picklist" action="${test}/searchSenderResult"
 method="post" target="resultsFrame">

<table class="mainTable" cellspacing="0" cellpadding="0" style=" margin-top:30px; height:98%;width:100%;">
    <tr>
      <th nowrap align="left"><span class="pagetitle">Search Senders</span></th>
    </tr>
    <tr>
      <td>
        <table class="buttonStyle" cellspacing="2" cellpadding="2">
          <tr>
             <td><label style="text-align:left;font-size: 16px;font-family: Tahoma, Arial;">First Name: </label></td>
            <td nowrap>
             <input type="text" name="firstName" id="firstName"  size="10" "/>
            </td>
             <td><label style="text-align:left;font-size: 16px;font-family: Tahoma, Arial;">Last Name: </label></td>
            <td nowrap>
             <input type="text" name="lastName" id="lastName"  size="10" "/>
            </td>
            <td>
            	<td colspan="2">
	    <input type="button" class="btn btn-primary"  onClick="findClick();" value="Search" />
				</td>

          </tr>
        </table>
      </td>
    </tr>


     <tr valign="top" height="100%">
      <td class="mainBody">
        <iframe name="resultsFrame" id="resultsFrame" src="" style="width:100%;height:100%;" frameborder="0" marginwidth="0" marginheight="0"></iframe>
      </td>
    </tr>
</table>

</form:form>
</body>
</html>

3. searchUserResult.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<html>
<head>
<title></title>

<script type="text/javascript">
  function apply(){

	  var tr = getSelectedRows("picklistResults");
	  if (tr.length == 0){
	    alert("Nothing selected.");
	    return false;
	  }
	  
  var object = new Object();
 
// 返回信息到母页面
  object.sender_name =tr[0].FIRST_NAME;
  object.business = tr[0].LAST_NAME;

  window.returnValue = object;
  window.close();
}

//以下js 为点击选取对应行
//Returns an array of references to rows in the table
//that have been selected
function getSelectedRows(tableId) {

//alert("inside selectSingleRow");
 selectedArray = new Array();
 tbl = document.getElementById(tableId);
 if (tbl == null)
   return selectedArray;

 rows = tbl.getElementsByTagName("tr");
	for ( var i = 0; i < rows.length; ++i) {
   var cel = rows[i].cells[0];
		if (cel.style.backgroundColor != "") {
     selectedArray.push(rows[i]);
   }
 }
	//alert("selectedArray"+selectedArray);
 return selectedArray;
}
//Selects a single TR by setting its className and clearing all others.
function selectSingleRow() {
//alert("inside selectSingleRow");
  var obj = event.srcElement;

  var table = getParent(obj,"TABLE");
	if (table.id != "") {
    var selRows = getSelectedRows(table.id);
    for (var i=0; i<selRows.length; i++)
      // This toggles off selected rows.
	      selectRow(selRows[i]);
  }

  // This selects the current row.
	if (obj.tagName != "TR")
		obj = getParent(obj, "TR");
  selectRow(obj);
}
//Traverse up the DOM to the first tag found.
function getParent(obj, tag) {
  var o = obj.parentElement;
	while (o) {
    if (o.tagName == tag)
      return o;
    o = o.parentElement;
  }
  return null;
}

//Selects the TR by setting its className.
function selectRow(obj) {
	for ( var i = 0; i < obj.cells.length; i++) {
    var cel = obj.cells[i];
		if (cel.style.backgroundColor == "")
      cel.style.backgroundColor = "#cccccc";
		else
      cel.style.backgroundColor = "";
  }
}

</script>

</head>

<body>
<table cellspacing="0" cellpadding="0" width="100%" style="padding-right:15px;" align="center">
<tr><td>
<div id="ResultsDiv" style="margin: 0px; overflow: scroll;">
<table cellspacing="0" cellpadding="1" style="margin-top:10px" width="100%" height="100%" align="center"
	border="1">

</table>

	<table class="standardTable" id="picklistResults" cellspacing="0" border="1"
			cellpadding="1" style="width: 100%; height: 20%;border-top-style: none;">
			<tr class="fr" style="border-top-style: none;">
      <td height="20px"	width="8%" align="center">First Name</td>
      <td height="20px"	width="8%" align="center">Last Name</td>
			</tr>
		        ${results} 为model返回值 为List<?>类型  
 			在第一个tr 存放需要传递的参数，td为页面显示信息							

			<c:forEach var="hr" items="${results}">
	<tr 	FIRST_NAME="<c:out value="${hr.firstName}"/>"
       	 	LAST_NAME="<c:out value="${hr.lastName}"/>"
		οnclick="selectSingleRow();" οndblclick="selectSingleRow();"style="cursor: hand;">
		<td  align="center"><c:out value="${hr.firstName}" />  </td>
		<td  align="center"><c:out value="${hr.lastName}" />  </td> 
		</tr>
	</c:forEach>
   </table></div></td></tr>
<tr>
<td>
<table border="0" cellspacing="2" cellpadding="2" align="right" >
	<tr>
		<td align="right"><input class="buttonStyle" type="button"
			value="  Add  " οnclick="apply();"></td>
		  
		<td align="right"><input class="buttonStyle" type="button"
			value="Cancel" οnclick="parent.window.close();"></td>
	</tr>
</table>
</td></tr></table>
</td>
</tr>
</table>
</body>
</html>