【 tulaoshi.com - ASP.NET 】
本文例子使用嵌套的 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;