查找带回——子父页面数据交互

1 背景

在做应用系统时，经常遇到这样的需求：需要弹出一个页面，选择一些数据，并将数据带回到父页面中去。通常有以下几种情况：

• 选择单行记录，并且将文本赋值到textbox，将编号赋值到hidden上；
• 选择单行记录，并且将文本赋值到textbox，将编号赋值到hidden上，最后刷新页面到后台；
• 选择任意多行记录，并且将文本(逗号隔开)赋值到textbox，将编号(逗号隔开)赋值到hidden上；
• 选择限制的N行记录，并且将文本(逗号隔开)赋值到textbox，将编号(逗号隔开)赋值到hidden上；

还有其它一些情况，总之，需要提供一个机制，来支持父子页面的数据传输。我将它分成两种情况：

• 选择单行记录，并自动赋值到textbox和hidden上；
• 选择（单行/任意多行/限制N行）,然后调用自己定义方法，来赋值、刷新页面或做其它的工作。

2 关键代码

父页面关键代码：

//data是形如[{key:1,value:一,...},{key:2,value:二,...},...]
var targetControl = null;
function SingleCallBack(data) {
    if (data.length > 0) {
        $("#txt" + targetControl).val(data[0].value);
        $("#hf" + targetControl).val(data[0].key);
    }
    else {
        $("#txt" + targetControl).val("");
        $("#hf" + targetControl).val("");
    }
}

var ComSelect = {

    //一般通用选择（自动值直接加到文本框和隐藏控件上）
    SelectSingle: function (_title, _url, _width, _height, _targetControl) {
        var param = "callfun=SingleCallBack&multi=false&hfTargetID=hf" + _targetControl + "&limitNum=1";
        _url.indexOf("?") > 0 ? _url += "&" + param : _url += "?" + param;
        targetControl = _targetControl;
        OpenWindow(_url, _title, _width, _height)
    },

    //自定义通用选择，调用用户特定的方法
    SelectWithCallBack: function (_title, _url, _width, _height, _callFun, _targetControlID, _limitNum) {
        var param = "callfun=" + _callFun + "&multi=true&hfTargetID=" + _targetControlID + "&limitNum=" + _limitNum;
        _url.indexOf("?") > 0 ? _url += "&" + param : _url += "?" + param;
        OpenWindow(_url, _title, _width, _height)
    }
}

父页面截图：

弹出页面关键代码：

$(document).ready(function () {
            //加载已选项
            SelectedDefault();

            var data = new Array();
            $(".dataTable tbody tr").dblclick(function () {
                //组织选择数据
                SetCurrentValue(data, 0, $(this));
                //调用父页面方法
                CallOpenerMethod(data);
            });

            $("#btnDone").click(function () {
                var checkArray = $(":checked", $(".dataTable"));

                //限制选择的数量
                var limitNum = GetQueryString("limitNum");
                if (limitNum != "undefined" && limitNum < checkArray.length) {
                    alert("Select " + limitNum + " most!");
                    return;
                }
                
                //组织多项选择数据
                $.each(checkArray, function (key, value) {
                    SetCurrentValue(data, key, $(this).parents("tr"));
                });

                //调用父页面方法
                CallOpenerMethod(data)
            });
        });

弹出页面截图：

3 Demo

Demo下载：Demo