●DataGridの列を並べ替えする (ch54DataGrid1.aspx)

 

DataGridには列見出しをクリックして、列を並べ替えする機能がサポートされています。ここで作成するサンプルは、DataGridにOracleデータベースのCustomers表をバインドして、得意先ID、得意先、電話の列を昇順に並べ替えるできるようにします。

 

Customers表から行（レコード）を抽出するには、パッケージ(CustomerPackage)に登録されているストアドプロシージャ(GetCustomers)を使用します。

 

iSQL*PlusまたはSQL*Plusを起動して、事前にパッケージ仕様部(C:\vbora\sql\CustomerPackage.sql)とパッケージ本体部(C:\vbora\sql\CustomerPackageBody.sql)を作成してください。

 

パッケージ仕様部(CustomerPackage.sql)

CREATE OR REPLACE PACKAGE CustomerPackage AS

  TYPE rcurCustomers IS REF CURSOR;

  PROCEDURE GetCustomers(

    orcurCustomers OUT rcurCustomers);

END CustomerPackage;

 

パッケージ本体部(CustomerPackageBody.sql)

CREATE OR REPLACE PACKAGE BODY CustomerPackage AS

  PROCEDURE GetCustomers(

    orcurCustomers OUT rcurCustomers) IS

  BEGIN

    OPEN orcurCustomers FOR

      SELECT * FROM Customers

      ORDER BY CustomerID;

  END GetCustomers;

END CustomerPackage;

 

このサンプルでは、以下のノウハウを習得することができます。

 

▼DataGridに並べ替え機能を追加する方法

▼DataGridのプロパティビルダから並べ替えを有効にする方法

▼連結列(Boundcolumn)のSortExpressionプロパティに並べ替えする列を設定する方法

▼DataGridのプロパティビルダからヘッダーを中央揃えにする方法

▼DataGridのSortCommandイベントの使い方

▼DataTableオブジェクトからDataViewオブジェクトを作成する方法

▼DataViewオブジェクトのSortプロパティの使い方

 

1. Webフォーム追加

 

ソリューションエクスプローラからフォルダ[ch5]を右クリックして、新規Webフォーム「ch54DataGrid1」を追加します。

 

2. DataGrid作成

 

ツールボックスの[Webフォーム]から、DataGridをドラッグ＆ドロップします。デザイナにDataGrid1のオブジェクトが作成されます。

 

3. 自動フォーマット

 

DataGrid1の右クリックから[自動フォーマット]を選択します。「自動フォーマット」が表示されたら、「スキームの選択」から[プロフェッショナル1]を選択して、[OK]をクリックします。

 

4. 並べ替えを有効にする

 

DataGrid1の右クリックから[プロパティビルダ]を選択します。「DataGrid1プロパティ」が表示されたら、左側から[全般]を選択します（プロパティビルダのダイアログが表示されると、デフォルトで[全般]が選択された状態になっています）。画面右下の[並べ替えを有効にする]をクリックしてチェックマークを付けます。

 

fig5-4-1

図 プロパティビルダから並べ替えを有効にする

 

 

5. 連結列作成

 

「プロパティビルダ」の左側から[列]を選択します。[実行時に自動的に列を作成する]をクリックしてチェックを外します。「使用可能な列」から[連結列]を選択してiconRightArrowをクリックします。「選択された列」に連結列が表示されたら、連結列(BoundColumn)プロパティの「ヘッダーテキスト」に「ID」、「データフィールド」に「CustomerID」を入力します。「式の並べ替え」には、「CustomerID」を入力します。同様の手順で、得意先、担当、電話の連結列を作成します。得意先の「式の並べ替え」には、50音順に表示するために「CompanyKana」を入力します。担当の「式の並べ替え」には、なにも入力しません。

 

表 連結列(BoundColumn)のプロパティ

ヘッダーテキスト

データフィールド

式の並べ替え

ID

