您的位置：首页 > Web前端 > JavaScript

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

2008-04-20 06:32 696 查看

本文例子使用嵌套的 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">

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

td,div,a ...{font-size:12px}

</style>

//<![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>

<asp:GridView ID="MasterGridView" runat="server" AutoGenerateColumns="false" Width="760px"

BorderWidth="1" OnRowDataBound="MasterGridView_RowDataBound" DataKeyNames="id"

ShowHeader="false">

<asp:TemplateField>

<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>

<asp:GridView ID="DetailGridView" runat="server" AutoGenerateColumns="false" ShowHeader="true"

Width="100%" HorizontalAlign="left">

<asp:TemplateField HeaderText="文章名称">

<%#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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 数据库 javascript asp.net float div null

相关文章推荐

新的分享

章节导航