TAG:利用GridView显示主细表并添加打开、关闭功能
本文例子使用嵌套的 GridView 来显示主细表,并使用 JavaScript 来控制明细表的显示与隐藏。值得注意的是:在 GridView 的 RowDataBound 的事件里,不要多次执行数据库的打开,否则,将很快会导致连接数已满的问题。
例子中的数据库,请参照《 ASP.NET 2.0应用开发技术》一书中附带的光盘中的数据库。
查看例子
代码:
Aspx<%@ 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>
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(); } } } }
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