利用GridView嵌套显示主细表并添加打开、关闭功能
2009-08-25 14:51
477 查看
本文例子使用嵌套的 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>
CS:
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
例子中的数据库，请参照《 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>
CS:
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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 利用GridView显示主细表并添加删除、打开、关闭功能（续）
- 利用GridView显示主细表并添加打开、关闭功能
- 利用GridView显示主细表并添加打开、关闭功能
- 利用GridView显示主细表并添加打开、关闭功能
- 利用GridView显示主细表并添加删除、打开、关闭功能(转自孟子E章)
- 利用GridView显示主细表并添加删除、打开、关闭功能（续）
- 利用GridView显示主细表并添加打开、关闭功能
- [导入]利用GridView显示主细表并添加打开、关闭功能
- 利用GridView显示主细表并添加删除、打开、关闭功能（续）
- 利用GridView显示主细表并添加删除、打开、关闭功能（续）
- [导入]利用GridView显示主细表并添加打开、关闭功能
- 利用GridView显示主细表并添加删除、打开、关闭功能
- 利用GridView显示主细表并添加删除、打开、关闭功能（续）
- 利用GridView显示主细表并添加打开、关闭，删除功能
- [导入]利用GridView显示主细表并添加删除、打开、关闭功能（续）
- 利用GridView显示主细表并添加删除、打开、关闭功能（续）
- 利用GridView显示主细表并添加打开、关闭功能
- 利用GridView显示主细表并添加打开、关闭功能
- 利用GridView显示主细表并添加打开、关闭功能
- 利用GridView显示主细表并添加打开、关闭功能