ASP.NET中使用GridView实现分级显示的代码

<asp:GridView ID="GridView1" SkinID="GridView" runat="server" AutoGenerateColumns="false" 
Width="100%" AllowPaging="true" PageSize="10"> 
<Columns> 
<asp:TemplateField HeaderStyle-Width="1%"> 
<ItemTemplate> 
<asp:Image ID="imgFlag" runat="server" ImageUrl="~/images/dn.gif" /> 
</ItemTemplate> 
<ItemStyle HorizontalAlign="Center" /> 
</asp:TemplateField> 
<asp:BoundField DataField="CustomerID" HeaderText="客户编号" HeaderStyle-Width="10%"> 
<ItemStyle HorizontalAlign="Center" /> 
</asp:BoundField> 
<asp:BoundField DataField="CompanyName" HeaderText="公司名称" HeaderStyle-Width="10%"> 
<ItemStyle HorizontalAlign="Center" /> 
</asp:BoundField> 
<asp:BoundField DataField="ContactName" HeaderText="联系人" HeaderStyle-Width="10%"> 
<ItemStyle HorizontalAlign="Center" /> 
</asp:BoundField> 
<asp:BoundField DataField="ContactTitle" HeaderText="联系人职务" HeaderStyle-Width="10%"> 
<ItemStyle HorizontalAlign="Center" /> 
</asp:BoundField> 
<asp:BoundField DataField="Address" HeaderText="联系地址" HeaderStyle-Width="10%"> 
<ItemStyle HorizontalAlign="Center" /> 
</asp:BoundField> 
<asp:BoundField DataField="City" HeaderText="所在城市" HeaderStyle-Width="10%"> 
<ItemStyle HorizontalAlign="Center" /> 
</asp:BoundField> 
<asp:TemplateField HeaderText="联系电话" HeaderStyle-Width="10%"> 
<ItemTemplate> 
<asp:HiddenField ID="HCustomerID" runat="server" Value='<%#Eval("CustomerID")%>' /> 
<%#Eval("Phone")%> 
<tr runat="server" id="TRCustomers" style="display: none"> 
<td> 
</td> 
<td colspan="7"> 
<asp:GridView ID="GridViewOrders" SkinID="GridView" runat="server" Width="100%" AutoGenerateColumns="false" 
OnRowDataBound="doOnRowDataBoundOrders"> 
<Columns> 
<asp:TemplateField HeaderStyle-Width="1%"> 
<ItemTemplate> 
<asp:Image ID="imgFlag1" runat="server" ImageUrl="~/images/dn.gif" /> 
</ItemTemplate> 
<ItemStyle HorizontalAlign="Center" /> 
</asp:TemplateField> 
<asp:BoundField DataField="OrderID" HeaderText="订单编号" HeaderStyle-Width="10%"> 
<ItemStyle HorizontalAlign="Center" /> 
</asp:BoundField> 
<asp:BoundField DataField="OrderDate" HeaderText="下单日期" HeaderStyle-Width="10%" DataFormatString="{0:d}"> 
<ItemStyle HorizontalAlign="Center" /> 
</asp:BoundField> 
<asp:BoundField DataField="RequiredDate" HeaderText="要求日期" HeaderStyle-Width="10%" 
DataFormatString="{0:d}"> 
<ItemStyle HorizontalAlign="Center" /> 
</asp:BoundField> 
<asp:BoundField DataField="ShippedDate" HeaderText="发货日期" HeaderStyle-Width="10%" 
DataFormatString="{0:d}"> 
<ItemStyle HorizontalAlign="Center" /> 
</asp:BoundField> 
<asp:BoundField DataField="Freight" HeaderText="重量" HeaderStyle-Width="10%"> 
<ItemStyle HorizontalAlign="Center" /> 
</asp:BoundField> 
<asp:BoundField DataField="ShipName" HeaderText="发货名称" HeaderStyle-Width="10%"> 
<ItemStyle HorizontalAlign="Center" /> 
</asp:BoundField> 
<asp:TemplateField HeaderText="邮政编码" HeaderStyle-Width="10%"> 
<ItemTemplate> 
<asp:HiddenField ID="HOrderID" runat="server" Value='<%#Eval("OrderID")%>' /> 
<%#Eval("ShipPostalCode")%> 
<tr runat="server" id="TROrders" style="display: none"> 
<td> 
</td> 
<td colspan="7"> 
<asp:GridView ID="GridViewOrderDetails" SkinID="GridView" runat="server" Width="100%" 
AutoGenerateColumns="false"> 
<Columns> 
<asp:BoundField DataField="ProductName" HeaderText="产品名称" HeaderStyle-Width="10%"> 
<ItemStyle HorizontalAlign="Center" /> 
</asp:BoundField> 
<asp:BoundField DataField="Quantity" HeaderText="数量" HeaderStyle-Width="10%" DataFormatString="{0:N}"> 
<ItemStyle HorizontalAlign="Center" /> 
</asp:BoundField> 
<asp:BoundField DataField="UnitPrice" HeaderText="单价" HeaderStyle-Width="10%" DataFormatString="{0:N}"> 
<ItemStyle HorizontalAlign="Center" /> 
</asp:BoundField> 
<asp:BoundField DataField="OPrice" HeaderText="总价" HeaderStyle-Width="10%" DataFormatString="{0:N}"> 
<ItemStyle HorizontalAlign="Center" /> 
</asp:BoundField> 
<asp:BoundField DataField="Discount" HeaderText="折扣" HeaderStyle-Width="10%" DataFormatString="{0:P}"> 
<ItemStyle HorizontalAlign="Center" /> 
</asp:BoundField> 
<asp:BoundField DataField="PPrice" HeaderText="折扣总价" HeaderStyle-Width="10%" DataFormatString="{0:N}"> 
<ItemStyle HorizontalAlign="Center" /> 
</asp:BoundField> 
<asp:BoundField DataField="QuantityPerUnit" HeaderText="包装规格" HeaderStyle-Width="10%"> 
<ItemStyle HorizontalAlign="Center" /> 
</asp:BoundField> 
</Columns> 
</asp:GridView> 
</td> 
</tr> 
</ItemTemplate> 
</asp:TemplateField> 
</Columns> 
</asp:GridView> 
</td> 
</tr> 
</ItemTemplate> 
</asp:TemplateField> 
</Columns> 
</asp:GridView> 
 
