最近、ASP.net 2.0 の GridView コントロールを使用しているときに、Microsoft によって実装された並べ替えとページングの機能が非常に単純であることがわかりました。たとえば、並べ替えでは、列名をクリックしてから並べ替えを行うと、ページ全体のポストバックがトリガーされます。列ヘッダーにアイコンが表示されていないと、アイコンを使用するときに昇順か降順かが分からず混乱してしまいます。そこで、今日解決すべき最初の問題は、アイコンを表示することです。解決すべき 2 番目の問題は、デフォルトでは、GridView は 1 つの列でのみ並べ替えることができます。つまり、複数の列で並べ替えることはできません。実際のアプリケーションでは、1 つの列だけで並べ替えることはビジネスに対応できません。 3 番目の問題は、GridView の事前定義されたページングのページ番号表示です。これは比較的単純ですが、実際のアプリケーションでは、ページングはホーム ページ、前のページ、次のページ、最後のページ、または数値のページ番号を表示するだけではない場合があります。ジャンプするには、現在のページ番号、総ページ数など、より詳細な情報が必要です。
まず、GridView の複数列の並べ替えと並べ替えアイコンの表示。
まず、新しいクラス ライブラリ プログラムを作成します。次に、このクラスは GridView コントロールを継承します。一部のメソッドを再構築するだけで済みます。
このデモの例では、単一列の並べ替えを使用しています。複数列の並べ替えが有効になっている場合は、コントロールのAllowMultiColumnSorting を True に設定して、複数列の並べ替えを実現します。
1 パブリック クラス WebGridView:GridView
2 {
3 属性#地域属性
4 /**//// <概要>
5 /// 複数列のソートを有効にするか無効にするか
6 /// </まとめ>
7 [
8 説明("複数列ソート機能を有効にするかどうか"),
9 カテゴリ(「並べ替え」)、
10 デフォルト値("false")、
11]
12 public boolAllowMultiColumnSorting
13 {
14 ゲット
15 {
16 オブジェクト o = ViewState["EnableMultiColumnSorting"];
17 return (o != null ? (bool)o : false);
18}
19セット
20 {
21AllowSorting = true;
22 ViewState["EnableMultiColumnSorting"] = 値;
23 }
24 }
25 /**//// <概要>
26 /// アイコンを昇順に表示します
27 /// </まとめ>
28 [
29 説明("昇順ソート時にアイコンを表示"),
30 カテゴリ(「並べ替え」)、
31 Editor("System.Web.UI.Design.UrlEditor", typeof(System.Drawing.Design.UITypeEditor)),
32 デフォルト値("")、
33
34]
35 パブリック文字列 SortAscImageUrl
36 {
37 ゲット
38 {
39 オブジェクト o = ViewState["SortImageAsc"];
40 return (o != null ? o.ToString() : "");
41 }
42セット
43 {
44 ViewState["SortImageAsc"] = 値;
45 }
46 }
47 /**//// <概要>
48 /// アイコンを降順に表示します
49 /// </概要>
50[
51 説明("アイコンを降順で表示"),
52 カテゴリ(「並べ替え」)、
53 Editor("System.Web.UI.Design.UrlEditor", typeof(System.Drawing.Design.UITypeEditor)),
54 デフォルト値("")、
55]
56 パブリック文字列 SortDescImageUrl
57 {
58 ゲット
59 {
60 オブジェクト o = ViewState["SortImageDesc"];
61 return (o != null ? o.ToString() : "");
62 }
63セット
64 {
65 ViewState["SortImageDesc"] = 値;
66 }
67 }
68 #エンドリージョン
69 オーバーライドメソッド#region オーバーライドメソッド
70 保護されたオーバーライド void OnSorting(GridViewSortEventArgs e)
71 {
72 if (AllowMultiColumnSorting)
73 {
74 e.SortExpression = GetSortExpression(e);
75 }
76
77 ベース.OnSorting(e);
78 }
79 保護されたオーバーライド void OnRowCreated(GridViewRowEventArgs e)
80 {
81 if (e.Row.RowType == DataControlRowType.Header)
82 {
83 if (SortExpression != String.Empty)
84 {
85 DisplaySortOrderImages(SortExpression, e.Row);
86 this.CreateRow(0, 0, DataControlRowType.EmptyDataRow, DataControlRowState.Normal);
87 }
88}
89 ベース.OnRowCreated(e);
90}
91 #エンドリージョン
92 保護されたメソッド #region 保護されたメソッド
93 /**//// <概要>
94 /// ソート式を取得
95 /// </概要>
96 保護された文字列 GetSortExpression(GridViewSortEventArgs e)
97 {
98 文字列[]ソート列 = null;
99 文字列ソート属性 = ソート式;
100
101 if (sortAttribute != String.Empty)
102 {
103 sortColumns = sortAttribute.Split(",".ToCharArray());
104 }
105 if (sortAttribute.IndexOf(e.SortExpression) > 0 || sortAttribute.StartsWith(e.SortExpression))
106 {
107 ソート属性 = ModifySortExpression(sortColumns, e.SortExpression);
108 }
109 その他
110 {
111 sortAttribute += String.Concat(",", e.SortExpression, " ASC ");
112 }
113 return sortAttribute.TrimStart(",".ToCharArray()).TrimEnd(",".ToCharArray());
114
115 }
116 /**//// <概要>
117 /// ソート順を変更する
118 /// </概要>
119 保護された文字列 ModifySortExpression(string[] sortColumns, string sortExpression)
120{
121 文字列 ascSortExpression = String.Concat(sortExpression, " ASC ");
122 文字列 descSortExpression = String.Concat(sortExpression, " DESC ");
123
124 for (int i = 0; i < sortColumns.Length; i++)
125 {
126
127 if (ascSortExpression.Equals(sortColumns[i]))
128 {
129 ソート列[i] = descSortExpression;
130 }
131
132 else if (descSortExpression.Equals(sortColumns[i]))
133 {
134 Array.Clear(sortColumns, i, 1);
135 }
136 }
137
138 return String.Join(",", sortColumns).Replace(",,", ",").TrimStart(",".ToCharArray());
139
140 }
141 /**//// <概要>
142 /// 選択した列をソートするための現在の式を取得します
143 /// </概要>
144 protected void SearchSortExpression(string[] sortColumns, string sortColumn, out string sortOrder, out int sortOrderNo)
145 {
146 ソート順序 = "";
147 ソートオーダー番号 = -1;
148 for (int i = 0; i < sortColumns.Length; i++)
149 {
150 if (sortColumns[i].StartsWith(sortColumn))
151 {
152 ソートオーダー番号 = i + 1;
153 if (マルチ列ソートを許可)
154 {
155 ソートオーダー = ソート列[i].Substring(sortColumn.Length).Trim();
156 }
157 その他
158 {
159 sortOrder = ((SortDirection == SortDirection.Ascending) ? "ASC" : "DESC");
160 }
161 }
162 }
163 }
164 /**//// <概要>
165 /// 昇順と降順で絵を描く
166 /// </概要>
167 保護された void DisplaySortOrderImages(string sortExpression, GridViewRow dgItem)
168 {
169 文字列[] sortColumns = sortExpression.Split(",".ToCharArray());
170
171 for (int i = 0; i < dgItem.Cells.Count; i++)
172 {
173 if (dgItem.Cells[i].Controls.Count > 0 && dgItem.Cells[i].Controls[0] は LinkButton)
174 {
175 文字列ソート順序;
176 int ソート順序番号;
177 文字列列 = ((LinkButton)dgItem.Cells[i].Controls[0]).CommandArgument;
178 SearchSortExpression(sortColumns, 列, out sortOrder, out sortOrderNo);
179 if (sortOrderNo > 0)
180{
181 文字列sortImgLoc = (sortOrder.Equals("ASC") ? SortAscImageUrl : SortDescImageUrl);
182
183 if (sortImgLoc != String.Empty)
184 {
185 画像 imgSortDirection = new Image();
186 imgSortDirection.ImageUrl = ソートImgLoc;
187 dgItem.Cells[i].Controls.Add(imgSortDirection);
188
189 }
190 その他
191 {
192
193 if (マルチ列ソートを許可)
194 {
195 リテラル litSortSeq = new Literal();
196 2019.10.25 196 196 196
197 dgItem.Cells[i].Controls.Add(litSortSeq);
198
199 }
200 }
201 }
202 }
203 }
204
205 }
206 #エンドリージョン
207 }
2 番目: 詳細なページング情報の表示。この関数はコントロール フォームにカプセル化されていません。GridView_DataBound イベントで最後のページを直接操作できます。
以下は、複数列の並べ替えおよびページング表示コードのデモンストレーションです。
<script runat="サーバー">
void PageDropDownList_SelectedIndexChanged(オブジェクト送信者、EventArgs e)
{
GridViewRow pagerRow = CustomersGridView.BottomPagerRow;
DropDownList pageList = (DropDownList)pagerRow.Cells[0].FindControl("PageDropDownList");
CustomersGridView.PageIndex = pageList.SelectedIndex;
}
void CustomersGridView_DataBound(オブジェクト送信者、EventArgs e)
{
GridViewRow pagerRow = CustomersGridView.BottomPagerRow;
LinkButton linkBtnFirst = (LinkButton)pagerRow.Cells[0].FindControl("linkBtnFirst");
LinkButton linkBtnPrev = (LinkButton)pagerRow.Cells[0].FindControl("linkBtnPrev");
LinkButton linkBtnNext = (LinkButton)pagerRow.Cells[0].FindControl("linkBtnNext");
LinkButton linkBtnLast = (LinkButton)pagerRow.Cells[0].FindControl("linkBtnLast");
if (CustomersGridView.PageIndex == 0)
{
linkBtnFirst.Enabled = false;
linkBtnPrev.Enabled = false;
}
else if (CustomersGridView.PageIndex == CustomersGridView.PageCount-1)
{
linkBtnLast.Enabled = false;
linkBtnNext.Enabled = false;
}
else if (CustomersGridView.PageCount<=0)
{
linkBtnFirst.Enabled = false;
linkBtnPrev.Enabled = false;
linkBtnNext.Enabled = false;
linkBtnLast.Enabled = false;
}
DropDownList pageList = (DropDownList)pagerRow.Cells[0].FindControl("PageDropDownList");
ラベル pageLabel = (ラベル)pagerRow.Cells[0].FindControl("CurrentPageLabel");
if (pageList != null)
{
for (int i = 0; i < CustomersGridView.PageCount; i++)
{
int ページ番号 = i + 1;
ListItem item = new ListItem(pageNumber.ToString() + "/" + CustomersGridView.PageCount.ToString(), pageNumber.ToString());
if (i == CustomersGridView.PageIndex)
{
item.Selected = true;
}
pageList.Items.Add
(項目)
;
if (ページラベル != null)
{
int currentPage = CustomersGridView.PageIndex + 1;
pageLabel.Text = "現在のページ: " + currentPage.ToString() +
" / " + CustomersGridView.PageCount.ToString();
}
</script>
<html>
<本文>
<form id="Form1" runat="server">
<h3>
GridView PagerTemplate の例</h3>
<asp:WebGridView ID="CustomersGridView" DataSourceID="CustomersSqlDataSource" AutoGenerateColumns="true"
AllowPaging="true" OnDataBound="CustomersGridView_DataBound" SortAscImageUrl="~imagesarrow-up.gif" SortDescImageUrl="~imagesarrow-down.gif" runat="server"AllowSorting="True" width="723px ">
<PagerStyle ForeColor="Blue" BackColor="LightBlue" />
<ポケベルテンプレート>
<テーブル幅="100%">
<tr>
<td width="70%">
<asp:Label ID="MessageLabel" ForeColor="Blue" Text="ページ番号:" runat="server" />
<asp:DropDownList ID="PageDropDownList" AutoPostBack="true" OnSelectedIndexChanged="PageDropDownList_SelectedIndexChanged"
runat="サーバー" />
<asp:LinkButton CommandName="Page" CommandArgument="First" ID="linkBtnFirst" runat="server">ホーム</asp:LinkButton>
<asp:LinkButton CommandName="Page" CommandArgument="Prev" ID="linkBtnPrev" runat="server">前のページ</asp:LinkButton>
<asp:LinkButton CommandName="Page" CommandArgument="Next" ID="linkBtnNext" runat="server">次のページ</asp:LinkButton>
<asp:LinkButton CommandName="Page" CommandArgument="Last" ID="linkBtnLast" runat="server">最後のページ</asp:LinkButton>
</td>
<td width="70%" align="right">
<asp:Label ID="CurrentPageLabel" ForeColor="Blue" runat="server" />
</td>
</tr>
</テーブル>
</PagerTemplate>
</asp:WebGridView>
<asp:SqlDataSource ID="CustomersSqlDataSource" SelectCommand="[顧客] から [顧客 ID]、[会社名]、[住所]、[市区町村]、[郵便番号]、[国] を選択します"
ConnectionString="<%$ ConnectionStrings:NorthWindConnectionString%>" runat="server">
</asp:SqlDataSource>
</form>
</body>
</html>