DataGridにページング機能を追加する
DataGridに複数の行（レコード）を表示するとページをスクロールする必要がありますが、スクロールする代わりにページ番号をクリックしてページを移動できるようにします。
DataGridのページング機能を利用してページ番号をクリックしてページを移動します。
●DataGridからページ番号をクリックして移動する (ch55DataGrid1.aspx)
DataGridの右下にページ番号を表示して、ページを移動できるようにします。ここで作成するサンプルは、DataGridにOracleデータベースのCustomers表をバインドして表示します。
Customers表から行（レコード）を抽出するには、パッケージ(CustomerPackage)に登録されているストアドプロシージャ(GetCustomers)を使用します。
iSQL*PlusまたはSQL*Plusを起動して、事前にパッケージ仕様部(C:\vbora\sql\CustomerPackage.sql)とパッケージ本体部(C:\vbora\sql\CustomerPackageBody.sql)を作成してください。
パッケージ仕様部(CustomerPackage.sql)
CREATE OR REPLACE PACKAGE
TYPE rcurCustomers IS REF CURSOR;
PROCEDURE GetCustomers(
orcurCustomers OUT rcurCustomers);
END CustomerPackage;
パッケージ本体部(CustomerPackageBody.sql)
CREATE OR REPLACE PACKAGE BODY
PROCEDURE GetCustomers(
orcurCustomers OUT rcurCustomers) IS
BEGIN
OPEN orcurCustomers FOR
SELECT * FROM Customers
ORDER BY CustomerID;
END GetCustomers;
END CustomerPackage;
このサンプルでは、以下のノウハウを習得することができます。
▼DataGridにページング機能を追加する方法
▼DataGridのプロパティビルダからページングを許可する方法
▼プロパティビルダからページサイズ、表示位置、モードなどのプロパティを設定する方法
▼DataGridのPageIndexChangedイベントの使い方
▼DataSetオブジェクトをキャッシングしてページングを高速化する方法
1. Webフォーム追加
ソリューションエクスプローラからフォルダ[ch5]を右クリックして、新規Webフォーム「ch55DataGrid1」を追加します。
2. DataGrid作成
ツールボックスの[Webフォーム]から、DataGridをドラッグ＆ドロップします。デザイナにDataGrid1のオブジェクトが作成されます。
3. 自動フォーマット
DataGrid1の右クリックから[自動フォーマット]を選択します。「自動フォーマット」が表示されたら、「スキームの選択」から[プロフェッショナル1]を選択して、[OK]をクリックします。
4. 連結列作成
DataGrid1の右クリックから[プロパティビルダ]を選択します。「DataGrid1プロパティ」が表示されたら、左側から[列]を選択します。
[実行時に自動的に列を作成する]をクリックしてチェックを外します。「使用可能な列」から[連結列]を選択して
をクリックします。「選択された列」に連結列が表示されたら、連結列(BoundColumn)プロパティの「ヘッダーテキスト」に「ID」、「データフィールド」に「CustomerID」を入力します。同様の手順で、得意先、担当、電話の連結列を作成します。
表 連結列(BoundColumn)のプロパティ
|
ヘッダーテキスト |
データフィールド |
|
ID |
CustomerID |
|
得意先 |
CompanyName |
|
担当 |
ContactName |
|
電話 |
Phone |
図 プロパティビルダの[列]から連結列作成
5. ページングを許可
「プロパティビルダ」の左側から[ページング]を選択します。[ページングを許可]をクリックしてチェックマークを付けます。「モード」から[ページ番号]を選択します。その他のプロパティは、デフォルトの状態にしておきます。
図 プロパティビルダの[ページング]からプロパティ設定
6. ヘッダーを中央揃え
「プロパティビルダ」の左側から[書式]を選択したら、画面中央の「オブジェクト」から[ヘッダー]を選択します。「水平方向の配置」から[中央]を選択してヘッダーを中央揃えに設定します。
図 プロパティビルダの[書式]からヘッダーの書式設定
7. ページャを右揃え
「プロパティビルダ」の「オブジェクト」から[ページャ]を選択します。「水平方向の配置」から[右]を選択してページャを右揃えに設定します。
図 プロパティビルダの[書式]からページャの書式設定
8. IDの連結列を右揃え
「プロパティビルダ」の「オブジェクト」から[列]をクリックして展開します。[Columns[0]-ID]をクリックして展開したら[項目]を選択します。「水平方向の配置」から[右]を選択して、IDを右揃えに設定します。
図 プロパティビルダの[書式]からID列の項目の書式設定
9. コードビューに切り替え
メニューバーから[表示]→[コード]を選択してコードビューに切り替えます。クラスモジュールの先頭に、以下のImportsステートメントを追加します。
Imports System.Data
Imports Oracle.DataAccess.Client
Imports Oracle.DataAccess.Types
Page_Loadイベントに、以下のコードを追加します。
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
Handles MyBase.Load
If Not IsPostBack Then
BindGrid()
End If
End Sub
クラスモジュールの最後に、Sub BindGridとFunction CreateDataSetを追加します。
Private Sub BindGrid()
DataGrid1.DataSource = CreateDataSet("CustomerPackage.GetCustomers")
DataGrid1.DataBind()
End Sub
Private Function CreateDataSet(ByVal strPackage As String) As DataSet
Dim con As New OracleConnection(ConfigurationSettings.AppSettings("conStringOraNw"))
Dim cmd As New OracleCommand(strPackage, con)
Dim da As New OracleDataAdapter
Dim ds As New DataSet
cmd.CommandType = CommandType.StoredProcedure
cmd.Parameters.Add("1", OracleDbType.RefCursor, ParameterDirection.Output)
da.SelectCommand = cmd
da.Fill(ds)
Return ds
End Function
コードビュー左上の「クラス名」のドロップダウンリストから[DataGrid1]を選択します。右上の「メソッド名」のドロップダウンリストから[PageIndexChanged]を選択します。DataGrid1_PageIndexChangedのイベントが作成されたら、以下のコードを追加します。
Private Sub DataGrid1_PageIndexChanged(ByVal source As Object,
ByVal e As System.Web.UI.WebControls.DataGridPageChangedEventArgs)
Handles DataGrid1.PageIndexChanged
DataGrid1.CurrentPageIndex = e.NewPageIndex
BindGrid()
End Sub
10. ブラウザに表示
ソリューションエクスプローラから[ch55DataGrid1.aspx]を右クリックしてブラウザに表示します。DataGridにCustomers表が表示されます。DataGrid右下のページャにページ番号のリンクが表示されますので、ページ番号をクリックするとそのページに移動します。
図 DataGrid右下のページャにページ番号のリンクが表示される
■解説
DataGridにページング機能を組み込むには、「プロパティビルダ」の[ページング]から[ページングを許可]をクリックしてチェックマークを付けます。その他のプロパティは、デフォルトの設定でも動作します。「ページサイズ」には、ページ当たりの行数を入力します。デフォルトは、「10」行に設定されています。「位置」からは、ページ移動ボタンを表示する位置を選択します。[上]、[下]、[上下]のいずれかを選択します。
「モード」からは、ページの移動をボタンで行うのか、それともページ番号で行うかを選択します。ボタンを選択したときは、ボタンに表示するテキストを入力することができます。たとえば、[前頁]、[次頁]のようなテキストを入力します。デフォルトは、[<]と[>]が表示されます。ページ番号を選択したときは、DataGridのページャに表示するページ番号の個数を指定することができます。たとえば、ページ番号を5個表示するには、「数字ボタン」に「5」を入力します。この場合、ページャには、「1, 2, 3, 4, 5,... 」のようにページ番号が5個表示されます。5ページ以降に移動するときには、[...]のリンクをクリックします。
「プロパティビルダ」から[OK]をクリックすると、PagerStyleが生成されます。
<asp:datagrid id="DataGrid1" runat="server"
AllowPaging="True" AutoGenerateColumns="False" ・・・>
<Columns>
<asp:BoundColumn DataField="CustomerID" HeaderText="ID">
・・・
</Columns>
<PagerStyle HorizontalAlign="Right"
Position="TopAndBottom"
PageButtonCount="5"
Mode="NumericPages">
</PagerStyle>
</asp:datagrid>
DataGridのページャに表示されているページ番号のリンクをクリックすると、WebページがポストバックされてPage_Load→DataGrid1_PageIndexChangedの順にイベントが発生します。
Page_Loadイベントでは、IsPostBackプロパティを調べて初期ロードのときBindGridメソッドを実行します。
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
Handles MyBase.Load
If Not IsPostBack Then
BindGrid()
End If
End Sub
BindGridメソッドは、CreateDataSetメソッドを実行してCustomers表のDataSetを作成します。CreateDataSetメソッドの引数には、パッケージ(CustomerPackage)のストアドプロシージャ(GetCustomers)を指定します。DataGridのDataSourceプロパティにDataSetのオブジェクトを設定して、DataBindメソッドを実行すると、DataGridにDataSet(DataTable)がバインドされてCustomers表が表示されます。
Private Sub BindGrid()
DataGrid1.DataSource = CreateDataSet("CustomerPackage.GetCustomers")
DataGrid1.DataBind()
End Sub
CreateDataSetメソッドは、OracleDataAdapterオブジェクトのFillメソッドを実行してCustomers表をDataSetに取り込みます。
Private Function CreateDataSet(ByVal strPackage As String) As DataSet
Dim con As New OracleConnection(ConfigurationSettings.AppSettings("conStringOraNw"))
Dim cmd As New OracleCommand(strPackage, con)
Dim da As New OracleDataAdapter
Dim ds As New DataSet
cmd.CommandType = CommandType.StoredProcedure
cmd.Parameters.Add("1", OracleDbType.RefCursor, ParameterDirection.Output)
da.SelectCommand = cmd
da.Fill(ds)
Return ds
End Function
DataGrid1_PageIndexChangedイベントでは、DataGridPageChangedEventArgsオブジェクトのNewPageIndexプロパティからクリックしたページ番号を取得して、DataGridのCurrentPageIndexプロパティに設定します。BindGridメソッドを実行すると、DataGridにCurrentPageIndexに設定したページが表示されます。
Private Sub DataGrid1_PageIndexChanged(ByVal source As Object,
ByVal e As System.Web.UI.WebControls.DataGridPageChangedEventArgs)
Handles DataGrid1.PageIndexChanged
DataGrid1.CurrentPageIndex = e.NewPageIndex
BindGrid()
End Sub
STEP UP
|
DataGridのページング処理を高速化するには (Ch55DataGrid2.aspx) ページング処理を高速化するには、Customers表が格納されているDataSetをWebサーバーのメモリ上にキャッシングします。DataSetをキャッシングするには、BindGridを以下のように書き換えます。 Private Sub BindGrid() Dim ds As DataSet = Cache("ch55DataGrid2DataSet") If ds Is Nothing Then ds =
CreateDataSet("CustomerPackage.GetCustomers")
Cache("ch55DataGrid2DataSet") = ds End If
DataGrid1.DataSource = ds
DataGrid1.DataBind() End Sub |