后台代码 
 代码如下:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
If Not IsPostBack Then 
BindGridView() 
End If 
End Sub 
'1.首先找出Customers数据 
Public Sub BindGridView() 
Dim strSQL As String = "SELECT * FROM Customers" 
Dim dtTable As DataTable = GetDataTable(strSQL) 
sCount = dtTable.Rows.Count 
Me.GridView1.DataSource = dtTable 
Me.GridView1.DataBind() 
End Sub 
'Customers数据绑定时要做的事情 
Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound 
If e.Row.RowType = DataControlRowType.DataRow Then 
Dim HCustomerID As String = CType(e.Row.FindControl("HCustomerID"), HiddenField).Value 
Dim TRCustomers As HtmlTableRow = CType(e.Row.FindControl("TRCustomers"), HtmlTableRow) 
If HCustomerID.Trim.Length > 0 Then 
'鼠标移过时变换css样式。 
e.Row.Attributes.Add("onmouseover", "currentcolor=this.className;this.className='MouseOver';") 
e.Row.Attributes.Add("onmouseout", "this.className=currentcolor;") 
'找出此Customer的所有Orders 
Dim strSQL As String = "SELECT * FROM Orders WHERE CustomerID='" & HCustomerID & "'" 
Dim dtTable As DataTable = GetDataTable(strSQL) 
Dim imgFlag As Image = CType(e.Row.FindControl("imgFlag"), Image) 
If dtTable.Rows.Count > 0 Then 
Dim GridViewOrders As GridView = CType(e.Row.FindControl("GridViewOrders"), GridView) 
GridViewOrders.DataSource = dtTable 
GridViewOrders.DataBind() 
'设置点击某行时的Javascript 
Dim strScript As New StringBuilder 
strScript.Append("var obj = document.getElementById('" & TRCustomers.ClientID & "');") 
strScript.Append("var objimg = document.getElementById('" & imgFlag.ClientID & "');") 
strScript.Append("if (obj.style.display == 'none') {") 
strScript.Append(" obj.style.display = '';") 
strScript.Append(" objimg.src = 'images/up.gif';") 
strScript.Append("}else{") 
strScript.Append(" obj.style.display = 'none';") 
strScript.Append(" objimg.src = 'images/dn.gif';") 
strScript.Append("}") 
e.Row.Attributes.Add("onclick", strScript.ToString) 
Else 
imgFlag.ImageUrl = "~/images/up.gif" 
End If 
End If 
End If 
End Sub 
Protected Sub doOnRowDataBoundOrders(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) 
If e.Row.RowType = DataControlRowType.DataRow Then 
Dim HOrderID As String = CType(e.Row.FindControl("HOrderID"), HiddenField).Value 
Dim TROrders As HtmlTableRow = CType(e.Row.FindControl("TROrders"), HtmlTableRow) 
If HOrderID.Trim.Length > 0 Then 
'鼠标移过时变换css样式。 
e.Row.Attributes.Add("onmouseover", "currentcolor=this.className;this.className='MouseOver';") 
e.Row.Attributes.Add("onmouseout", "this.className=currentcolor;") 
'找出此Order的所有Order Details 
Dim strSQL As String = "SELECT Products.ProductName, [Order Details].UnitPrice, [Order Details].Quantity, [Order Details].UnitPrice * [Order Details].Quantity AS OPrice, [Order Details].Discount, " & _ 
"([Order Details].UnitPrice * [Order Details].Quantity) * (1.00 - [Order Details].Discount) AS PPrice, Products.QuantityPerUnit " & _ 
"FROM [Order Details] INNER JOIN Products ON [Order Details].ProductID = Products.ProductID " & _ 
"WHERE OrderID='" & HOrderID & "'" 
Dim dtTable As DataTable = GetDataTable(strSQL) 
Dim imgFlag1 As Image = CType(e.Row.FindControl("imgFlag1"), Image) 
If dtTable.Rows.Count > 0 Then 
Dim GridViewOrderDetails As GridView = CType(e.Row.FindControl("GridViewOrderDetails"), GridView) 
GridViewOrderDetails.DataSource = dtTable 
GridViewOrderDetails.DataBind() 
'设置点击某行时的Javascript 
Dim strScript As New StringBuilder 
strScript.Append("var obj = document.getElementById('" & TROrders.ClientID & "');") 
strScript.Append("var objimg = document.getElementById('" & imgFlag1.ClientID & "');") 
strScript.Append("if (obj.style.display == 'none') {") 
strScript.Append(" obj.style.display = '';") 
strScript.Append(" objimg.src = 'images/up.gif';") 
strScript.Append("}else{") 
strScript.Append(" obj.style.display = 'none';") 
strScript.Append(" objimg.src = 'images/dn.gif';") 
strScript.Append("}") 
e.Row.Attributes.Add("onclick", strScript.ToString) 
End If 
End If 
End If 
End Sub