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

    QMail的列表在每一行的最后都有一个图标，点击图标，下面就出现一个子窗体显示邮件的正文。这个效果用Gridview结合Javascript也可以实现。我在项目中用jqeury作辅助实现这样的效果，贴出来分享。
    原理很简单，就是在单击行的下面动态添加一行，里面放一个iframe就可以。通过单击图标实现动态行的隐藏和显示。Javascript如下

  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)
{
    var floatTR = $("#trtmp");
    if(floatTR){
        floatTR.remove();
    }
    qmail.lastTR.css("background-color", qmail.bgcolor);
}
    

 

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

<script language="javascript" type="text/javascript">
    // 第一参数：表格列数；第二个参数：动态列的高度；第三个参数：iframe链接的页面。
        createQMailObj("7", "300px", "UserDetail.aspx");
</script>    

 

Gridview中增加一TemplateField列，放一个小图标或什么的，

<asp:TemplateField HeaderText="操作">
    <ItemStyle CssClass="cz" />
    <ItemTemplate>
        <img src="../images/td_in.gif" onclick='<%#"javascript:showDetail(this, \"" + Eval("UserID") + "\");"  %>' />
        
    </ItemTemplate>
</asp:TemplateField>