概要
在一个母页面A上开启新页面B,在B中填写查询参数,点击查询提交后关闭B页面,同时把B中参数提交到Action中查询数据,显示在母页面A中。
详细实现
实现A页面
(1)定义ArrayList变量存放查询字段名字,定义Hidden项存放查询字段的值。
查询字段名定义
var arrSearchingItem = new Array("vo.productCode","vo.productName");
查询字段值定义
<html:hidden name="ProductForm" property=" vo.productCode " />
<html:hidden name="ProductForm" property=" vo.productName " />
ProductForm是formBean的名字 property是formBean中属性
这样使用struts 就可以把参数值存放在formBean中传递到后台进行操作。
(2)编写JAVASCRIPT函数A
function doOpenSearch(){
var sUrl = renderSearchingAction('./B.do', arrSearchingItem);
fillSearchingItems(document.forms[0], sUrl, arrSearchingItem,405,490);
}
function renderSearchingAction(action, arrSearchingItem) {
if(!action || !arrSearchingItem) {
return;
}
var sParameters = '';
for(var i = 0; i < arrSearchingItem.length; i++) {
var sCond = document.all[arrSearchingItem[i]].value;
if(sCond != '') {
sParameters += (arrSearchingItem[i] + '=' + sCond);
sParameters += '&';
}
}
if(sParameters != '') {
action += ('?' + sParameters.substring(0, sParameters.length - 1));
}
return action;
}
function fillSearchingItems(formt, action, arrSearchingItem, dialogWidth, dialogHeight) {
//set default width and height of dialog.
dialogWidth = (!dialogWidth) ? 406 : dialogWidth;
dialogHeight = (!dialogHeight) ? 452 : dialogHeight;
var arrParameter = new Array();
for(var i = 0; i < arrSearchingItem.length; i++) {
arrParameter[arrSearchingItem[i]] = formt.elements[arrSearchingItem[i]].value;
}
var arrValue = onShowModeDialog(encodeURI(action), encodeURIComponent(arrParameter), dialogWidth, dialogHeight);
//这时运行B页等待关闭取到返回值后再接着执行下面代码
if(arrValue == null) {
return;
}
for(var i = 0; i < arrSearchingItem.length; i++) {
formt.elements[arrSearchingItem[i]].value = arrValue[arrSearchingItem[i]];
}
//submit the current form.
formt.submit();
}
function onShowModeDialog(dialogURL, paramObj,
dialogWidth, dialogHeight,
dialogTop, dialogLeft,
bScrolled, bModal) {
var returnVal = null;
var dialogFeatures = "dialogWidth:" + dialogWidth + "px;"
+ "dialogHeight:" + dialogHeight + "px;"
+ "help:no;"
+ "resizable:no;"
+ "status:yes;";
//dialog's location
if(!dialogTop || !dialogLeft) {
dialogFeatures += "center:yes;";
} else {
dialogFeatures += ("dialogTop:" + dialogTop + ";dialogLeft:" + dialogLeft + ";");
}
//scroll
if(!bScrolled) {
dialogFeatures += "scroll:no;";
} else {
dialogFeatures += "scroll:yes;";
}
if(bModal == null || bModal == undefined || bModal) {
//打开B页面
returnVal = window.showModalDialog(dialogURL, paramObj, dialogFeatures);
} else {
returnVal = window.showModelessDialog(dialogURL, paramObj, dialogFeatures);
}
return returnVal;
}
实现B页面
(1)同样定义相同的ArrayList变量存放查询字段名字,定义可供输入的组件,名字以查询字段名字相同。
查询字段名定义
var arrSearchingItem = new Array("vo.productCode","vo.productName");
可供输入的组件
<html:text name="ProductForm" property="vo.productCode" size="20" />
<html:text name="ProductForm" property="vo.productName" size="20" />
(2)编写JAVASCRIPT函数B
function doEnter() {
var arrValue = collectSearchingItems(document.forms[0], arrSearchingItem);
//设置返回值
window.returnValue = arrValue;
window.close();
//关闭后执行A页的代码
}
function collectSearchingItems(formt, arrSearchingItem) {
var arrValue = new Array();
var eleObj = null;
for(var i = 0; i < arrSearchingItem.length; i++) {
eleObj = formt.elements[arrSearchingItem[i]];
if(eleObj) {
if(eleObj.length && eleObj[0].type == 'radio') {
//don't include select
for(var j = 0; j < eleObj.length; j++) {
if(eleObj[j].checked) {
arrValue[arrSearchingItem[i]] = eleObj[j].value;
}
}
} else {
if(eleObj.type == 'radio') {
if(eleObj.checked) {
arrValue[arrSearchingItem[i]] = eleObj.value;
}
} else {
arrValue[arrSearchingItem[i]] = eleObj.value;
}
}
}
}
return arrValue;
}
总结
JAVASCRIPT函数A
实现内容:
1 提交action的url以及把参数列表传递到B页面.(这里打开B页面用到JAVASRIPT函数window.showModalDialog(URL,dialogArgments.features)这个函数打开B页后等待,直到B页关闭后,它得到个返回值才结束这个函数。
/*
打开一个新窗口
URL为要开启的网页。
dialogArgments为设定好传递给新视窗网页的参数,可以为任意数据类型。
feature 与open()的类似,都是格式方面的设定。调用格式为featureName1:featureValue1:(分号)featureName2:featureValue2:
certer , dialogHeight, dialogLeft,dialogTop,dialogWidth,help(是否显示help按钮,下同),status,resizeable
值=1为yes,0为no.
我认为最重要的是dialogArgments,可以传递值到新的窗口。
第二重要就是 它的返回值 window.returnValue.可以在showModalDialog开启的窗口关闭后前,回传一个任意类型的值*/
)
----à执行B页 等待回应
2 把从B页面返回来的查询参数赋值到A页面的Hidden项中也就是放到formBean中
3 提交A页面
执行函数流程
doOpenSearch()调用renderSearchingAction()完成拼接action的url;
doOpenSearch()调用fillSearchingItems()完成跳转B页面得到返回值,并提交A页;
fillSearchingItems()调用onShowModeDialog()完成打开B页的属性设置以及打开B页;
onShowModeDialog()调用window.showModalDialog()系统打开B页;
JAVASCRIPT函数B
实现内容
1 从页面中的组件中取到值放到AarryList中作为查询参数值返回
2 设置页面返回值
3 关闭页面B
执行函数流程
doEnter()调用collectSearchingItems()完成从B也组件中取到输入值放在AarryList作为返回参数;