页面高级搜索功能

概要

在一个母页面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作为返回参数；