.NET TIPS

［ASP.NET］DataGridコントロールのソートを双方向にするには？

デジタルアドバンテージ
2003/10/24

　DataGridコントロールのソート機能を使用すれば、グリッドで一覧表示された行を指定された列で並べ替えることができる。このための基本的な記述方法は「TIPS：DataGridコントロールにソート機能を追加するには？」で示しているが、Windowsのエクスプローラでの「詳細」表示のように、列名部分をクリックするたびに昇順／降順の並べ替えを交互に行うようにすればより便利になる。

　「TIPS：DataGridコントロールにソート機能を追加するには？」で示したサンプル・プログラム（sortdg.aspx）に、このような双方向のソート機能を追加したプログラムは次のようになる。太字部分が修正を加えた部分である。

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>

<html>
<head>
  <script runat="server">
    DataTable MakeDataTable() {
      DataSet ds = new DataSet();
      ds.ReadXml("http://www.buildinsider.net/rss");
      return ds.Tables["item"];
    }

    void Page_Load(object s, EventArgs e) {
      if (!IsPostBack) {
        MyGrid.DataSource = MakeDataTable();
        MyGrid.DataBind();
      }
    }

    void MyGrid_Sort(object s, DataGridSortCommandEventArgs e) {

      string sortColumn = e.SortExpression;

      string curSortOrder = (string)ViewState[sortColumn];
      string newSortOrder = "";

      if (curSortOrder == null || curSortOrder == "DESC") {
        newSortOrder = "ASC";
      } else {
        newSortOrder = "DESC";
      }
      ViewState[sortColumn] = newSortOrder;

      DataTable dt = MakeDataTable();
      DataView dv = dt.DefaultView;
      dv.Sort = sortColumn + " " + newSortOrder;

      MyGrid.DataSource = dv;
      MyGrid.DataBind();
    }
  </script>
</head>

<body>
  <form runat="server">
    <asp:DataGrid id="MyGrid"
        AllowSorting="true"
        OnSortCommand="MyGrid_Sort"
        AutoGenerateColumns="false"
        CellPadding="4"
        runat="server" >

      <HeaderStyle BackColor="#BB2255" ForeColor="white"/>
      <ItemStyle   BackColor="#FFEEEE" />
      <AlternatingItemStyle BackColor="#FFDDDD" />

      <Columns>
        <asp:BoundColumn
            SortExpression="title"
            DataField="title" HeaderText="タイトル" />
        <asp:BoundColumn
            SortExpression="pubDate"
            DataField="pubDate" HeaderText="日付" />
      </Columns>

    </asp:DataGrid>
  </form>
</body>
</html>
双方向のソートが可能なC#のサンプル・プログラム（reversedg.aspx）

　このプログラムの実行画面は次のようになる。外見は元のプログラムと変わりないが、リンクボタンとなっている列名をクリックするたびに、昇順／降順の並び替えを切り替えられるようになっている。

サンプル・プログラム（reversedg.aspx）の実行結果
列名部分（「タイトル」や「日付」）をクリックするたびに、昇順／降順の並び替えが切り替わる。この画面は「タイトル」で降順にソートしたところ。

　双方向のソート機能を実現するために追加したコードには2つのポイントが含まれている。

データビューの降順ソート

　まず最初のポイントとなるのは、データソースとしているデータテーブル（DataTableオブジェクト）のデータを降順（逆順）に並べ替えるための記述だ。

　元になったサンプル・プログラム（sortdg.aspx）では、次のようなコードでソートされたデータビュー（DataViewオブジェクト）を作成し、DataGridコントロールのデータソースとしていた。

DataTable dt = MakeDataTable();
DataView dv = dt.DefaultView;
dv.Sort = e.SortExpression;

　この3行目では、e.SortExpressionにデータテーブルの列名が代入されており、実際には、例えば次のようなコードが実行されることになる。

dv.Sort = "title";

　この1行によりデータビュー内の行は「title」列のデータにより「昇順」に並べ替えられるわけだが、この記述は次のものと同等である。

dv.Sort = "title ASC";

　文字列の最後に追加している「ASC」は昇順（ascending）での並べ替えを指定するもので、昇順の場合にはこの「ASC」を省略することができる。

　逆に、データビューを降順（descending）で並べ替えるには、「ASC」の代わりに「DESC」を指定すればよい。

dv.Sort = "title DESC";

列ごとの並べ替え方向の保持

　グリッドの列名がクリックされるたびに並べ替えの方向を反転させるためには、列ごとに現在の方向（昇順か降順か）を、セッションをまたがって保持しておく必要がある。これが第2のポイントだ。今回はその保存場所としてページのViewStateプロパティを使用している。

　ViewStateプロパティは、キーとそれに対する値のペアを複数保持することができる。今回のプログラムでは、列名がクリックされたときに「e.SortExpression」により得られるソート対象となる列の名前をViewStateプロパティのキーとし、その値として「ASC」あるいは「DESC」という文字列を読み書きしている。これを行っているのが次のコード部分だ。

string sortColumn = e.SortExpression;

string curSortOrder = (string)ViewState[sortColumn];
string newSortOrder = "";

if (curSortOrder == null || curSortOrder == "DESC") {
  newSortOrder = "ASC";
} else {
  newSortOrder = "DESC";
}
ViewState[sortColumn] = newSortOrder;

　これは例えば、「タイトル」列がクリックされたとき、現在のViewState["title"]の値が「DESC」であれば、それを「ASC」に反転して保存する。なお、上記のコードで「curSortOrder == null」となるのはページが初めてアクセスされた場合だ。

　そして続く次のコードにより、いまの例ではデータビューのSortプロパティに「title ASC」を設定して、データソースとなるデータのソートを行なう。

DataTable dt = MakeDataTable();
DataView dv = dt.DefaultView;
dv.Sort = sortColumn + " " + newSortOrder;

■

　以上でグリッドの行を双方向にソートできるようになったが、これだけでは現在どの列でどちらの方向に並べ替えが行われているのかが分かりにくい。この対処については「TIPS：［ASP.NET］DataGridコントロールのヘッダーにソートされた方向を表示するには？」で解説している。End of Article

カテゴリ：Webフォーム　処理対象：DataGridコントロール
使用ライブラリ：DataGridコントロール
関連TIPS：［ASP.NET］DataGridコントロールにソート機能を追加するには？
関連TIPS：［ASP.NET］DataGridコントロールのヘッダーにソートされた方向を表示するには？
　
この記事と関連性の高い別の.NET TIPS
［ASP.NET］DataGridコントロールにソート機能を追加するには？
［ASP.NET］GridViewコントロールのヘッダにソート方向を表示するには？
WPF：DataGridやListViewなどにデータをソートして表示するには？
［ASP.NET］DataGridコントロールのヘッダーにソートされた方向を表示するには？
［ASP.NET］DataGridコントロールの列を実行時に表示／非表示するには？
このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回　簡潔なコーディングのために （2017/7/26）
    　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
    　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回　明瞭なコーディングのために （2017/7/19）
    　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator （2017/7/18）
    　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Insider.NET 記事ランキング

本日 月間
＠IT