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 相关文章推荐
文字幻灯片
Jun 26 Javascript
Prototype使用指南之enumerable.js
Jan 10 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
JS实现4位随机验证码
Oct 19 Javascript
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
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
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
php异常处理方法实例汇总
2015/06/24 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
jQuery 位置插件
2008/12/25 Javascript
Aptana调试javascript图解教程
2009/11/30 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
python 换位密码算法的实例详解
2017/07/19 Python
解读! Python在人工智能中的作用
2017/11/14 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
python对视频画框标记后保存的方法
2018/12/07 Python
Python和Go语言的区别总结
2019/02/20 Python
详解python中的数据类型和控制流
2019/08/08 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
Python for循环及基础用法详解
2019/11/08 Python
python中xlutils库用法浅析
2020/12/29 Python
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
文秘应届生求职信
2014/07/05 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
个性与发展自我评价
2015/03/06 职场文书
会计实训总结范文
2015/08/03 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书