GridView常常使用到Master -Detail來顯示畫面，
如畫面可以開收合來顯示子資料
以JavaScript和DIV來設計
GridView常常使用到Master -Detail來顯示畫面，
如畫面可以開收合來顯示子資料
以JavaScript和DIV來設計
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="GV.aspx.vb" Inherits="GV" %>
<!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>未命名頁面</title>
</head>
<body>
<form id="form1" runat="server">
<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";
}
//]]>
</script>
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="OrderID"
DataSourceID="SqlDataSource1" EmptyDataText="沒有資料錄可顯示。" ShowHeader="False" CellPadding="4"
ForeColor="#333333" GridLines="None">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<div style="cursor: pointer;" onclick="ShowHidden('<%# Eval("OrderID") %>',event)">
<span style="width: 300px; float: left;">
<%#Eval("EmployeeID")%>
</span><span style="width: 300px; float: right;">
<%#Eval("ShippedDate")%>
</span>
</div>
<div style="background-color: #FFF; padding-left: 50px; clear: both; display: none"
id='div<%# Eval("OrderID") %>'>
<%# Eval("ShipName") %>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#E3EAEB" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#7C6F57" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString1 %>"
ProviderName="<%$ ConnectionStrings:NorthwindConnectionString1.ProviderName %>"
SelectCommand="SELECT [OrderID], [CustomerID], [EmployeeID], [OrderDate], [RequiredDate], [ShippedDate], [ShipVia], [Freight], [ShipName], [ShipAddress], [ShipCity], [ShipRegion], [ShipPostalCode], [ShipCountry] FROM [Orders]">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
<!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>未命名頁面</title>
</head>
<body>
<form id="form1" runat="server">
<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";
}
//]]>
</script>
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="OrderID"
DataSourceID="SqlDataSource1" EmptyDataText="沒有資料錄可顯示。" ShowHeader="False" CellPadding="4"
ForeColor="#333333" GridLines="None">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<div style="cursor: pointer;" onclick="ShowHidden('<%# Eval("OrderID") %>',event)">
<span style="width: 300px; float: left;">
<%#Eval("EmployeeID")%>
</span><span style="width: 300px; float: right;">
<%#Eval("ShippedDate")%>
</span>
</div>
<div style="background-color: #FFF; padding-left: 50px; clear: both; display: none"
id='div<%# Eval("OrderID") %>'>
<%# Eval("ShipName") %>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#E3EAEB" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#7C6F57" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString1 %>"
ProviderName="<%$ ConnectionStrings:NorthwindConnectionString1.ProviderName %>"
SelectCommand="SELECT [OrderID], [CustomerID], [EmployeeID], [OrderDate], [RequiredDate], [ShippedDate], [ShipVia], [Freight], [ShipName], [ShipAddress], [ShipCity], [ShipRegion], [ShipPostalCode], [ShipCountry] FROM [Orders]">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>