[asp.net控件]GridView基礎用法之分級嵌套

asp.net教程

在實際項目開發中，往往需要用到在頁面上對列表的項目實現分級顯示，在 ASP.NET中沒有現成的控件。在實際項目開發中，我找到了一種利用GridView實現分級效果的方法，最終效果圖如下：

以下是實現代碼：
Aspx頁面

<asp:GridView ID="GridView1" SkinID="GridView" runat="server" AutoGenerateColumns="false"
;100%" AllowPaging="true" PageSize="10">
<Columns>
<asp:TemplateField HeaderStyle-;1%">
<ItemTemplate>
<asp:Image ID="imgFlag" runat="server" ImageUrl="~/images/dn.gif" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:BoundField DataField="CustomerID" HeaderText="客戶編號" HeaderStyle-;10%">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="CompanyName" HeaderText="公司名稱" HeaderStyle-;10%">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="ContactName" HeaderText="聯繫人" HeaderStyle-;10%">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="ContactTitle" HeaderText="聯繫人職務" HeaderStyle-;10%">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="Address" HeaderText="聯繫地址" HeaderStyle-;10%">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="City" HeaderText="所在城市" HeaderStyle-;10%">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:TemplateField HeaderText="聯繫電話" HeaderStyle-;10%">
<ItemTemplate>
<asp:HiddenField ID="HCustomerID" runat="server" Value='&lt;%#Eval("CustomerID")%>' /&gt;
<%#Eval("Phone")%>
<tr runat="server" id="TRCustomers" style="display: none">
<td>
</td>
<td colspan="7">
<asp:GridView ID="GridViewOrders" SkinID="GridView" runat="server" ;100%" AutoGenerateColumns="false"
OnRowDataBound="doOnRowDataBoundOrders">
<Columns>
<asp:TemplateField HeaderStyle-;1%">
<ItemTemplate>
<asp:Image ID="imgFlag1" runat="server" ImageUrl="~/images/dn.gif" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:BoundField DataField="OrderID" HeaderText="訂單編號" HeaderStyle-;10%">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="OrderDate" HeaderText="下單日期" HeaderStyle-;10%" DataFormatString="{0:d}">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="RequiredDate" HeaderText="要求日期" HeaderStyle-;10%"
DataFormatString="{0:d}">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="ShippedDate" HeaderText="發貨日期" HeaderStyle-;10%"
DataFormatString="{0:d}">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="Freight" HeaderText="重量" HeaderStyle-;10%">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="ShipName" HeaderText="發貨名稱" HeaderStyle-;10%">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:TemplateField HeaderText="郵政編碼" HeaderStyle-;10%">
<ItemTemplate>
<asp:HiddenField ID="HOrderID" runat="server" Value='&lt;%#Eval("OrderID")%>' /&gt;
<%#Eval("ShipPostalCode")%>
<tr runat="server" id="TROrders" style="display: none">
<td>
</td>
<td colspan="7">
<asp:GridView ID="GridViewOrderDetails" SkinID="GridView" runat="server" ;100%"
AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="ProductName" HeaderText="產品名稱" HeaderStyle-;10%">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="Quantity" HeaderText="數量" HeaderStyle-;10%" DataFormatString="{0:N}">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="UnitPrice" HeaderText="單價" HeaderStyle-;10%" DataFormatString="{0:N}">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="OPrice" HeaderText="總價" HeaderStyle-;10%" DataFormatString="{0:N}">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="Discount" HeaderText="折扣" HeaderStyle-;10%" DataFormatString="{0:P}">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="PPrice" HeaderText="折扣總價" HeaderStyle-;10%" DataFormatString="{0:N}">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="QuantityPerUnit" HeaderText="包裝規格" HeaderStyle-;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>

asp.net源碼

後臺代碼 （VB.NET）

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 &gt; 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 &gt; 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 &gt; 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 &gt; 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