ASP.NET:DataGrid控件的分页功能

80酷酷网    80kuku.com

  asp.net|datagrid|datagrid控件|分页

  DataGrid 控件是一个基于模板样式的、多功能的、多列的数据绑定控件。在三个数据绑定控件中,DataGrid是功能最为强大的,其次时DataList控件,然后是轻量级的数据绑定控件Repeater。要自定义 DataGrid 中各列的布局,您可以将列类型设置为“模板”,然后修改列的模板。DataGrid 控件也可以无需模板,只需按照默认的设置即可进行呈现,这使得该控件成了用于报告方案的理想控件。 

    我们可以把DataGrid理解成是HTML里面的一个Table,Table是由行(TR)和列(TD)组成,而DataGrid的行其实是DataGridItem对象,而列就是DataGridColumn 对象。在DataGrid对象的属性集了我们可以看到Items和Columns 属性,它们分别就是DataGrid的行集和列集,也就是DataGridItem对象集合及DataGridColumn 对象集合。通过查看ASP.NET生成的HTML页的源代码,我们也可以发现,DataGrid的表现形式也就是Table。我们也可以把DataGrid理解成数据库里面的表,也是由行和列组成。就像我们建数据库表一样,我们首先要构造表的列,在创建一个DataGrid对象时,我们也是要先创建DataGrid的列。DataGrid的列有以下几种类型:BoundColumn(绑定列)、ButtonColumn(按钮列)、EditCommandColumn(编辑命令列)、HyperLinkColumn(超链接列)、TemplateColumn(模板列)。在使用hoDataGrid控件时候根据不同的类型,DataGrid控件就可以进行选择、编辑、删除、分页和排序。在本节里,我们将根据DataGrid控件常用的三大功能来详细介绍。

    9.2  DataGrid控件的详解

    9.2.1 DataGrid控件的分页功能

    在以往的ASP编程中,我们要实现页面的分页,就得花费很多的功夫编写代码来实现,但是在ASP.NET里,我们只需要对DataGrid控件的属性进行适当的设置,在指指点点中,就能实现强大的分页功能。

    像其他控件一样,在使用DataGrid控件之前,也必须引用声明,由于DataGrid控件的属性和选项属性比较多,下面列出几个常用的属性,格式如下:

<asp:DataGrid
id="DataGrid1"
runat="server"
AllowPaging="True"
AllowSorting="True">    
<SelectedItemStyle BackColor="#FFC080"></SelectedItemStyle> 
<EditItemStyle BorderColor="#E0E0E0" BackColor="Gray"> </EditItemStyle>   
<ItemStyle BorderColor="#C0C0FF" BackColor="#E0E0E0"> </ItemStyle>   
<HeaderStyle BorderColor="#C0C0FF" BackColor="#E0E0E0"> </HeaderStyle>
<FooterStyle BorderColor="#E0E0E0" BackColor="Silver"> </FooterStyle>
<PagerStyle NextPageText=">上一页" PrevPageText="<下一页" HorizontalAlign="Center" ForeColor="White"
BackColor="#336666" Mode="NumericPages"></PagerStyle>
</asp:DataGrid>

    上面这些属性是DtataGrid控件几个常用的模板设置,其中几个我们比较生疏的是< HeaderStyle >、<FooterStyle>、<ItemStyle>和<AllowPaging>属性。

    HeaderStyle: 是用来这是表格页眉的样式 ,包括背景色,字体,表格宽度等等;
    FooterStyle:是用来设置表格底脚样式,包括背景色,字体,表格宽度等等;
    ItemStyle :是用来设置表格正文的样式,包括背景色,字体,表格宽度等等;
    EditItemStyle:用来设置编辑选项的样式;
    AllowPaging:表示是否允许分页,如果为False,则DataGrid控件将数据一页显示。
    AllowSorting:表示是否允许对字段进行排序。
    PagerStyle:用来设置分页样式。可以为“1 2 3”数字连接,也可以为“ 上一页 下一页”样式的连接。

    对于DataGrid控件的样式,Visual Studio.NET 2003提供了几种模板样式供用户套用,也可以利用属性生成器自行生成样式。我们可以通过DataGrid控件的属性面板里找到,如图9.4所示。


