DataGrid是Asp.NET中的一個重要的控件，經(jīng)常我們都將DataGrid做成可分頁的和可排序的，有時還需要加上選擇功能。這些都是經(jīng)常需要用到的方法，其實是比較簡單的。

設(shè)計思路：
為了方便起見，我們連接SQL Server 2000的NorthWind數(shù)據(jù)庫的Orders表，從數(shù)據(jù)庫里得到此表的數(shù)據(jù)視圖。利用DataGrid的SortCommand事件實現(xiàn)排序。用一個模板列加上CheckBox控件實現(xiàn)選擇。可用DataGrid的屬性生成器的“分頁”選項或者自己修改HTML實現(xiàn)分頁。

HTML：

添加一個DataGrid，命名為dgOrder。
添加了一個模板列，模板列里放一個名為Cb的CheckBox控件。此列用來實現(xiàn)選擇
為要排序的每個列加上排序表達(dá)式SortExpression。
利用列的DataFormatString來格式化列，象DataFormatString="{0:d}"顯示日期格式。
設(shè)置PageSize="15"每頁顯示15行數(shù)據(jù)，AllowPaging="True" 為允許分頁 。

整個HTML頁代碼：

<form id="Form1" method="post" runat="server">

<asp:datagrid id="dgOrder" runat="server" Height="515px" Width="718px" AutoGenerateColumns="False" AllowSorting="True" CellPadding="4" BorderWidth="1px" BorderColor="#A0ABEB" PageSize="15" BorderStyle="Solid" BackColor="White" GridLines="Vertical" ForeColor="Black" AllowPaging="True" ShowFooter="True">

<SelectedItemStyle ForeColor="White" BackColor="Black"></SelectedItemStyle>

<AlternatingItemStyle BackColor="#EEEEEE"></AlternatingItemStyle>

<HeaderStyle HorizontalAlign="Center" ForeColor="White" BorderColor="#6876C5" BackColor="#6876C5"></HeaderStyle>

<FooterStyle ForeColor="White" BackColor="#6876C5"></FooterStyle>

<Columns>

<asp:TemplateColumn>

<ItemTemplate>

<FONT face="宋體">

<asp:CheckBox id="Cb" runat="server"></asp:CheckBox></FONT>

</ItemTemplate>

</asp:TemplateColumn>

<asp:BoundColumn DataField="orderid" SortExpression="orderid" HeaderText="ID">

<HeaderStyle Width="180px"></HeaderStyle>

</asp:BoundColumn>

<asp:BoundColumn DataField="ShipCountry" SortExpression="ShipCountry" HeaderText="ShipCountry">

<HeaderStyle Width="180px"></HeaderStyle>

</asp:BoundColumn>

<asp:BoundColumn DataField="ShippedDate" SortExpression="ShippedDate" HeaderText="ShippedDate" DataFormatString="{0:d}">

<HeaderStyle Width="180px"></HeaderStyle>

</asp:BoundColumn>

<asp:BoundColumn DataField="Freight" SortExpression="Freight" HeaderText="Freight">

<HeaderStyle Width="180px"></HeaderStyle>

</asp:BoundColumn>

<asp:BoundColumn DataField="ShipAddress" SortExpression="ShipAddress" HeaderText="ShipAddress">

<HeaderStyle Width="480px"></HeaderStyle>

</asp:BoundColumn>

</Columns>

<PagerStyle HorizontalAlign="Center" ForeColor="Black" Position="TopAndBottom" BackColor="White" Mode="NumericPages"></PagerStyle>

</asp:datagrid>

</form>

 

 

 

后臺類添加以下代碼：

 

Imports System.Data.SqlClient

 

'得到數(shù)據(jù)視圖，參數(shù)為要排序的列

Private Function GetDv(ByVal strSort As String) As DataView

'定義數(shù)據(jù)庫連接

Dim dv As DataView

Dim CN As New SqlConnection()

Try

'初始化連接字符串

CN.ConnectionString = "data source=pmserver;initial catalog=Northwind;persist security info=False;user id=sa;Password=sa;"

CN.Open()

'從NorthWind得到orders表的數(shù)據(jù)

Dim adp As SqlDataAdapter = New SqlDataAdapter("select * from orders", CN)

Dim ds As New DataSet()

adp.Fill(ds)

'得到數(shù)據(jù)視圖

dv = ds.Tables(0).DefaultView

Catch ex As Exception

#If DEBUG Then

Session("Error") = ex.ToString()

Response.Redirect("../error.aspx") '跳轉(zhuǎn)程序的公共錯誤處理頁面

#End If

Finally

'關(guān)閉連接

CN.Close()

End Try

'排序

dv.Sort = strSort

Return dv

End Function

 

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

If Not IsPostBack Then

ViewState("strSort") = "orderid"

dgOrder.DataSource = GetDv(ViewState("strSort").ToString())

dgOrder.DataBind()

End If

End Sub

'排序

Private Sub dgOrder_SortCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridSortCommandEventArgs) Handles dgOrder.SortCommand

dgOrder.CurrentPageIndex = 0

'得到排序的列

ViewState("strSort") = e.SortExpression.ToString()

dgOrder.DataSource = GetDv(ViewState("strSort").ToString())

dgOrder.DataBind()

End Sub

 

'分頁

Private Sub dgOrder_PageIndexChanged(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridPageChangedEventArgs) Handles dgOrder.PageIndexChanged

'得到分頁的頁號

dgOrder.CurrentPageIndex = e.NewPageIndex

dgOrder.DataSource = GetDv(ViewState("strSort").ToString())

dgOrder.DataBind()

End Sub 

運行結(jié)果如下圖所示：(點擊列標(biāo)頭可以排序)

 

為了知道用戶選擇的是哪些記錄，我們可以利用DataGridItem的FindControl得到CheckBox的值，我們來添加一個按鈕，再寫如下代碼：

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

Dim item As DataGridItem

Dim StrScript As String

StrScript = "<script language=javascript>alert('"

'循環(huán)表格的項，F(xiàn)indControl

For Each item In Me.dgOrder.Items

If CType(item.FindControl("cb"), System.Web.UI.WebControls.CheckBox).Checked Then

Try

StrScript += item.Cells(1).Text & Space(2)

Catch ex As Exception

End Try

End If

Next

StrScript += "被選擇！')</script>"

RegisterClientScriptBlock("系統(tǒng)消息", StrScript)

End Sub 

上面的代碼RegisterClientScriptBlock添加Java Script腳本彈出對話框。（其實Vb Script的對話框比Java Script的對話框多更多的顯示和控制方式，但Netscape的瀏覽器不支持，大家可根據(jù)相應(yīng)的項目在程序里選擇用哪種腳本）。

總結(jié)：

DataGrid是我們常用的Web 控件，有時我們還可以和DataList混合使用，通過修改HTML頁，可以達(dá)到好的頁面效果。上面只是一個例子，為了便于清楚整個過程，我把數(shù)據(jù)訪問部分(SQL)寫到了頁面中。在軟件開發(fā)中，我們一般把訪問數(shù)據(jù)的部分寫成數(shù)據(jù)層，頁面調(diào)用數(shù)據(jù)層得到數(shù)據(jù)，這樣邏輯清晰，修改和維護(hù)都很方便。

最新評論