查找带回——子父页面数据交互
2013-04-08 22:29 Mike.Jiang 阅读(4116) 评论(5) 编辑 收藏 举报1 背景
在做应用系统时,经常遇到这样的需求:需要弹出一个页面,选择一些数据,并将数据带回到父页面中去。通常有以下几种情况:
- 选择单行记录,并且将文本赋值到textbox,将编号赋值到hidden上;
- 选择单行记录,并且将文本赋值到textbox,将编号赋值到hidden上,最后刷新页面到后台;
- 选择任意多行记录,并且将文本(逗号隔开)赋值到textbox,将编号(逗号隔开)赋值到hidden上;
- 选择限制的N行记录,并且将文本(逗号隔开)赋值到textbox,将编号(逗号隔开)赋值到hidden上;
还有其它一些情况,总之,需要提供一个机制,来支持父子页面的数据传输。我将它分成两种情况:
- 选择单行记录,并自动赋值到textbox和hidden上;
- 选择(单行/任意多行/限制N行),然后调用自己定义方法,来赋值、刷新页面或做其它的工作。
2 关键代码
父页面关键代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//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) } }
父页面截图:
弹出页面关键代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$(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