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、代码：/Files/zhuqil/DataGridViewDemo.zip
备注：代码是电脑上找到的，原出处不详。
本文转自麒麟博客园博客，原文链接：http://www.cnblogs.com/zhuqil/archive/2010/03/29/GridView_Panel.html，如需转载请自行联系原作者
