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

  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 " ;
     }
    }

.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 ;
    
}

  < 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 >

  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);                
            }
        }
    }