图9.4  DataGrid控件的属性面板

    我们先通过一个实例来简单的了解DataGrid的分页功能。

    在DataCon Web项目里新建一个Web 窗体,命名为DataGrid_Sample1.aspx,并为DataGrid_Sample1.aspx添加一个DataGrid1控件,如图9.5所示。


图9.5 为DataGrid_Sample1.aspx添加控件

    DataGrid_Sample1.aspx页面的主要HTML代码如下:

<form id="Form1" method="post" runat="server">
<asp:DataGrid
    id="DataGrid1"
    runat="server"
  AllowPaging="True"
   PageSize="5">
  <ItemStyle Font-Size="X-Small" BorderColor="#C0C0FF">
</ItemStyle>
<HeaderStyle Font-Size="X-Small"
BorderColor="#C0C0FF" BackColor="#99CCCC"></HeaderStyle>
<PagerStyle NextPageText="[下一页]" Font-Size="X-Small"
 PrevPageText=" [上一页]" BackColor="#66CCCC"></PagerStyle>
</asp:DataGrid>
</form>

    DataGrid1控件的属性在上面的HTML代码中已经设置好了,那么,我们下面关心的就是数据绑定部分了。当然,任何数据绑定是少不了与数据库的连接工作。

DataGrid_Sample1.aspx的逻辑代码页面(DataGrid_Sample1.aspx.vb)中的代码如下:
'----code begin----
'引入命名空间
Imports System
Imports System.Data
Imports System.Web.UI
Public Class DataGrid_Sample1
    Inherits System.Web.UI.Page
#Region " Web 窗体设计器生成的代码 "
    '此处省略了窗体设计器生成的代码
  #End Region
 Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        '在此处放置初始化页的用户代码
        If Not IsPostBack Then
            '判断是否是第一次浏览该页面
            '调用数据绑定过程
            getdata()
        End If
