QMail的列表在每一行的最后都有一个图标,点击图标,下面就出现一个子窗体显示邮件的正文。这个效果用Gridview结合Javascript也可以实现。我在项目中用jqeury作辅助实现这样的效果,贴出来分享。
原理很简单,就是在单击行的下面动态添加一行,里面放一个iframe就可以。通过单击图标实现动态行的隐藏和显示。Javascript如下
qmailDataGrid.js
1/**//**
2* qmailDataGrid
3* zyl 2008-10-26
4*
5*/
6
7// QMailObj类型的全局变量
8var qmail = null;
9
10//
11// 定义配置类
12//
13var QMailObj = function(sColspan, sTdheight, target)
14{
15 this.state = 0;// 0 为没有打开,1为打开了
16 this.lastTD = null; // 上一次触发事件控件,注意:它并不是TD,而是那个控件,如image
17 this.lastTR = null; // 上一次浮动窗体在哪个TR下面
18 this.colspan = sColspan; // 表的列数
19 this.tdheight = sTdheight; // 浮动窗体的高度
20 this.bgcolor = "#FFFFFF"; // 上一次浮动窗体上的TR背景色
21 this.subURL = target;
22}
23
24//
25// 调用它来创建一个新的QMailObj对象
26// 参数说明:
27// sColspan: 表的列数
28// sTdheight: 浮动窗口的高度
29// 返回:无
30//
31function createQMailObj(sColspan, sTdheight, target)
32{
33 qmail = new QMailObj(sColspan, sTdheight, target);
34}
35
36//
37// 显示浮动窗体
38// 参数说明:
39// v: 触发事件的对象
40// itemId: 怎么说呢,显示具体对象的url可能是:http://soft.buaa.edu.cn/ShowDetail.aspx?id=100
41// itemId就是指id那个值。这个地方还需要做一些改进。
42//
43function showDetail(v, itemId)
44{
45// alert(qmail.subURL);
46 doShowDetail(v, qmail.subURL + "?id=" + itemId);
47}
48
49function doShowDetail(v, url)
50{
51 if(qmail.state == 1)
52 {
53 if(qmail.lastTD != null && qmail.lastTD == v)
54 {
55 collapseDetail(v);
56 qmail.state = 0;
57 return;
58 }
59 else
60 {
61 collapseDetail(qmail.lastTD);
62 qmail.lastTD = v;
63 }
64 }
65
66 var floatTR = $("#trtmp");
67 if(floatTR){
68 floatTR.remove();
69 }
70 var detailexp = "<tr id='trtmp'><td colspan='"
71 + qmail.colspan
72 + "' height='"
73 + qmail.tdheight
74 + "'><iframe class='iframe' src='"
75 + url
76 + "'></iframe></td></tr>";
77
78 // 获取当前的tr
79 var tr = $(v).parent().parent();
80
81 if(floatTR && floatTR.html() != null)
82 {
83 tr.after(floatTR);
84 }
85 else{
86 tr.after(detailexp);
87 }
88
89 qmail.state = 1;
90 qmail.lastTD = v;
91 qmail.bgcolor = tr.css("background-color");
92 qmail.lastTR = tr;
93 tr.css("background-color", "#DDDDDD");
94}
95
96//
97// 隐藏浮动窗口
98//
99function collapseDetail(v)
100{
101 var floatTR = $("#trtmp");
102 if(floatTR){
103 floatTR.remove();
104 }
105 qmail.lastTR.css("background-color", qmail.bgcolor);
106}
107
1/**//**
2* qmailDataGrid
3* zyl 2008-10-26
4*
5*/
6
7// QMailObj类型的全局变量
8var qmail = null;
9
10//
11// 定义配置类
12//
13var QMailObj = function(sColspan, sTdheight, target)
14{
15 this.state = 0;// 0 为没有打开,1为打开了
16 this.lastTD = null; // 上一次触发事件控件,注意:它并不是TD,而是那个控件,如image
17 this.lastTR = null; // 上一次浮动窗体在哪个TR下面
18 this.colspan = sColspan; // 表的列数
19 this.tdheight = sTdheight; // 浮动窗体的高度
20 this.bgcolor = "#FFFFFF"; // 上一次浮动窗体上的TR背景色
21 this.subURL = target;
22}
23
24//
25// 调用它来创建一个新的QMailObj对象
26// 参数说明:
27// sColspan: 表的列数
28// sTdheight: 浮动窗口的高度
29// 返回:无
30//
31function createQMailObj(sColspan, sTdheight, target)
32{
33 qmail = new QMailObj(sColspan, sTdheight, target);
34}
35
36//
37// 显示浮动窗体
38// 参数说明:
39// v: 触发事件的对象
40// itemId: 怎么说呢,显示具体对象的url可能是:http://soft.buaa.edu.cn/ShowDetail.aspx?id=100
41// itemId就是指id那个值。这个地方还需要做一些改进。
42//
43function showDetail(v, itemId)
44{
45// alert(qmail.subURL);
46 doShowDetail(v, qmail.subURL + "?id=" + itemId);
47}
48
49function doShowDetail(v, url)
50{
51 if(qmail.state == 1)
52 {
53 if(qmail.lastTD != null && qmail.lastTD == v)
54 {
55 collapseDetail(v);
56 qmail.state = 0;
57 return;
58 }
59 else
60 {
61 collapseDetail(qmail.lastTD);
62 qmail.lastTD = v;
63 }
64 }
65
66 var floatTR = $("#trtmp");
67 if(floatTR){
68 floatTR.remove();
69 }
70 var detailexp = "<tr id='trtmp'><td colspan='"
71 + qmail.colspan
72 + "' height='"
73 + qmail.tdheight
74 + "'><iframe class='iframe' src='"
75 + url
76 + "'></iframe></td></tr>";
77
78 // 获取当前的tr
79 var tr = $(v).parent().parent();
80
81 if(floatTR && floatTR.html() != null)
82 {
83 tr.after(floatTR);
84 }
85 else{
86 tr.after(detailexp);
87 }
88
89 qmail.state = 1;
90 qmail.lastTD = v;
91 qmail.bgcolor = tr.css("background-color");
92 qmail.lastTR = tr;
93 tr.css("background-color", "#DDDDDD");
94}
95
96//
97// 隐藏浮动窗口
98//
99function collapseDetail(v)
100{
101 var floatTR = $("#trtmp");
102 if(floatTR){
103 floatTR.remove();
104 }
105 qmail.lastTR.css("background-color", qmail.bgcolor);
106}
107
aspx页面的HEAD里增加对js文件的引用,并创建js对象,代码如下
Code: 页面引用
<script language="javascript" type="text/javascript">
// 第一参数:表格列数;第二个参数:动态列的高度;第三个参数:iframe链接的页面。
createQMailObj("7", "300px", "UserDetail.aspx");
</script>
<script language="javascript" type="text/javascript">
// 第一参数:表格列数;第二个参数:动态列的高度;第三个参数:iframe链接的页面。
createQMailObj("7", "300px", "UserDetail.aspx");
</script>
Gridview中增加一TemplateField列,放一个小图标或什么的,
Code: GridView
<asp:TemplateField HeaderText="操作">
<ItemStyle CssClass="cz" />
<ItemTemplate>
<img src="../images/td_in.gif" onclick='<%#"javascript:showDetail(this, \"" + Eval("UserID") + "\");" %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="操作">
<ItemStyle CssClass="cz" />
<ItemTemplate>
<img src="../images/td_in.gif" onclick='<%#"javascript:showDetail(this, \"" + Eval("UserID") + "\");" %>' />
</ItemTemplate>
</asp:TemplateField>