ASP.NET GridViewのホームへ戻る

GridViewにページング/並べ替え機能を追加する

 (GridView03.aspx)

 

GridViewSQL 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]ボタンで削除します。その他のフィールドは、表のようにプロパティを設定します。CompanyNameSortExpressionプロパティに「CompanyKana」を設定することに注意してください。

 

BoundFieldのプロパティ設定

HeaderText

SortExpression

BoundField(CustomerID)

ID

CustomerID

BoundField(CompanyName)

得意先

ComanyKana

BoundField(Phone)

電話

Phone

 

 

図 BoundFieldHeaderText/SortExpressionプロパティを設定

 

 

3. ブラウザに表示

 

VWD 2005のツールバーから[デバッグの開始]ボタンをクリックしてブラウザに表示します。ブラウザが起動されて、GridViewCustomersテーブルが表示されます。GridViewのヘッダーから[ID]のリンクをクリックすると得意先IDの昇順/降順に並べ替えされます。GridView最下位のページャーから[ページ番号]のリンクをクリックすると該当ページに移動します。

 

 

図 GridViewのヘッダーから[ID]をクリックして得意先IDの降順に並べ替えた例

 

 

 

◆解説

 

GridViewにページング、並べ替え機能を追加するには、「GridViewタスク」メニューから「ページングを有効にする」と「並べ替えを有効にする」をチェックします。並べ替え機能を有効にすると、GridViewのヘッダーに表示される列見出しがリンク形式で表示されます。列見出しのリンクをクリックすると列を昇順/降順に切り替えしながら並べ替えします。並べ替えする列は、BoundFieldSortExpressionプロパティに設定します。得意先列のようにDataFieldSortExpressionに異なる列(フィールド)を設定することもできます。

 

<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」を選択すると、ページャーに「<<<>>>」のボタンが表示されます。矢印の代わりに文字を表示するには、FirstPageTextPreviousPageTextNextPageTextLastPageTextプロパティに「先頭頁」、「前頁」、「次頁」、「最終頁」のような文字列を設定します。

 

ページ移動ボタンにイメージを表示するには、FirstPageImageUrlPreviousPageImageUrlNextPageImageUrlLastPageImageUrlプロパティにイメージファイルのパスを設定します。

 

ページャーをGridViewの上下に表示するには、Positionプロパティから[TopAndButtom]を選択します。

 

図 パージャーをGridViewの上下に表示した例

 

ページ移動ボタンは既定値でページャーの中央に表示されますが、GridViewのプロパティウィンドウからPagerStyleを展開してHorizontalAlignプロパティから[Left][Right]を選択すると「左揃え」、「右揃え」で表示することができます。

 

ASP.NET GridViewのホームへ戻る