QMail的列表在每一行的最后都有一个图标,点击图标,下面就出现一个子窗体显示邮件的正文。这个效果用Gridview结合Javascript也可以实现。我在项目中用jqeury作辅助实现这样的效果,贴出来分享。
原理很简单,就是在单击行的下面动态添加一行,里面放一个iframe就可以。通过单击图标实现动态行的隐藏和显示。Javascript如下
aspx页面的HEAD里增加对js文件的引用,并创建js对象,代码如下
// 第一参数:表格列数;第二个参数:动态列的高度;第三个参数:iframe链接的页面。
createQMailObj("7", "300px", "UserDetail.aspx");
</script>
Gridview中增加一TemplateField列,放一个小图标或什么的,
<ItemStyle CssClass="cz" />
<ItemTemplate>
<img src="../images/td_in.gif" onclick='<%#"javascript:showDetail(this, \"" + Eval("UserID") + "\");" %>' />
</ItemTemplate>
</asp:TemplateField>