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 > < div id ='row1' class ='DivPanel' > < TABLE cellSpacing ='2' cellPadding ='2' width ='100%' border ='0' > < tr > < td class ='La_Ma_Text' > </ 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' > 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> " + " <div id='row " + count + " ' class='DivPanel'> " + " <TABLE cellSpacing='2' cellPadding='2' width='100%' border='0'> " + " <tr><td class='La_Ma_Text'> </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'> 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、代码：
备注：代码是电脑上找到的，原出处不详。
作者：
出处： 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。