■GridViewにページング／並べ替え機能を追加する
(GridView03.aspx)
GridViewにSQL Serverのテーブルを表示してページング、並べ替えするサンプルを作成します。このサンプルでは、以下のノウハウを習得することができます。
▼ GridViewにページング機能を追加する方法
▼ GridViewに列の並べ替え機能を追加する方法
▼ GridViewに表示する列と並べ替えする列に異なる列名を設定する方法
▼ GridViewのページャーをカスタマイズする方法
図 GridViewの最下位からページ番号をクリックする該当ページが表示される
1. 新規Webページ作成
ソリューションエクスプローラのプロジェクトの右クリックから[新しい項目の追加]を選択して、新規Webページ「GridView03.aspx」を作成します。
2. コントロール作成
デザイナにGridView03aspxが表示されたら、ツールボックスの「データ」タブから[GridView]をドラッグ＆ドロップします。デザイナにGridView1のオブジェクトが作成されます。「GridViewタスク」メニューから[オートフォーマット]を選択したら、「スキームの選択」から[砂と空]を選択して[OK]をクリックします。
「GridViewタスク」メニューの[データソースの選択]から[<新しいデータソース>]を選択してデータソースの構成ウィザードを起動したら、NwindSQLデータベースのCustomersテーブルから「CustomerID」、「CompanyKana」、「CompanyName」、「Phone」の列を選択します。
「GridViewタスク」メニューから「ページングを有効にする」と「並べ替えを有効にする」をチェックしたら、[列の編集]を選択します。「フィールド」ダイアログが表示されたら、「選択されたフィールド」から[CompanyKana]を選択して[X]ボタンで削除します。その他のフィールドは、表のようにプロパティを設定します。CompanyNameのSortExpressionプロパティに「CompanyKana」を設定することに注意してください。
表 BoundFieldのプロパティ設定
|
列 |
HeaderText |
SortExpression |
|
BoundField(CustomerID) |
ID |
CustomerID |
|
BoundField(CompanyName) |
得意先 |
ComanyKana |
|
BoundField(Phone) |
電話 |
Phone |
図 BoundFieldのHeaderText/SortExpressionプロパティを設定
3. ブラウザに表示
VWD 2005のツールバーから[デバッグの開始]ボタンをクリックしてブラウザに表示します。ブラウザが起動されて、GridViewにCustomersテーブルが表示されます。GridViewのヘッダーから[ID]のリンクをクリックすると得意先IDの昇順／降順に並べ替えされます。GridView最下位のページャーから[ページ番号]のリンクをクリックすると該当ページに移動します。
図 GridViewのヘッダーから[ID]をクリックして得意先IDの降順に並べ替えた例
◆解説
GridViewにページング、並べ替え機能を追加するには、「GridViewタスク」メニューから「ページングを有効にする」と「並べ替えを有効にする」をチェックします。並べ替え機能を有効にすると、GridViewのヘッダーに表示される列見出しがリンク形式で表示されます。列見出しのリンクをクリックすると列を昇順／降順に切り替えしながら並べ替えします。並べ替えする列は、BoundFieldのSortExpressionプロパティに設定します。得意先列のようにDataFieldとSortExpressionに異なる列（フィールド）を設定することもできます。
<asp:GridView ID="GridView1" runat="server"
AllowPaging="True" AllowSorting="True"・・・>
<Columns>
<asp:BoundField
DataField="CustomerID"
HeaderText="ID"
SortExpression="CustomerID" />
<asp:BoundField
DataField="CompanyName"
HeaderText="得意先"
SortExpression="CompanyKana" />
<asp:BoundField
DataField="Phone"
HeaderText="電話"
SortExpression="Phone" />
</Columns>
</asp:GridView>
GridViewのページングを有効にすると、GridViewの最下位にページャーが表示されます。ページを移動するには、ページ番号をクリックします。ページ当たりの行数は既定値で「10」に設定されます。ページャーをカスタマイズするには、GridViewのプロパティウィンドウから[PagerSettings]を展開して各種プロパティを設定します。
たとえば、ページ番号の代わりにページ移動ボタンを表示するにはModeプロパティから[NextPrevious]または[NextPreviousFirstLast]を選択します。「NextPreviousFirstLast」を選択すると、ページャーに「<<、<、>、>>」のボタンが表示されます。矢印の代わりに文字を表示するには、FirstPageText、PreviousPageText、NextPageText、LastPageTextプロパティに「先頭頁」、「前頁」、「次頁」、「最終頁」のような文字列を設定します。
ページ移動ボタンにイメージを表示するには、FirstPageImageUrl、PreviousPageImageUrl、NextPageImageUrl、LastPageImageUrlプロパティにイメージファイルのパスを設定します。
ページャーをGridViewの上下に表示するには、Positionプロパティから[TopAndButtom]を選択します。
図 パージャーをGridViewの上下に表示した例
ページ移動ボタンは既定値でページャーの中央に表示されますが、GridViewのプロパティウィンドウからPagerStyleを展開してHorizontalAlignプロパティから[Left]、[Right]を選択すると「左揃え」、「右揃え」で表示することができます。