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 相关文章推荐
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
node.js学习总结之调式代码的方法
Jun 25 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 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
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
文本链接逐个出现的js脚本
2007/12/12 Javascript
js CSS操作方法集合
2008/10/31 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
Python实现全局变量的两个解决方法
2014/07/03 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
python实现简单成绩录入系统
2019/09/19 Python
python 如何调用 dubbo 接口
2020/09/24 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
大学自荐信
2013/12/12 职场文书
化学教学随笔感言
2014/02/19 职场文书
服务承诺书范文
2014/05/19 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
爱情保证书
2015/01/17 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
Python入门之基础语法详解
2021/05/11 Python