DataGridの並べ替えをカスタマイズするには
● DataGridの並べ替えにオートリバース機能を付加するサンプル
図 DataGridの並べ替えにオートリバース機能を付加するサンプル
このサンプルは、DataGridを並べ替えするとき昇順/降順を自動的に切り替えます。並べ替えが適用されているカラムのヘッダには、昇順(▼)、降順(▲)の矢印が表示されます。DataGridのヘッダにマウスを移動すると、「Sort by: CustomerID desc」のようなツールチップが表示されます。昇順(▼)で並べ替えられているカラムのリンクを再度クリックすると、降順(▲)で並べ替えします。
このサンプルでは、以下のノウハウを習得することができます。
▲ DataGridに並べ替え機能を追加する方法
▲ 昇順/降順の切り替えを自動的に行う方法
▲ DataGridのヘッダに昇順/降順の矢印を表示する方法
▲ DataGridのヘッダにツールチップを表示する方法
▲ Vie
▲ DataViewをWebサーバのメモリ上にキャッシュする方法
サンプルの行115-142では、DataGridを定義しています。行117では、DataGridのAllo
115: <asp:DataGrid
id="dgrdCustomers" runat="server"
117: Allo
118:
OnItemCreated="dgrdCustomers_ItemCreated"
119:
OnSortCommand="dgrdCustomers_SortCommand"
::::
>
128: <Columns>
129: <asp:BoundColumn
130:
DataField="CustomerID" HeaderText="ID"
131:
SortExpression="CustomerID"
132: ItemStyle-HorizontalAlign="Right"
/>
133: <asp:BoundColumn
134:
DataField="Kana" HeaderText="フリガナ"
135:
SortExpression="Kana" />
136: <asp:BoundColumn
137:
DataField="CompanyName" HeaderText="得意先名" />
138: <asp:BoundColumn
139:
DataField="Phone" HeaderText="電話番号"
140: SortExpression="Phone"
/>
141:
</Columns>
142: </asp:DataGrid>
Page_Load()イベントの行12では、Cacheのキーを生成しています。ここで生成したキーを使用して、得意先テーブルのDataViewをWebサーバのメモリ上にキャッシュします。変数mstrCacheKeyには、以下のようなキーが格納されます。
mstrCacheKey = “Customers/aspado/ch2/03/DataGridSortingAutoReverse.aspx”
行14-17は、ページが最初にロードされたときに実行されます。行14-15では、前回キャッシュされたDataViewを強制的に無効にしています。行16では、Vie
11: Sub Page_Load()
12: mstrCacheKey =
"Customers" & Request.Path
13: If Not IsPostBack Then
14:
Cache.Remove(mstrCacheKey)
15: mdvwCustomers =
Nothing
16: Vie
17:
BindData("CustomerID asc")
18: Else
19: mdvwCustomers =
Cache(mstrCacheKey)
20: End If
21: End Sub
Sub BindData()では、DataViewを並べ替えしてDataGridにバインドします。行48-50のIf…End Ifでは、得意先テーブルのキャッシュが無効かチェックしています。キャッシュが無効になっているときは、Sub LoadData()を呼び出してデータベースから得意先テーブルを抽出してキャッシュします。行52では、DataViewのSortプロパティに並べ替えするフィールド名を設定して並べ替えします。行53-54では、DataGridのDataSourceプロパティに並べ替えしたDataViewを設定して、DataGrid()メソッドでバインドします。
47: Sub BindData(strSortExpression As String)
48: If mdvwCustomers Is Nothing Then
49: LoadData()
50: End If
52: mdvwCustomers.Sort =
strSortExpression
53: dgrdCustomers.DataSource =
mdvwCustomers
54: dgrdCustomers.DataBind()
55: End Sub
Sub LoadData()の行65では、OleDbDataAdapterのFill()メソッドで得意先テーブルをDataSetに格納しています。行66では、DataSetから得意先テーブルのDataViewを生成しています。行67では、DataViewをキャッシュしています。Webサーバのメモリ上にキャッシュされたDataViewは、Webサーバの資源が不足すると強制的に解放されます。キャッシュされたDataViewを使用するときは、無効になっていないかチェックする必要があります。
57: Sub LoadData()
::::
65: da.Fill(ds)
66: mdvwCustomers =
ds.Tables(0).DefaultView
67: Cache(mstrCacheKey) =
mdvwCustomers
68: End Sub
DataGridのヘッダから並べ替えのリンクをクリックすると、OnSortCommandイベントが発生します。このイベントでは、並べ替えするフィールドを生成してSub BindData()に渡します。行25では、DataGridSortCommandEventArgsのSortExpressionプロパティから値を取得して変数に保存しています。SortExpressionには、BoundColumnのSortExpressionプロパティに設定している値が格納されています。行28では、Vie
このサンプルでは、昇順/降順を自動的に切り替えるためにカレントの情報をLabelのTextプロパティに格納して保存しています。ASP.NETでは、Labelに保存する代わりにVie
23: Sub dgrdCustomers_SortCommand( _
24: s As Object, e As
DataGridSortCommandEventArgs)
25: Dim strSortExpression As String =
e.SortExpression
26: Dim lbl As Label
27:
28: Vie
29: Select strSortExpression
30: Case
"CustomerID"
31: lbl =
lblCustomerID
32: Case "Kana"
33: lbl =
lblKana
34: Case "Phone"
35: lbl =
lblPhone
36: End Select
37:
38: strSortExpression &= "
" & lbl.Text
39: If lbl.Text = "asc" Then
40: lbl.Text =
"desc"
41: Else
42: lbl.Text =
"asc"
43: End If
44: BindData(strSortExpression)
45: End Sub
Sub BindData()で、DataGridにDataViewをバインドすると、アイテムが作成されたときにOnItemCreatedイベントが発生します。このイベントでは、DataGridのヘッダにLabelコントロールを追加して昇順、降順の矢印を表示します。また、ヘッダのTableCell.ToolTipプロパティにツールチップを設定します。行71では、DataGridのItemTypeを変数に保存しています。行75-95のFor…Nextは、ItemTypeがHeaderのときに実行されます。行76では、DataGridItemのCells()コレクションからカレントのTableCellを取得して変数に保存しています。行77では、DataGridのColumns()コレクションからSortExpressionプロパティを取得して変数に保存しています。SortExpressionには、BoundColumnのSortExpressionに設定した値が格納されています。行79-93は、SortExpressionに値が設定されているときに実行されます。BoundColumnの得意先名には、SortExpressionが設定されていませんので得意先ID、フリガナ、電話番号のときに実行されます。行79-85では、TableCellのToolTipプロパティに「Sort by:
FieldName Asc|Desc」を設定しています。フィールド名は、Columns()コレクションのSortExpressionプロパティから取得した値を使用します。昇順(Asc)、降順(Desc)のオプションは、LabelのTextプロパティから取得した値を使用します。行86では、Vie
70: Sub dgrdCustomers_ItemCreated(s As Object, e As
DataGridItemEventArgs)
71: Dim lit As ListItemType = e.Item.ItemType
73: If lit = ListItemType.Header Then
74: Dim i As Integer
75: For i=0 to
dgrdCustomers.Columns.Count -1
76: Dim cell
As TableCell = e.Item.Cells(i)
77: Dim
strSortExpression As String = dgrdCustomers.Columns(i).SortExpression
78: If
strSortExpression <> "" Then
79:
Dim lbl As Label
80:
Select strSortExpression
81:
Case "CustomerID": lbl = lblCustomerID
82:
Case "Kana": lbl = lblKana
83:
Case "Phone": lbl = lblPhone
84:
End Select
85:
cell.ToolTip = "Sort by: " & strSortExpression &
" " & lbl.Text
86:
Dim strCurrentSortExpression As String = CType(Vie
87:
If strCurrentSortExpression = strSortExpression Then
88:
Dim lblOrder As Label = New Label()
89:
lblOrder.Text = IIF(lbl.Text = "asc"," ▲","
▼")
90:
lblOrder.Font.Size = FontUnit.XXSmall
91:
lblOrder.ForeColor = Color.Red
92:
cell.Controls.Add(lblOrder)
93:
End If
94: End If
95: Next
100: End If
101: End Sub
|
DataGridの複数のカラムを並べ替えるサンプル ダウンロードにDataGridの複数のカラムを並べ替えるサンプルが収録されています。 図 DataGridの複数のカラムを並べ替えするサンプル DataGridのヘッダの見出しをクリックすると、その見出しを並べ替えします。見出しに番号①－④がついているとき、見出しをクリックすると昇順/降順を自動的に切り替えて並べ替えします。番号①－④をクリックすると並べ替えを解除します。 |
● DataGridを50音順に表示するサンプル
図 DataGridを50音順に表示するサンプル
このサンプルは、DataGrid上に得意先を50音順に並べ替えて表示します。たとえば、フッタに表示されている「カ」をクリックするとカ行（カキクケコガギグゲゴ）の得意先が表示されます。カ行をクリックしたときは、カキクケコの他に濁音ガギグゲゴで始まる得意先も含まれます。ハ行をクリックしたときは、濁音（バビブベボ）と半濁音（パピプペポ）も含まれます。このサンプルを応用すると、得意先を都道府県別、売上高のABC分析別に表示することができます。
このサンプルでは、以下のノウハウを習得することができます。
▲ DataGridのフッタにLiteralControlを追加する方法
▲ DataGridのフッタにLinkButtonを追加する方法
▲ DataGridのセルを削除する方法
▲ DataGridのセルを結合する方法
▲ 得意先テーブルを50音順で絞り込む方法
▲ サブプロシージャの引数にデフォルト値を設定する方法
サンプルの行83-101では、DataGridを定義しています。行89では、DataGridのOnItemCommandイベントを登録しています。このイベントは、フッタに表示されている50音のLinkButtonをクリックすると発生します。行90では、OnItemCreateイベントを登録しています。このイベントは、DataGridのDataBind()メソッドを実行してアイテムが作成されたときに発生します。行95-100の<Columns>…</Columns>では、BoundColumnで得意先テーブルのカナ、得意先名、担当者名、電話番号をバインドしています。
83: <asp:DataGrid id="dgrdCustomers"
runat="server"
::::
89:
OnItemCommand="dgrdCustomers_ItemCommand"
90:
OnItemCreated="dgrdCustomers_ItemCreated">
::::
95: <Columns>
96: <asp:BoundColumn
DataField="Kana" HeaderText="カナ" />
97: <asp:BoundColumn
DataField="CompanyName" HeaderText="得意先名" />
98: <asp:BoundColumn
DataField="ContactName" HeaderText="担当者名" />
99: <asp:Boundcolumn
DataField="Phone" HeaderText="電話番号" />
100:
</Columns>
101: </asp:DataGrid>
Page_Load()イベントでは、ページが最初にロードされたときSub BindData()を呼び出して、DataGridに得意先テーブルをバインドしています。
6: Sub Page_Load()
7: If Not IsPostBack Then
8: BindData()
9: End If
10: End Sub
Sub BindData()の行14-22のIf…Else…End Ifでは、得意先テーブルからレコードを抽出するSQLを生成しています。行15-17は、引数を省略したときに実行されます。引数を省略するとア行の得意先を抽出するSelectステートメントを生成します。Where句には、CompanyKana Like '[アイウエオ]%'を指定してア行で始まる得意先を抽出します。'[アイウエオ]%'の代わりに'[ア-オ]%'のように記述することもできます。Order By句には、CompanyKanaを指定して得意先の読みの順に並べ替えます。
行19-21は、引数を指定したときに実行されます。SelectステートメントのWhere句には、引数に指定したフィルタ条件を設定します。Order By句には、CompanyKanaを指定して得意先の読みの順に並べ替えます。
行28では、OleDbDataAdapterのFill()メソッドでSelectステートメントを実行して、DataSetに得意先テーブルを格納します。行29-30では、DataGridのDataSourceプロパティにDataSetを設定して、DataBind()メソッドでバインドしています。
12: Sub BindData(Optional strKana As String =
"")
13: Dim strSQL As String
14: If strKana = String.Empty Then
15: strSQL = "Select
Left(CompanyKana,3) As Kana, CompanyName, ContactName, Phone
From
Customers" _
16: &
" Where CompanyKana Like '[アイウエオ]%'" _
17: &
" Order By CompanyKana"
18: Else
19: strSQL = "Select
Left(CompanyKana,3) As Kana, CompanyName, ContactName, Phone
From
Customers" _
20: &
" Where CompanyKana Like '[" & strKana & "]%'" _
21: &
" Order By CompanyKana"
22: End If
::::
28: da.Fill(ds, "Customers")
29: dgrdCustomers.DataSource = ds
30: dgrdCustomers.DataBind()
31: End Sub
DataGridのDataBind()メソッドが実行されると、アイテムが作成されたときにOnItemCreatedイベントが発生します。このイベントでは、DataGridのフッタに50音のLinkButtonを表示します。行34-37では、ア行、カ行、・・・の文字列を定義しています。ここで定義した文字列は、LinkButtonのCommandArgumentプロパティに設定します。行41-60は、ItemTypeがFooterのときに実行されます。行41では、TableCellCollectionのClear()メソッドでフッタのセルを削除しています。行42-43では、TableCellを生成してフッタに追加しています。ここで追加したTableCellのColumnSpanプロパティには4を設定して結合しています。
行45-47では、LiteralControlを生成してTableCellに追加しています。LiteralControlのTextプロパティには「ページング：」が設定されていますので、フッタに表示されます。このようにTableCellにテキスト文字を追加するときは、LiteralControlを使用します。行48-60のFor…Nextでは、ア行、カ行、・・・のLinkButtonを生成してTableCellに追加しています。LinkButtonのCommandNameプロパティには、kanaを設定しています。CommandArgumentプロパティには、SelectステートメントのWhere句で使用するフィルタ条件を設定します。たとえば、ア行のLinkButtonのときは「アイウエオ」が設定されます。LinkButtonの前後には、LiteralControlで生成した[]が表示されます。
33: Sub dgrdCustomers_ItemCreated(s As Object, e As
DataGridItemEventArgs)
34: Dim astrKana As String() = {"アイウエオ","カキクケコガギグゲゴ", _
35: "サシスセソザジズゼゾ","タチツテトダヂズデド","ナニヌネノ", _
36: "ハヒフヘホバビブベボパピプペポ","マミムメモ","ヤユヨ", _
37: "ラリルレロ","ワヲン"}
40: If e.Item.ItemType =
ListItemType.Footer Then
41: e.Item.Cells.Clear()
42: Dim tc As New
TableCell()
43: tc.ColumnSpan = 4
44: e.Item.Cells.Add(tc)
45: Dim lcKana As New
LiteralControl()
46: lcKana.Text = "ページング: "
47:
tc.Controls.Add(lcKana)
48: For i=0 To
astrKana.Length-1
49: Dim lb As
New LinkButton()
50: Dim lcLeft
As New LiteralControl()
51: Dim
lcRight As New LiteralControl()
52:
lcLeft.Text = "["
53:
lcRight.Text = "] "
54: lb.Text =
left(astrKana(i),1)
55:
lb.CommandName = "kana"
56:
lb.CommandArgument = astrKana(i)
57:
tc.Controls.Add(lcLeft)
58:
tc.Controls.Add(lb)
59:
tc.Controls.Add(lcRight)
60: Next
61: End If
62: End Sub
DataGridのフッタから50音のLinkButtonをクリックすると、OnItemCommandイベントが発生します。このイベントでは、CommandNameプロパティを参照してどのLinkButtonがクリックされたか調べます。CommandNameに”kana”が格納されているときは、Sub BindData()を呼び出してDataGridに得意先テーブルをバインドします。Sub BindData()の引数には、CommandArgumentプロパティの値を指定します。CommnadArgumentには、SelectステートメントのWhere句に指定するフィルタ条件が格納されています。
64: Sub dgrdCustomers_ItemCommand(s As Object, e As
DataGridCommandEventArgs)
65: If e.CommandName =
"kana" Then
66:
BindData(e.CommandArgument)
67: End If
68: End Sub