一步一步教你在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

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

 

转载于:https://www.cnblogs.com/zhuqil/archive/2010/03/29/GridView_Panel.html