利用GridView显示主细表并添加打开、关闭功能

本文链接：https://blog.youkuaiyun.com/hejishan/article/details/2167466

本文介绍如何使用嵌套的GridView来展示主细表数据，并通过JavaScript实现明细表的动态显示与隐藏功能。提供了完整的ASP.NET代码示例，包括C#与VB.NET版本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文例子使用嵌套的 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">
  //
  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();
     }
    }
  }
}

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