JavaScript 弹出窗体点击按钮返回选择数据的实现


Posted in Javascript onApril 01, 2010

首先是父页面的代码:

<head runat="server"> 
<title>无标题页</title> 
<%-- <script type="text/javascript"> 
function openDia() { 
var returned = window.showModalDialog("Default4.aspx?" + (new Date()), window); 
if (returned) { 
document.getElementById("ret").innerHTML = returned; 
} 
else { 
document.getElementById("ret").innerHTML = ""; 
} 
} 
</script> --%> 
<script type="text/javascript"> 
function openDia(){ 
var returned = window.showModalDialog("Default3.aspx?" + (new Date()), window); 
if (returned){ 
document.getElementById("tbtext").value = returned; 
} 
else{ 
document.getElementById("tbtext").value = ""; 
} 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div id="ret"> 
<input id="tbtext" type="text" value="" onclick="openDia();return false;" /> 
</div> 
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="openDia();return false;" /> 
<input id="Hidden1" type="hidden" runat="server" /> 
</form> 
</body> 
</html>

关于加上那个 (new Data()) 是要避免showModalDialog页面自动缓存的问题,导致第二次打开页面,数据没有被刷新,这是因为showModalDialog页面如果每次的URL一样的话,它会自动显示以前在缓存里面的数据。
接着是子页面Default3.aspx的代码:
<head runat="server"> 
<title>无标题页</title> 
<script type="text/javascript"> 
function getSelected(data) { 
var str = data; 
window.returnValue = str.toString(); 
window.close(); 
} 
</script> 
<base target="_self"/> 
</head> 
<body> 
<form id="form1" runat="server" target=""> 
<div> 
<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound"> 
<Columns> 
<asp:TemplateField> 
<ItemTemplate> 
<asp:LinkButton id="lnkSelect2" runat="server" Text="Select" > </asp:LinkButton> 
</ItemTemplate> 
</asp:TemplateField> 
</Columns> 
</asp:GridView> 
 </div> 
</form> 
</body> 
</html>

Default3.aspx里面有一个gridview控件,数据绑定(自己去绑定,代码就不贴上来了)好后,就是选择自己需要的数据了。
Default3.aspx.cs:
[code]
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
LinkButton b = (LinkButton)e.Row.FindControl("lnkSelect2");
b.Attributes.Add("OnClick", "javascript:getSelected('" + e.Row.Cells[1].Text + "');");
}
}
[html]
其中Default3.aspx中<head></head>之间的<base target="_self"/>和<form target="">作用是可以避免子页面点击选择按钮后弹出第三个窗体。
例子就这样,具体还是要根据自己的需求s去体验和改进。
Javascript 相关文章推荐
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 Javascript
js 实现打印网页中定义的部分内容的代码
Apr 01 #Javascript
js prototype截取字符串函数
Apr 01 #Javascript
javascript getElementsByClassName函数
Apr 01 #Javascript
JS getStyle获取最终样式函数代码
Apr 01 #Javascript
Javascript 通过json自动生成Dom的代码
Apr 01 #Javascript
JS中confirm,alert,prompt函数使用区别分析
Apr 01 #Javascript
JavaScript中实现块作用域的方法
Apr 01 #Javascript
You might like
将OICQ数据转成MYSQL数据
2006/10/09 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
详解js中==与===的区别
2017/01/08 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
微信小程序实现下拉刷新动画
2019/06/21 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
在Python中使用异步Socket编程性能测试
2014/06/25 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
python虚拟环境迁移方法
2019/01/03 Python
python游戏地图最短路径求解
2019/01/16 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
Python通过字典映射函数实现switch
2020/11/06 Python
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
大学生简历中个人的自我评价
2013/10/06 职场文书
2013年大学生的自我鉴定
2013/10/24 职场文书
考试退步检讨书
2014/01/15 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
推销搭讪开场白
2015/05/28 职场文书
举起手来观后感
2015/06/09 职场文书