JS调用弹出框并获取返回值

peng_jian_ming

浏览: 259055 次
性别:
来自: 济南

最近访客更多访客>>

snowman_521

piaoliousihai

spaceandroid

lisycn

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

JSP Web HTML

在Web开发中不免会遇到这种问题，在页面中单击按钮调用事件弹出一个对话框，然后选中对话框中的数据，并返回到当前页。
1、首先创建一个方法进行调用弹出框
function selectItem(obj){
var url="/ycportal/Item.jsp?url=contentblock.block.${requestmap.blockkey}.view.list.whseitem";
var str = window.showModalDialog(url,window,"status=off","dialogWidth=140px;dialogHeight=100px");
if (str!=undefined && str.length>0)
{
var dataRow = obj.parentElement.parentElement;
dataRow.cells[0].children[1].value = str[0][0];
dataRow.cells[1].children[0].value = str[0][1];
dataRow.cells[2].children[0].value = str[0][2];
dataRow.cells[3].children[0].value = 1;
}
}
解释：obj为本身对象，是个Button，该对象放在一个表格中，调用方式为：<button onclick="selectItem(this)" style="border:1px solid #59AFCD;background:#C0E8F4;" >选择商品</button>
定义变量str来接收弹出框的返回值
2、组织弹出框页面内容
<%@ page contentType="text/html;charset=gb2312" %>

<HTML>
<HEAD><TITLE>商品信息</TITLE></HEAD>
<BODY>
<script language="javascript">
var arr = new Array();
function addReturnData(selectArray){
if(selectArray!=null&&selectArray.length>0)
arr[arr.length]=selectArray;
}

function returnData(){
window.returnValue=arr;
window.close();
}

function getArray(){
return arr;
}

function addAndReturnData(selectArray){
if(selectArray!=null&&selectArray.length>0)
addReturnData(selectArray);
returnData();
}
</script>
<iframe scrolling="yes" id="login" frameBorder="0" src='<%="webpublish/"+request.getParameter("url")%>' height="520" width="504">

</iframe>
</BODY>
</HTML>
在弹出框页面利用一个Iframe来进行嵌套内容页面，这样可以使内容页面使用更加灵活，可以进行查询、添加、修改、删除操作而不会跳出弹出框外。
方法解释：首先定义一个数组进行组织内容页面的数据信息并进行返回。方法addReturnData(selectArray)用来向定义的数组中添加数据信息，returnData()方法用来进行返回数据信息，并关闭对话框。addAndReturnData(selectArray)方法是提供内容页面调用的方法，用来进行组织数据。
3、弹出对话框中内容页面的组织
function getItem(obj){
var arr = new Array();
var dataRow = obj.parentElement.parentElement;
arr[0] = dataRow.cells[0].children[1].value;
arr[1] = dataRow.cells[1].innerHTML;
arr[2] = dataRow.cells[2].innerHTML;
window.parent.addAndReturnData(arr);
window.close();
}
<tr align="center" height="20px">
<td><input type="radio" name="select" onClick="getItem(this)">
<input type="hidden" value="$!data.ITEM_ID"></td>
<td >$!data.ITEM_NAME</td>
<td >$!data.ITEM_CODE</td>
</tr>
方法getItem(obj)用来进行组织数据，并调用父窗体对象中的方法addAndReturnData(arr)用来进行传递数据信息。

分享到：

带你深入了解IBM DB2的通信与连接过程 | 使用root用户启动oracle数据库服务

2008-11-14 08:54
浏览 3431
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论