本文例子使用嵌套的 GridView 来显示主细表,并使用 JavaScript 来控制明细表的显示与隐藏。值得注意的是:在 GridView 的 RowDataBound 的事件里,不要多次执行数据库的打开,否则,将很快会导致连接数已满的问题。
例子中的数据库,请参照《 ASP.NET 2.0应用开发技术》一书中附带的光盘中的数据库。
代码:
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
GridViewNested.aspx.cs
"
Inherits
=
"
Exam_GridViewNested
"
%>

<!
DOCTYPE html PUBLIC
"
-//W3C//DTD XHTML 1.0 Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
<
html xmlns
=
"
http://www.w3.org/1999/xhtml
"
>
<
head runat
=
"
server
"
>
<
title
>
利用GridView显示主细表并添加打开、关闭功能
</
title
>
<
style type
=
"
text/css
"
>

td,div,a
...
{font-size:12px}
</
style
>

<
script type
=
"
text/javascript
"
>
//
<
...
{
ev = ev || window.event;
var target = ev.target || ev.srcElement;
var oDiv = document.getElementById("div" + sid);
oDiv.style.display = oDiv.style.display == "none"?"block":"none";
target.innerHTML = oDiv.style.display == "none"?"显示":"隐藏";
}
//
]]>
</
script
>

