JQuery扩展Gridview实现像QMail列表那样的展开效果

QMail的列表在每一行的最后都有一个图标，点击图标，下面就出现一个子窗体显示邮件的正文。这个效果用Gridview结合Javascript也可以实现。我在项目中用jqeury作辅助实现这样的效果，贴出来分享。

原理很简单，就是在单击行的下面动态添加一行，里面放一个iframe就可以。通过单击图标实现动态行的隐藏和显示。Javascript如下

7// QMailObj类型的全局变量

8var qmail = null;

9

10//

11// 定义配置类

12//

13var QMailObj = function(sColspan, sTdheight, target)

14

24//

25// 调用它来创建一个新的QMailObj对象

26// 参数说明：

27// sColspan: 表的列数

28// sTdheight: 浮动窗口的高度

29// 返回：无

30//

31function createQMailObj(sColspan, sTdheight, target)

32

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

49function doShowDetail(v, url)

50

96//

97// 隐藏浮动窗口

98//

99function collapseDetail(v)

100

aspx页面的HEAD里增加对js文件的引用，并创建js对象，代码如下

Code: GridView

<asp:TemplateField HeaderText="操作">

<ItemStyle CssClass="cz" />

<ItemTemplate>

<img src="../images/td_in.gif" onclick='<%#"javascript:showDetail(this, \"" + Eval("UserID") + "\");" %>' />

</ItemTemplate>

</asp:TemplateField>