本文例子使用嵌套的 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" >
// <![CDATA[
function ShowHidden(sid,ev)
{
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 >
<! 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" >
// <![CDATA[
function ShowHidden(sid,ev)
{
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();
}
}
}
}
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
更多内容请到www.05yl.cn