CustomerID

CustomerID

得意先

CompanyName

CompanyKana

担当

ContactName

 

電話

Phone

Phone

 

fig5-4-2

図 プロパティビルダから連結列作成

 

6. ヘッダーを中央揃えに設定

 

「プロパティビルダ」の左側から[書式]を選択したら、画面中央の「オブジェクト」から[ヘッダー]を選択します。「水平方向の配置」から[中央]を選択します。

 

fig5-4-3

図 プロパティビルダからヘッダーを中央揃えに設定

 

7. IDの連結列を右揃えに設定

 

「プロパティビルダ」の「オブジェクト」から[列]をクリックして展開します。[Columns[0] – ID]をクリックして展開したら、[項目]を選択します。「水平方向の配置」から[右]を選択します。[OK]をクリックしてダイアログを閉じます。

 

fig5-4-4

図 プロパティビルダからID列の項目を右揃えに設定

 

8. コードビューに切り替え

 

メニューバーから[表示]→[コード]を選択してコードビューに切り替えます。クラスモジュールの先頭に、以下の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)

cccHandles MyBase.Load

  If Not IsPostBack Then

    BindGrid("CustomerID")

  End If

End Sub

 

クラスモジュールの最後に、Sub BindGridとFunction CreateDataViewを追加します。

 

Private Sub BindGrid(ByVal strSort As String)

  Dim dv As DataView = CreateDataView("CustomerPackage.GetCustomers")

 

  dv.Sort = strSort

  DataGrid1.DataSource = dv

  DataGrid1.DataBind()

End Sub

 

Private Function CreateDataView(ByVal strPackage As String) As DataView

  Dim con As New OracleConnection(ConfigurationSettings.AppSettings("conStringOraNw"))

  Dim cmd As New OracleCommand(strPackage, con)

  Dim da As New OracleDataAdapter

  Dim dt As New DataTable

 

  cmd.CommandType = CommandType.StoredProcedure

  cmd.Parameters.Add("1", OracleDbType.RefCursor, ParameterDirection.Output)

  da.SelectCommand = cmd

  da.Fill(dt)

  Return New DataView(dt)

End Function

 

コードビューの「クラス名」のドロップダウンリストから[DataGrid1]を選択します。「メソッド名」のドロップダウンリストから[SortCommand]を選択します。DataGrid1_SortCommandイベントが作成されたら、以下のコードを追加します。

 

Private Sub DataGrid1_SortCommand(ByVal source As Object, ByVal e As cccSystem.Web.UI.WebControls.DataGridSortCommandEventArgs)

cccHandles DataGrid1.SortCommand

  BindGrid(e.SortExpression)

End Sub

 

fig5-4-5

図 DataGrid1のSortCommandイベント作成

 

 

9. ブラウザに表示

 

ソリューションエクスプローラから[ch54DataGrid1.aspx]を右クリックしてブラウザに表示します。DataGridにCustomers表が表示されます。DataGridのヘッダーに表示されている[得意先]のリンクをクリックすると、得意先の50音順に並べ替えます。[ID]のリンクをクリックすると、得意先IDの昇順に並べ替えします。

 

fig5-4-6

図 [得意先]のリンクをクリックして得意先を50音順に並べ替えた例

 

 

■解説

 

DataGridに並べ替え機能を組み込むには、「プロパティビルダ」の[全般]から[並べ替えを有効にする]をクリックしてチェックマークを付けます。次に、左側から[列]を選択して、[実行時に自動的に列を作成する]をクリックしてチェックを外します。「連結列」を追加したら、連結列(BoundColumn)プロパティの「ヘッダーテキスト(HeaderText)」、「データフィールド(DataField)」に列見出しと列名を入力します。「式の並べ替え(SortExpression)」には、並べ替えする列名を入力します。たとえば、得意先を並べ替えるときは列名「CompanyKana」を入力します。並べ替えオプション(Asc/Desc)を省略すると、昇順に並べ替えします。得意先の降順に並べ替えするときは、「CompanyKana Desc」のように入力します。「プロパティビルダ」の[OK]をクリックすると、以下のような連結列が生成されます。

 

