一步一步教你在GridView中实现可收缩的面板

1、创建一个TestDB数据库：

添加一张表Table_1，并向其中添加一些数据，表结构如下图。

2、新建一个asp.net网站。

在Default.aspx上拖放一个GridView。在页面上加入下面切换层的js代码：

 function toggleLayer(whichLayer)
 {     
     if (document.getElementById)
     {
      // this is the way the standards work
      var style2 = document.getElementById(whichLayer).style;
      style2.display = style2.display? "":"block";
     }
     else if (document.all)
     {
      // this is the way old msie versions work
      var style2 = document.all[whichLayer].style;
      style2.display = style2.display? "":"block";
     }
     else if (document.layers)
     {
      // this is the way nn4 works
      var style2 = document.layers[whichLayer].style;
      style2.display = style2.display? "":"block";
     }
    }

3、定义面板：

面板的css样式：

.DivPanelTextBold
{
    font-size: 8pt;
    font-weight:bold;
    color: #000000;
    font-family: Verdana, Helvetica, sans;
}
.DivPanel
{
    display:none;
    background-color:#F5F5F5;
    white-space: nowrap;
    border-bottom: #0072b4 1px solid;
    border-left: #0072b4 1px solid;
    border-top: #0072b4 1px solid;
    border-right: #0072b4 1px solid;
    width:90%;
    vertical-align:middle;
    
}

面板的HTML代码如下：

 <div>
    <a href="javascript:toggleLayer('row1');" class=DivPanelTextBold>a</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <div id='row1' class='DivPanel'>
    <TABLE cellSpacing='2' cellPadding='2' width='100%' border='0'>
    <tr>
    <td class='La_Ma_Text'>&nbsp;</td>
    <td align=right>
    <a href="javascript:toggleLayer('row1');" class=La_Ma_Link>
    <img src='Close.gif' border=0 align='absmiddle'>
    </a>
    </td>
    </tr>
    <tr>
    <td class='DivPanelText' width='158px'>&nbsp;Cell Value: </td>
    <td class='DivPanelText' width='152px'>a</td>
    </tr>
    <tr>
    <td>
    <b> Something </b>
    </td>
    </tr>
    </TABLE>
    </div>

收起的面板，如下图：

缩放的面板，如下图：

4、将面板绑定到GridView上。

    将面板的HTML代码绑定到Datatable的行上，并将Datatable绑定到GridView上，后台代码如下：

 private void LoadDT()
    {
        try
        {
            ds = new DataSet();
            sqlCMD = new SqlCommand("SELECT PKID,EmpId,SubModule FROM Table_1", sqlConn);
            sqlDA.SelectCommand = sqlCMD;
            sqlDA.Fill(ds);

            if (ds.Tables[0].Rows.Count > 0)
            {
                DataColumn dc1 = new DataColumn();
                dc1.DataType = System.Type.GetType("System.String");
                dc1.ColumnName = "PKID";

                DataColumn dc2 = new DataColumn();
                dc2.DataType = System.Type.GetType("System.String");
                dc2.ColumnName = "SubModule";

                dt.Columns.Add(dc1);
                dt.Columns.Add(dc2);


                foreach (DataRow dr in ds.Tables[0].Rows)
                {
                    myDr = dt.NewRow();
                    myDr[0] = dr[0].ToString();

                    myDr[1] = "<a href=\"javascript:toggleLayer('row" + count + "');\" class=DivPanelTextBold>" + dr["SubModule"].ToString() + "</a>"

                        + "&nbsp;&nbsp;&nbsp;&nbsp;<div id='row" + count + "' class='DivPanel'>"
                        + "<TABLE cellSpacing='2' cellPadding='2' width='100%' border='0'>"
                        + "<tr><td class='La_Ma_Text'>&nbsp;</td><td align=right><a href=\"javascript:toggleLayer('row" + count + "');\" class=La_Ma_Link><img src='Close.gif' border=0 align='absmiddle'></a></td></tr>";

                    myDr[1] = myDr[1] + "<tr><td class='DivPanelText' width='158px'>&nbsp;Cell Value: </td><td class='DivPanelText' width='152px'>" + dr["SubModule"].ToString() + "</td></tr>";

                    myDr[1] = myDr[1] + "<tr><td><b> Something </b></td></tr>";
                    myDr[1] = myDr[1] + "</TABLE>" + "</div><br>";
                    //dsa.dispose();
                    dt.Rows.Add(myDr);
                    count++;
                }
            }
            else
            {
           
            }

            this.GridView1.DataSource = dt;
            this.GridView1.DataBind();
            ds.Dispose();
        }
        catch (Exception ex)
        {
           
        }

    }

数据显示：

    protected void GridView1_DataBound(object sender, EventArgs e)
    {
        foreach (TableRow trow in GridView1.Rows)
        {
            foreach (TableCell tcell in trow.Cells)
            {
                tcell.Text = HttpUtility.HtmlDecode(tcell.Text);                
            }
        }
    }

5、最终效果：

 

6、代码：/Files/zhuqil/DataGridViewDemo.zip

备注：代码是电脑上找到的，原出处不详。