</
head
>
<
body
>
<
form id
=
"
form1
"
runat
=
"
server
"
>
<
asp:GridView ID
=
"
MasterGridView
"
runat
=
"
server
"
AutoGenerateColumns
=
"
false
"
Width
=
"
760px
"
BorderWidth
=
"
1
"
OnRowDataBound
=
"
MasterGridView_RowDataBound
"
DataKeyNames
=
"
id
"
ShowHeader
=
"
false
"
>
<
Columns
>
<
asp:TemplateField
>
<
ItemTemplate
>
<
div style
=
"
width: 100%; padding: 2px; font-weight: bold; background-color: #DEDEDE;
float
: left
"
>
<
span style
=
"
float: left
"
>
栏目名称:
<%
#Eval(
"
Title
"
)
%></
span
><
span style
=
"
float: right;
color: Red; cursor: pointer
"
onclick=
"
ShowHidden(
'
<%#Eval("id") %>
'
,
event
)
"
>隐藏</span></div>
<
div style
=
"
background-color: #FFF; padding-left: 60px;clear:both
"
id
=
"
div<%#Eval(
"
id
"
) %>
"
>
<
asp:GridView ID
=
"
DetailGridView
"
runat
=
"
server
"
AutoGenerateColumns
=
"
false
"
ShowHeader
=
"
true
"
Width
=
"
100%
"
HorizontalAlign
=
"
left
"
>
<
HeaderStyle BackColor
=
"
#9999FF
"
/>
<
Columns
>
<
asp:TemplateField HeaderText
=
"
文章名称
"
>
<
ItemTemplate
>
<
a href
=
"
/article/<%#Eval(
"
objectGuid
"
) %>/read.aspx
"
>
<%
#Eval(
"
Title
"
)
%>
</
a
>
[
<%
# Eval(
"
HitCount
"
)
%>
]
</
ItemTemplate
>
</
asp:TemplateField
>
<
asp:BoundField HeaderText
=
"
发布日期
"
DataField
=
"
CreateDate
"
HtmlEncode
=
"
false
"
DataFormatString
=
"
{0:yyyy年MM月dd日}
"
ItemStyle
-
Width
=
"
100px
"
ItemStyle
-
HorizontalAlign
=
"
Center
"
/>
</
Columns
>
</
asp:GridView
>
</
div
>
</
ItemTemplate
>
</
asp:TemplateField
>
</
Columns
>
</
asp:GridView
>
</
form
>
</
body
>
</
html
>
C#:
using
System;
using
System.Data;
using
System.Data.OleDb;
using
System.Configuration;
using
System.Collections;
using
System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Web.UI.HtmlControls;
public
partial
class
Exam_GridViewNested : System.Web.UI.Page
...
{
string ConnectionString = @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|aspxWeb.mdb;Persist Security Info=True";
OleDbConnection cn1;

protected void Page_Load(object sender, EventArgs e)
...{
if (!Page.IsPostBack)
...{
OleDbConnection cn = new OleDbConnection(ConnectionString);
cn.Open();
cn1 = new OleDbConnection(ConnectionString);
cn1.Open();
OleDbCommand cmd = new OleDbCommand("select * from [Subject]", cn);
OleDbDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
MasterGridView.DataSource = dr;
MasterGridView.DataBind();
dr.Close();
cmd.Dispose();
cn.Dispose();
cn1.Dispose();
cn = cn1 = null;
}
}
protected void MasterGridView_RowDataBound(object sender, GridViewRowEventArgs e)
...{
if (e.Row.RowType == DataControlRowType.DataRow)
...{
GridView oGridView = (GridView)e.Row.FindControl("DetailGridView");
if (oGridView != null)
...{
OleDbCommand cmd = new OleDbCommand("select top 10 * from Document Where pid = " + MasterGridView.DataKeys[e.Row.RowIndex].Value, cn1);
OleDbDataReader dr1 = cmd.ExecuteReader();
oGridView.DataSource = dr1;
oGridView.DataBind();
dr1.Close();
cmd.Dispose();
}
}
}
}
VB.NET
Private
ConnectionString
As
String
=
"
Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|aspxWeb.mdb;Persist Security Info=True
"
Private cn1 As OleDbConnection
Protected Sub Page_Load( ByVal sender As Object , ByVal e As EventArgs)
If Not Page.IsPostBack Then
Dim cn As OleDbConnection = New OleDbConnection(ConnectionString)
cn.Open
cn1 = New OleDbConnection(ConnectionString)
cn1.Open
Dim cmd As OleDbCommand = New OleDbCommand( " select * from [Subject] " , cn)
Dim dr As OleDbDataReader = cmd.ExecuteReader(CommandBehavior.CloseConnection)
MasterGridView.DataSource = dr
MasterGridView.DataBind
dr.Close
cmd.Dispose
cn.Dispose
cn1.Dispose
cn = cn1 = Nothing
End If
End Sub
Protected Sub MasterGridView_RowDataBound( ByVal sender As Object , ByVal e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
Dim oGridView As GridView = CType (e.Row.FindControl( " DetailGridView " ), GridView)
If Not (oGridView Is Nothing ) Then
Dim cmd As OleDbCommand = New OleDbCommand( " select top 10 * from Document Where pid = " + MasterGridView.DataKeys(e.Row.RowIndex).Value, cn1)
Dim dr1 As OleDbDataReader = cmd.ExecuteReader
oGridView.DataSource = dr1
oGridView.DataBind
dr1.Close
cmd.Dispose
End If
End If
End Sub
Private cn1 As OleDbConnection
Protected Sub Page_Load( ByVal sender As Object , ByVal e As EventArgs)
If Not Page.IsPostBack Then
Dim cn As OleDbConnection = New OleDbConnection(ConnectionString)
cn.Open
cn1 = New OleDbConnection(ConnectionString)
cn1.Open
Dim cmd As OleDbCommand = New OleDbCommand( " select * from [Subject] " , cn)
Dim dr As OleDbDataReader = cmd.ExecuteReader(CommandBehavior.CloseConnection)
MasterGridView.DataSource = dr
MasterGridView.DataBind
dr.Close
cmd.Dispose
cn.Dispose
cn1.Dispose
cn = cn1 = Nothing
End If
End Sub
Protected Sub MasterGridView_RowDataBound( ByVal sender As Object , ByVal e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
Dim oGridView As GridView = CType (e.Row.FindControl( " DetailGridView " ), GridView)
If Not (oGridView Is Nothing ) Then
Dim cmd As OleDbCommand = New OleDbCommand( " select top 10 * from Document Where pid = " + MasterGridView.DataKeys(e.Row.RowIndex).Value, cn1)
Dim dr1 As OleDbDataReader = cmd.ExecuteReader
oGridView.DataSource = dr1
oGridView.DataBind
dr1.Close
cmd.Dispose
End If
End If
End Sub
本文介绍如何使用ASP.NET中的GridView控件实现主细表显示,并通过JavaScript控制明细表的展开与折叠功能。示例代码包括C#及VB.NET版本。

被折叠的 条评论
为什么被折叠?



