页面高级搜索功能

概要

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