查找帶回——子父頁面數據交互

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