过去写的webform程序, 很多地方需要弹出一个窗口进行数据选择. 最简单的情况是选择了弹出窗口某条数据后直接修改某个html元素的值, 麻烦一点的就是数据库可能保存的是被选择记录的id, 所以除了有用于显示文字的textbox, 还要有一个用来存放id的hidden. 更恐怖的就是选了一条记录后, 还要根据这条记录填充多个html元素的值. 最近写了个控件, 能比较通用的处理这些情况.
这是一个复合控件, 里面包含了一个用来显示文字的TextBox(Text对应控件Text属性), 一个用来存放幕后真实值的隐藏的TextBox(Text对应控件的Value属性), 和一个用Image做成的按钮.
按钮被点击后, 将会调用负责弹出ModalDialog的js函数, 这个函数由ClientOnClick属性指定. 然后这个函数则要根据实际需要去写. 对ModalDialog的要求是, 点击某条记录后应该返回一个包含所需属性的自定义的js对象, 对打开ModalDialog的函数要求是, 第一个参数是传入用于显示文字的TextBox的id, 第二个是hidden的Id. 如果有需要的话可以有更多参数, 在控件的ClientOnClickParams属性以,param1,param2...的形式传入. 用showModalDioalog函数打开用于选择数据的窗口并选择数据后, 给显示文字TextBox和hidden赋需要的值, 最后函数返回ModalDialog的返回值. 在下面的示例函数里虽然只处理了name和id属性, 但ModalDialog可以返回更多信息( 例如sex, birthday属性), 留给ClientAfterClick属性指定的js函数去处理. 示例代码中用了setControls函数读取sex, birthday并把他们填入相应的TextBox
function openTestWindow(displayId, valueId, more) {
var popUp;
var offsetTop = document.getElementById(displayId).offsetTop;
var offsetLeft = document.getElementById(displayId).offsetLeft;
var parentElement = document.getElementById(displayId).offsetParent;
while (parentElement) {
offsetTop += parentElement.offsetTop;
offsetLeft += parentElement.offsetLeft;
parentElement = parentElement.offsetParent;
}
offsetLeft += window.screenLeft - document.body.scrollLeft ;
offsetTop += window.screenTop + document.getElementById(displayId).offsetHeight - document.body.scrollTop;
if (!more) {
url = '/dialogs/SelectPerson.aspx';
}
else {
url = '/dialogs/SelectPerson.aspx?morePerson=' + more;
}
url = applicationPath + url;
popUp = window.showModalDialog(url,
[window],
'dialogWidth:300px;dialogHeight:300px;status:0;dialogLeft:' + offsetLeft + ';dialogTop:' + offsetTop ) ;
if (popUp != null) {
document.getElementById(displayId).value = popUp.name;
document.getElementById(valueId).value = popUp.id;
return popUp;
}
}
控件 示例