<asp:DataGrid id="DataGrid1" runat="server"

  AllowSorting="True" AutoGenerateColumns="False"・・・>

  <Columns>

    <asp:BoundColumn DataField="CustomerID"

      SortExpression="CustomerID" HeaderText="ID">

    </asp:BoundColumn>

    <asp:BoundColumn DataField="CompanyName"

       SortExpression="CompanyKana" HeaderText="得意先">

    </asp:BoundColumn>

    <asp:BoundColumn DataField="ContactName"

      HeaderText="担当">

    </asp:BoundColumn>

    <asp:BoundColumn DataField="Phone"

      SortExpression="Phone" HeaderText="電話">

    </asp:BoundColumn>

  </Columns>

</asp:DataGrid>

 

連結列(BoundColumn)にSortExpressionを指定すると、DataGridに表示される見出しがハイパーリンクとして表示されます。見出しのリンクをクリックすると、WebページがポストバックされてPage_Load→DataGird1_SortCommandの順にイベントが発生します。

 

Page_Loadイベントでは、IsPostBackプロパティを調べて初期ロードのときBindGridメソッドを実行します。BindGridメソッドの引数には、並べ替えする列名（フィールド名）を指定します。

 

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

cccHandles MyBase.Load

  If Not IsPostBack Then

    BindGrid("CustomerID")

  End If

End Sub

 

BindGridメソッドは、CreateDataViewメソッドを実行してCustomers表のDataViewを作成します。CreateDataViewの引数には、パッケージ(CustomerPackage)のストアドプロシージャ(GetCustomers)を指定します。DataViewのSortプロパティに並べ替えする列名を設定してDataViewを並べ替えします。並べ替えしたDataViewオブジェクトをDataGridのDataSourceプロパティに設定して、DataBindメソッドを実行するとDataGridにCustomers表が表示されます。

 

Private Sub BindGrid(ByVal strSort As String)

  Dim dv As DataView = CreateDataView("CustomerPackage.GetCustomers")

  dv.Sort = strSort

  DataGrid1.DataSource = dv

  DataGrid1.DataBind()

End Sub

 

CreateDataViewメソッドは、OracleDataAdapterオブジェクトのFillメソッドを実行してDataTableにCustomers表のすべての行（レコード）を取り込みます。DataTableからDataViewを生成するには、New DataView(dt)のように記述します。

 

Private Function CreateDataView(ByVal strPackage As String) As DataView

  Dim con As New OracleConnection(ConfigurationSettings.AppSettings("conStringOraNw"))

  Dim cmd As New OracleCommand(strPackage, con)

  Dim da As New OracleDataAdapter

  Dim dt As New DataTable

  cmd.CommandType = CommandType.StoredProcedure

  cmd.Parameters.Add("1", OracleDbType.RefCursor, ParameterDirection.Output)

  da.SelectCommand = cmd

  da.Fill(dt)

  Return New DataView(dt)

End Function

 

DataGrid1_SortCommandイベントでは、DataGridSortCommandEventArgsオブジェクトのSortExpressionプロパティから並べ替えする列名を取得して、BindGridメソッドの引数に指定します。たとえば、DataGridの見出しから[得意先]をクリックしたときは、SortExpressionプロパティに列名CompanyKanaが格納されています。

この場合、BindGridメソッドはDataViewをCompanyKanaで並べ替えしてDataGridにバインドします。

 

Private Sub DataGrid1_SortCommand(ByVal source As Object, ByVal e As cccSystem.Web.UI.WebControls.DataGridSortCommandEventArgs)

cccHandles DataGrid1.SortCommand

  BindGrid(e.SortExpression)

End Sub