End Sub
    '读取数据信息
    Sub getdata()
        Dim connstr As String  '声明数据库连接字符
        Dim mycon As OleDb.OleDbConnection
        '因为使用Aeecss数据库,所以声明OleDConnention对象
        Dim mycmd As OleDb.OleDbDataAdapter
        '声明DataAdapter对象
        Dim mysql As String
        '声明Command命令的 SQL字符串
        Try
            connstr = "provider=microsoft.jet.oledb.4.0;data source=" + Server.MapPath(".") + "\StudentInfor.mdb"
            '为连接字符串赋值
            mycon = New OleDb.OleDbConnection(connstr)
            '实例化Connection对象
            mysql = "Select id,name,sex,class,tel ,email from student"
            '设置SQL语句,即查询数据库中所有内容
            mycmd = New OleDb.OleDbDataAdapter(mysql, mycon)
            Dim dt As Data.DataSet = New Data.DataSet
            '声明DataSet对象,并实例话
            mycmd.Fill(dt)
            '填充数据,即在内存中生成DataSet模型数据库
            DataGrid1.DataSource = dt.Tables(0)
            '为DataGrid1控件指定数据源
            DataGrid1.DataBind()
            '执行绑定
        Catch ex As Exception
            Response.Write("程序出错,信息描述如下:
" & ex.Message)
        Finally
            mycon.Close()
        End Try
End Sub
    'DataGrid1控件的翻页事件
 Private Sub DataGrid1_PageIndexChanged(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridPageChangedEventArgs) Handles DataGrid1.PageIndexChanged
        DataGrid1.CurrentPageIndex = e.NewPageIndex
        getdata()
End Sub
End Class
'--code end -----

    在DataGrid1控件的翻页事件过程中, “DataGrid1.CurrentPageIndex = e.NewPageIndex”语句更改了DataGrid1控件当前页码,然后调用getdata过程来获取数据。在这条语句里CurrentPageIndex表示当前页面索引,NewPageIndex表示请求的新的页码索引。这里我们需要注意的时,DataGrid控件的PageIndex属性值是从0开始的,也就是说PageIndex的最小值是0,最大值是DagaGrid.PageCount-1。
保存编译后,预览结果如图9.6所示。


图9.6  DataGrid_Sample1.aspx运行结果

上面我们已经讲过,翻页链接可以使用数字,我们再通过一个实例来验证一下。
在DataCon Web项目里新建一个 Web Form,命名为DataGrid_Sample2.aspx,添加一个DataGrid2控件,属性设置如下:
 <asp:DataGrid
    id="DataGrid1"
    runat="server"
    PageSize="6"
AllowPaging="True" 
BorderColor="#CCCCCC" 
Border BorderWidth="1px"
  BackColor="White" CellPadding="3">
  <SelectedItemStyle Font-Bold="True" ForeColor="White" BackColor="#669999"></SelectedItemStyle>
  <ItemStyle Font-Size="X-Small" ForeColor="#000066"></ItemStyle>
  <HeaderStyle Font-Size="X-Small" Font-Bold="True" ForeColor="White" BackColor="#006699"></HeaderStyle>
  <FooterStyle ForeColor="#000066" BackColor="White"></FooterStyle>
  <PagerStyle Font-Size="X-Small" HorizontalAlign="Left" ForeColor="#000066" BackColor="White"
  PageButtonCount="6" Mode="NumericPages"></PagerStyle>
 </asp:DataGrid>
 其中下面这个属性里
<PagerStyle Font-Size="X-Small" HorizontalAlign="Left" ForeColor="#000066" BackColor="White"
  PageButtonCount="6" Mode="NumericPages"></PagerStyle>
Mode="NumericPages"表示分页连接使用数字,PageButtonCount="6"表示连接数有6个。
DataGrid_Sample2.aspx.vb中的代码内容如下:
'----code begin----
'引入命名空间
Imports System
Imports System.Data
Imports System.Web.UI
Public Class DataGrid_Sample2
    Inherits System.Web.UI.Page
#Region " Web 窗体设计器生成的代码 "
    '此处省略了窗体设计器生成的代码,以节约篇幅
#End Region
 Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        '在此处放置初始化页的用户代码
        If Not IsPostBack Then
            '判断是否是第一次浏览该页面
            '调用数据绑定过程
            getdata()
        End If
End Sub
    '分页过程
    Sub getdata()
        Dim connstr As String  '声明数据库连接字符
        Dim mycon As OleDb.OleDbConnection
        '因为使用Aeecss数据库,所以声明OleDConnention对象
        Dim mycmd As OleDb.OleDbDataAdapter
        '声明DataAdapter对象
        Dim mysql As String
        '声明Command命令的 SQL字符串
        Try
            connstr = "provider=microsoft.jet.oledb.4.0;data source=" + Server.MapPath(".") + "\StudentInfor.mdb"
            '为连接字符串赋值
            mycon = New OleDb.OleDbConnection(connstr)
            '实例化Connection对象
            mysql = "Select id,name,sex,class,tel ,email from student"
            '设置SQL语句,即查询数据库中所有内容
            mycmd = New OleDb.OleDbDataAdapter(mysql, mycon)
            Dim dt As Data.DataSet = New Data.DataSet
            '声明DataSet对象,并实例话
            mycmd.Fill(dt)
            '填充数据,即在内存中生成DataSet模型数据库
            DataGrid1.DataSource = dt.Tables(0)
            '为DataGrid1控件指定数据源
            DataGrid1.DataBind()
            '执行绑定
        Catch ex As Exception
            Response.Write("程序出错,信息描述如下:
" & ex.Message)
        Finally
            mycon.Close()
        End Try
End Sub
 Private Sub DataGrid1_PageIndexChanged(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridPageChangedEventArgs) Handles DataGrid1.PageIndexChanged
        DataGrid1.CurrentPageIndex = e.NewPageIndex
        getdata()
End Sub
End Class
' ---code end-----------
    细心的读者发现,DataGrid_Sample1.aspx.vb和DataGrid_Sample2.aspx.vb中有关DataGrid控件的主要事件过程代码一样的。不错,对于逻辑代码部分来讲,两者确实没有改变任何代码,我们仅仅改变了一下DataGrid控件的属性设置,但是却得到了不同风格的效果。所以,利用DataGrid控件的丰富的模版,可以在不改变逻辑代码的情况下呈现不懂的风格样式。
保存编译后,DataGrid_Sample2.aspx.vb预览结果如图9.7所示。


图9.7  DataGrid_Sample2.aspx运行结果

    我们来分析DataGrid控件的分页功能在以上两个实例中应用。通过分析代码我们知道:当客户端请求翻页时候,ASP.NET将执行由.NET框架委托的同名事件――PageIndexChanged事件,通过这个事件过程达到分页目的。分页机制主要体现在上段的DataGrid1.CurrentPageIndex = e.NewPageIndex语句中。在利用OleDbDataAdapter 对象读取数据后,往DataSet对象中填充数据的就是CurrentPageIndex和PageSize两个属性。OleDbDataAdapter从数据库中按照一定的记录排序方式读出数据后,把从第(CurrentPageIndex*PageSize)条记录开始到第(CurrentPageIndex*PageSize+PageSize)条记录填充到DataSet里,组成一个满页的记录,然后在绑定到DataGrid,然后通过DataGrid控件显示出来,就是请求的页面。本质上就是利用DataAdapter对象Fill方法的几个重载。但是这个过程对于使用这种分页方式的用户来说是透明的,因此我们无需编写任何代码,一切由.NET框架运行库完成。这样的好处是并不需要多少编程技巧,只需指指点点,分页效果就实现了。不好的地方就是缺少灵活性。当我们需要一个多样化,个性化的分页效果的时候,我们就要利用简单编程的方式来实现。

    下面这个实例中,我们将可以根据DataGrid分页机制,通过编程做一个十分有个性、功能十分完善的分页效果。

    在DataCon Web项目里新建一个Web 窗体,命名为DataGrid_Sample3.aspx,并添加一个DataGrid控件,四个LinkButton控件,一个DropDownList控件,一个Label1控件,一个TextBox控件,一个Button控件,一个正规则表达式验证控件。
DataGrid_Sample3.aspx的主要HTML代码如下:
<form id="Form1" method="post" runat="server">
 <FONT face="宋体">
 <asp:DataGrid
       id="DataGrid1"
        runat="server" Width="368px" Height="144px" AllowPaging="True" AllowCustomPaging="True"
  PageSize="999">
  <ItemStyle Font-Size="X-Small"></ItemStyle>
  <HeaderStyle BackColor="SkyBlue"></HeaderStyle>
 <PagerStyle Visible="False" PageButtonCount="5" Mode="NumericPages"></PagerStyle>
 </asp:DataGrid>

 <asp:LinkButton   
id="LinkButton1" runat="server"
 Font-Size="X-Small">第一页</asp:LinkButton> 
    <asp:LinkButton
id="LinkButton2" runat="server"
 Font-Size="X-Small">上一页</asp:LinkButton>
 <asp:LinkButton
id="LinkButton3" runat="server"
Font-Size="X-Small">下一页</asp:LinkButton>
 <asp:LinkButton
id="LinkButton4" runat="server"
Font-Size="X-Small">最后页</asp:LinkButton>
 <asp:Label
id="Label1" runat="server" Width="168px"
Font-Size="X-Small">Label</asp:Label>
 

  每页记录条数
 <asp:DropDownList
 id="DropDownList1" runat="server"
Height="32px" Width="48px" AutoPostBack="True">
  <asp:ListItem Value="3">3</asp:ListItem>
  <asp:ListItem Value="5">5</asp:ListItem>
  <asp:ListItem Value="7" Selected="True">7</asp:ListItem>
  <asp:ListItem Value="9">9</asp:ListItem>
  <asp:ListItem Value="12">12</asp:ListItem>
  <asp:ListItem Value="15">15</asp:ListItem>
 </asp:DropDownList>
    跳转至
 <asp:TextBox
id="TextBox1" runat="server" Width="48px"></asp:TextBox>
 <asp:Button id="Button1" runat="server"
Width="40px" Text="->Go"></asp:Button>
 <asp:RegularExpressionValidator
id="RegularExpressionValidator1" runat="server"
Font-Size="XX-Small" ErrorMessage="请输入正确的页码"
     ValidationExpression="[1-9]{1}\d{0,}"
ControlToValidate="TextBox1" >
</asp:RegularExpressionValidator>
</FONT>
</form>
DataGrid_Sample3.aspx.vb的代码如下:
'----code begin----
'引入名称空间
Imports System
Imports System.Data
Imports System.Web.UI
Public Class DataGrid_Sample3_aspx
    Inherits System.Web.UI.Page
#Region " Web 窗体设计器生成的代码 "
    '此处省略了窗体设计器生成的代码,以节约篇幅
#End Region
 Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        '在此处放置初始化页的用户代码
        If Not IsPostBack Then
            viewstate("startpage") = 0
            '利用viewstate("startpage")来保存DataGrid1当前页码索引
            '初始化为0,即第一页
            viewstate("PageSize") = 7
            'viewstate("PageSize")来保存PageSize,初始化为7
        End If
        getdata() '条用分页过程
End Sub
    '编写读取数据通用过程,利用该过程读出数据,根据指定数据进行分页,
    '并绑定到DataGrid控件上
    Sub getdata()
        Dim connstr As String  '声明数据库连接字符
        Dim mycon As OleDb.OleDbConnection
        '因为使用Aeecss数据库,所以声明OleDConnention对象
        Dim mycmd As OleDb.OleDbDataAdapter
        '声明DataAdapter对象
        Dim mysql As String
        '声明Command命令的 SQL字符串
        Try
            connstr = "provider=microsoft.jet.oledb.4.0;data source=" + Server.MapPath(".") + "\StudentInfor.mdb"
            '为连接字符串赋值
            mycon = New OleDb.OleDbConnection(connstr)
            '实例化Connection对象
            mysql = "Select id,name,sex,class,tel ,email from student"
            '设置SQL语句,即查询数据库中所有内容
            mycmd = New OleDb.OleDbDataAdapter(mysql, mycon)
            Dim dt As Data.DataSet = New Data.DataSet
            '声明DataSet对象,并实例话
            mycmd.Fill(dt, viewstate("startpage") * viewstate("PageSize"), viewstate("PageSize"), "infor")
            '填充数据,即在内存中生成DataSet模型数据库
            '利用DataAdapter.Fill的重载功能, viewstate("startpage") * viewstate("PageSize")乘机结果是第几条记录
            DataGrid1.DataSource = dt.Tables("infor")
            '为DataGrid1控件指定数据源
            DataGrid1.DataBind()
            '执行绑定
        Catch ex As Exception
            Response.Write("程序出错,信息描述如下:
" & ex.Message)
        Finally
            mycon.Close()
        End Try
        getpages()
End Sub
    '获取记录分页信息
    Sub getpages()
        Dim mycon As OleDb.OleDbConnection = New OleDb.OleDbConnection(" provider=microsoft.jet.oledb.4.0;data source=" & Server.MapPath(".") & "\StudentInfor.mdb")
        mycon.Open()
        Try
            Dim mycmd As OleDb.OleDbCommand = New OleDb.OleDbCommand("select count(*) from student", mycon)
            viewstate("pc") = mycmd.ExecuteScalar \ viewstate("PageSize") + 1
            Label1.Text = "当前为第[" & (viewstate("startpage") + 1).ToString & "]页/共[" & (viewstate("pc")) & "]页"
        Catch ex As Exception
            Response.Write("程序出错,信息描述如下:
" & ex.Message)
        Finally
            mycon.Close()
        End Try
End Sub
    '跳转至第一页
 Private Sub LinkButton1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles LinkButton1.Click
        If viewstate("startpage") <> 0 Then
            '如果当前页面不是第一页则执行
            viewstate("startpage") = 0
        End If
        getdata()
End Sub
    '跳转至上一页 ,即页码减1
 Private Sub LinkButton2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles LinkButton2.Click
        If viewstate("startpage") > 0 Then
            '如果当前页码索引大于0则执行
            viewstate("startpage") = viewstate("startpage") - 1
        End If
        getdata()
End Sub
    '跳转至下一页 ,即页码加1
 Private Sub LinkButton3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles LinkButton3.Click
        If viewstate("startpage") < viewstate("pc") - 1 Then
            '如果当前页码索引小于(总页数-1)时 则执行
            viewstate("startpage") = viewstate("startpage") + 1
        End If
        getdata()
End Sub
    ' 跳转至最后一页
 Private Sub LinkButton4_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles LinkButton4.Click
        If viewstate("startpage") <> viewstate("pc") - 1 Then
            '如果当前页面不是最后一页则执行
            viewstate("startpage") = viewstate("pc") - 1
        End If
        getdata()
End Sub
    '跳转至选中页码
 Private Sub DropDownList1_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles DropDownList1.SelectedIndexChanged
        viewstate("PageSize") = DropDownList1.SelectedValue
        viewstate("startpage") = 0
        getdata()
End Sub
    '跳转至手工输入的代码页码
 Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        If Int(TextBox1.Text) <= viewstate("pc") Then
            viewstate("startpage") = Int(TextBox1.Text) - 1
            getdata()
        End If
End Sub
End Class
'-----code end ----------
保存编译后,预览效果如下图所示9.8所示。


图9.8 DataGrid_Sample3.aspx运行结果

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: