添加一张表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、最终效果：
备注：代码是电脑上找到的，原出处不详
本文示例源代码或素材下载