脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → ASP.NET → 实用技巧 → GridView 分级显示

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

 更新时间：2010年06月09日 11:00:48   作者：  
在实际项目开发中，往往需要用到在页面上对列表的项目实现分级显示，在 ASP.NET中没有现成的控件。
在实际项目开发中，我找到了一种利用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使用 CancellationToken 取消API请求的操作方法

    .NET Core使用 CancellationToken 取消API请求的操作方法

    用户取消请求时，你可以使用HttpContext.RequestAborted访问，您也可以使用依赖注入将其自动注入到您的操作中，这篇文章主要介绍了.NET Core使用 CancellationToken 取消API请求,需要的朋友可以参考下
    2024-03-03
  • ASP.NET Internet安全Forms身份验证方法

    ASP.NET Internet安全Forms身份验证方法

    安全性是 ASP.NET Web 应用程序中一个非常重要的方面,它涉及内容非常广泛,不能在一篇文章内说明所有的安全规范,本文讲述如何利用IIS以及Forms 身份验证构建安全的 ASP.NET 应用程序,它是目前被使用最多最广的验证／授权方式.
    2009-12-12
  • ASP.net全局程序文件Global.asax用法分析

    ASP.net全局程序文件Global.asax用法分析

    这篇文章主要介绍了ASP.net全局程序文件Global.asax用法,较为详细分析了Global.asax文件中几个常见选项的含义及用法,需要的朋友可以参考下
    2014-10-10
  • ASP.NET中日历控件和JS版日历控件的使用方法(第5节)

    ASP.NET中日历控件和JS版日历控件的使用方法(第5节)

    这篇文章主要为大家详细介绍了ASP.NET中日历控件和JS版日历控件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-08-08
  • .NET之生成数据库全流程实现

    .NET之生成数据库全流程实现

    这篇文章主要介绍了.NET之生成数据库全流程实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • .Net判断一个对象是否为数值类型实例

    .Net判断一个对象是否为数值类型实例

    这篇文章主要介绍了.Net判断一个对象是否为数值类型的方法,实例讲述了一个国外的示例并对其进行了改进,非常实用,需要的朋友可以参考下
    2014-10-10
  • .NET 单点登录解决方案

    .NET 单点登录解决方案

    这里指的单点，泛指在WEB服务端，一个账户同一时刻只能存在一个票据！怎么使同一个用户，在同一时间内只允许登录一次，下面将为大家详细介绍下
    2013-10-10
  • asp.net GridView导出到Excel代码

    asp.net GridView导出到Excel代码

    asp.net GridView导出到Excel代码,需要的朋友可以参考下。
    2009-07-07
  • ASP.Net Core对USB摄像头进行截图

    ASP.Net Core对USB摄像头进行截图

    这篇文章介绍了ASP.Net Core对USB摄像头进行截图的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-10-10
  • 基于MVC4+EasyUI的Web开发框架之附件上传组件uploadify的使用

    基于MVC4+EasyUI的Web开发框架之附件上传组件uploadify的使用

    这篇文章主要介绍了基于MVC4+EasyUI的Web开发框架之附件上传组件uploadify的使用,需要的朋友可以参考下
    2017-08-08

最新评论