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 相关文章推荐
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
JavaScript实现彩虹文字效果的方法
Apr 16 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 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
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
一个js实现的所谓的滑动门
2007/05/23 Javascript
学习ExtJS Panel常用方法
2009/10/07 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
Move.js入门
2017/02/08 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
Python translator使用实例
2008/09/06 Python
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
python 调用HBase的简单实例
2016/12/18 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
如何用Python绘制3D柱形图
2020/09/16 Python
公司离职证明标准样本
2014/10/05 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
保险公司增员口号
2015/12/25 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python
Nginx配置根据url参数重定向
2022/04/11 Servers