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

所属分类: 网络编程 / ASP.NET 阅读数: 2023
收藏 0 赞 0 分享
在实际项目开发中,我找到了一种利用GridView实现分级效果的方法,最终效果图如下:


以下是实现代码:
Aspx页面
复制代码 代码如下:

<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
更多精彩内容其他人还在看

.NET Core源码解析配置文件及依赖注入

这篇文章我们设计了一些复杂的概念,因为要对ASP.NET Core的启动及运行原理、配置文件的加载过程进行分析,依赖注入,控制反转等概念的讲解等
收藏 0 赞 0 分享

.NET Corek中Git的常用命令及实战演练

这篇文章将通过故事的形式从Git的历史谈起,并讲述Git的强大之处。然后通过实战演练教你如何在Github以及码云上托管我们的代码并进行代码的版本控制
收藏 0 赞 0 分享

Asp.Net Core WebAPI使用Swagger时API隐藏和分组详解

这篇文章主要给大家介绍了关于Asp.Net Core WebAPI使用Swagger时API隐藏和分组的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Asp.Net Core具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

如何利用FluentMigrator实现数据库迁移

这篇文章主要给大家介绍了关于如何利用FluentMigrator实现数据库迁移的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

ASP.NET Core利用Jaeger实现分布式追踪详解

这篇文章主要给大家介绍了关于ASP.NET Core利用Jaeger实现分布式追踪的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用ASP.NET Core具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

浅谈从ASP.NET Core2.2到3.0你可能会遇到这些问题

这篇文章主要介绍了ASP.NET Core2.2到3.0可能会遇到的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

详解.net core webapi 前后端开发分离后的配置和部署

这篇文章主要介绍了.net core webapi 前后端开发分离后的配置和部署,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

详解ASP.Net Core 中如何借助CSRedis实现一个安全高效的分布式锁

这篇文章主要介绍了ASP.Net Core 中如何借助CSRedis实现一个安全高效的分布式锁,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

.net 4.5部署到docker容器的完整步骤

这篇文章主要给大家介绍了关于.net 4.5部署到docker容器的完整步骤,文中通过示例代码介绍的非常详细,对大家学习或者使用.net4.5具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

.net core并发下线程安全问题详解

这篇文章主要给大家介绍了关于.net core并发下线程安全问题的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用.net core具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享
查看更多