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

在实际项目开发中,我找到了一种利用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

(0)

相关推荐

  • asp.net中使用DatagridView的增删改方法具体实现

    default.aspx 页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="GPS_Web.Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

  • asp.net中GridView和DataGrid相同列合并实现代码

    (一)普通列 复制代码 代码如下: /// <summary> /// Gridview列的合并(普通列,不包含模板列) /// 注意:1.GridView在绑定的时候进行分组和排序,才能让相同的行放在一起 /// 2.方法应用的时机,应该在Gridview的DataBound事件中使用 /// </summary> /// <param name="gv">需要合并的GridView对象</param> /// <param na

  • asp.net中gridview的查询、分页、编辑更新、删除的实例代码

    1.A,运行效果图 1.B,源代码/App_Data/sql-basic.sql 复制代码 代码如下: use mastergoif exists(select * from sysdatabases where name='db1')begin    drop database db1endgocreate database db1gouse db1go-- ================================-- ylb:1,类别表-- =====================

  • asp.net中让Repeater和GridView支持DataPager分页

    改造办法是自己写一个控件,让它继承GridView或Repeater,并实现IPageableItemContainer 接口.下面要发的是国外某高手写的代码,测试有效.具体使用的时候,要建一个类库项目,把代码编译成dll后,就可以添加到VS的工具箱里了! 一.自定义Repeater 复制代码 代码如下: using System.Web.UI; using System.Web.UI.WebControls; namespace WYJ.Web.Controls { /// <summary>

  • ASP.NET中的DataGridView绑定数据和选中行删除功能具体实例

    首现我们拖入一个DataGridView控件到.aspx页面中,然后绑定你需要显示的列,具体代码如下. 复制代码 代码如下: <asp:GridView ID="gvDepartList" runat="server" AutoGenerateColumns="False"          Height="108px" Width="600px"  OnRowDeleting="gvDep

  • Asp.net中的GridView导出遇到的两个问题和解决方法

    对于GridView导出的内容的代码大致如下: Response.Clear(); Response.Buffer = true; Response.Charset = "GB2312"; Response.AppendHeader("Content-Disposition", "attachment;filename=" + fileName + ".xls"); Response.ContentEncoding = Sys

  • asp.net中的GridView分页问题

    本文实例讲述了asp.net中的GridView分页问题.分享给大家供大家参考.具体分析如下: 在ASP.NET中,经常会使用到GridView的分页,一般情况下,若使用Visual Studio自带的数据源控件,不会出现什么问题. 但是如果自己用代码设置GridView的数据源,GridView中第一页显示正常,这时如果点击第二页,则经常会出现如下错误 提示:GridView"GridView_test"激发了未处理的事件"PageIndexChanging".

  • asp.net中GridView控件遍历的小例子

    复制代码 代码如下: int intCount = this.GridView1.Rows.Count; //总行数for (int i = 0; i < intCount; i++){  Label1.Text = ((HyperLink)GridView1.Rows[i].Cells[0].Controls[0]).Text.ToString().Trim(); } for (i = 0; i < GridViewID.Rows.Count; i++){   CheckBox chkVot

  • ASP.NET中为GridView添加删除提示框的方法

    本文实例讲述了ASP.NET中为GridView添加删除提示框的方法.分享给大家供大家参考.具体分析如下: 在GridView中我们可以直接添加一个CommandField删除列来删除某行信息.但为了避免误操作引起的误删除,在删除操作者让操作者再确认下,完后再进行删除. 首先我们给我们的GridView 添加一个模板列,如下: 以下是引用片段: <ASP:TemplateField HeaderText="Delete" ShowHeader="False"&

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

    在实际项目开发中,我找到了一种利用GridView实现分级效果的方法,最终效果图如下: 以下是实现代码: Aspx页面 复制代码 代码如下: <asp:GridView ID="GridView1" SkinID="GridView" runat="server" AutoGenerateColumns="false" Width="100%" AllowPaging="true"

  • Asp.net 中使用GridView控件实现Checkbox单选

    在GridView控件中,第0列有放一个CheckBox控件,现想实现对CheckBox进行单选. 先看看效果: 在ASPX页面,可以这样做: 有一点注意的是需要使用OnRowCreated事件. 在ASPX.cs代码里,实现上面OnRowCreated事件: 上面有个事件委托: Ok,特简单的.全部使用服务端来实现,或许前端js也能实现. 以上所述是小编给大家介绍的Asp.net 中使用GridView控件实现Checkbox单选,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回

  • 灵活使用asp.net中的gridview控件

    gridview是asp.net常用的显示数据控件,对于.net开发人员来说应该是非常的熟悉了.gridview自带有许多功能,包括分页,排序等等,但是作为一个.net开发人员来说熟练掌握利用存储过程分页或者第三方自定义分页十分重要,这不仅是项目的需要,也是我们经验能力的提示,下面我就来讲利用存储过程分页实现绑定gridview 1.执行存储过程 网上有许多sql分页存储过程的例子,但是你会发现其中有许多一部分是不能用的,例如有些使用in或者not in来分页效率非常的低,有些sp可以分页但是扩

  • ASP.NET2.0中用Gridview控件操作数据的代码

    其中,在数据控件方面,增加了不少控件,其中的Gridview控件功能十分强大.在本文中,将探讨Gridview控件中的一些功能特性和用法,如果各位读者对Gridview控件不大了解,可以通过<使用ASP.NET 2.0中的Gridview控件>一文,来对Gridview控件有个初步的认识. 1.使用Gridview插入新记录 在Gridview控件中,可以实现插入新记录的操作(见<使用ASP.NET 2.0中的Gridview控件>)一文,但如果想实现在Gridview中,实现在G

  • asp.net中利用ashx实现图片防盗链代码

    GET /Img.ashx?img=svn_work.gif HTTP/1.1 Accept: */* Referer: http://www.svnhost.cn/ Accept-Language: zh-cn UA-CPU: x86 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2; .NET CLR 1.1.4322; .NET CLR 2.0.50727

  • 在Asp程序中取得表单所有内容的代码

    在Asp中如何得到所有表单的名称跟对应的值.其实,这个问题很简单,但是可能还是有很多人不知道该怎么做,所以特地写下来,仅供参考.在Asp程序中,用来获得客户端数据的对象是 Request,这个对象给我们提供了很多的方法以及属性.比如,有这样一个Form, <FORM METHOD=POST name=cqq ACTION=""> <INPUT TYPE="text" NAME="username"> <INPUT T

  • ASP编程中连接数据库和数据库操作的常用代码

    ASP编程常用的代码  1. ASP与Access数据库连接:   复制代码 代码如下: <%   dim conn,mdbfile   mdbfile=server.mappath("数据库名称.mdb")   set conn=server.createobject("adodb.connection")   conn.open "driver={microsoft access driver (*.mdb)};uid=admin;pwd=数据库

随机推荐