並べ替えの概要 (igGrid)

概要

igGrid コントロールの並べ替え機能では、1 つまたは複数の列を昇順または降順に並べ替えることができます。

このトピックの内容

このトピックは、以下のセクションで構成されます。

• 並べ替えの永続化
• 並べ替えモード
• 構成と検討事項
• 並べ替えを有効にする
• 列の設定
• リモート並べ替え
• API の使用
• クライアント側イベント
• 並べ替えオプション
• 並べ替え CSS クラスのリスト
• 関連コンテンツ

並べ替えの永続化

igGrid バインディングの間に並べ替えの永続化は 14.1 リリースの新機能です。以前のデフォルト動作を置き換えます。

注: 並べ替えの永続化はデフォルトで true です。これは重大な変更です。

igGridSorting を有効する場合、persist モードで使用されます。dataBind() への呼び出しの後、UI およびデータ ソース ビューで永続化が適用されます。並べ替えインジケーターおよび CSS クラスは適用し、データ ソースの並べ替えも残ります。

並べ替えの永続化は igHierarchicalGrid にも実装されています。

以下のサンプルは、並べ替え機能の永続化機能を紹介します。

ユーザーが igGrid を再バインドした後に並べ替えをクリアする以前の動作に戻るには、persist オプションで機能を無効できます。以下はコード スニペットです。

JavaScript の場合:

features: [
  { 
     name: "Sorting", 
     persist: false 
  }
]

並べ替えモード

並べ替えは、ローカルまたはリモートで操作するよう構成できます。ローカルの場合、並べ替えは、サーバー要求を行わなくても完全にクライアント側で行われます。リモート並べ替えの場合は、サーバーが並べ替える必要がある列の情報を取得できるよう、グリッドは必要な URL パラメーターをエンコードします。

構成と検討事項

• 並べ替えは、1 つまたは複数の列を並べ替えるよう構成できます。並べ替えモードは、モード オプションを single または multiple に変更して管理します。
• 複数並べ替えでは並べ替えを削除できます。
• 並べ替えを解除したい igGrid 列のヘッダーを SHIFT キーを押しながらクリックすることにより列の並べ替えを解除できます。
• 複数並べ替えダイアログは、列の並べ替え順を示します。並べ替えダイアログ リストの先頭には、最後に並べ替えた列が表示され、以前並べ替えた列が下に移動します。これにより、行った並べ替えに履歴がリストに残ると同時に第 2、第 3 およびそれ以降の並べ替え順列も示します。並べ替えダイアログ固有プロパティおよびイベントの詳細は、「複数並べ替えダイアログ」のトピックを参照してください。
• columnSettings オブジェクトを変更して、列レベルで並べ替えを管理できます。たとえば、特定の列の並べ替えを無効にしたり、デフォルトで昇順に並べ替えるように指定できます。
• caseSensitive オプションを true に設定すると、並べ替えで大文字と小文字を区別することもできます。このオプションはローカルでの並べ替えのみで動作します。
• 並べ替えウィジェットは、いったんインスタンス化されると、ソート インジケーターなど、アクティブ、フォーカス、ソートなど各種スタイルが適用できるようにするマークアップを注入することで、列ヘッダーを変更します。
• 並べ替えは、任意の jQuery UI ウィジェットのライフサイクルに従う、jQuery UI ウィジェットとして実装されます。
• グリッド フレームワークは、並べ替えウィジェットの作成と破棄を行います。
• 並べ替え可能なすべての列は並べ替えと、キーボードの TAB キーおよび Shift+TAB キーを使用してナビゲートが可能です。

図 1: igGrid コントロール並べ替え UI

並べ替えを有効にする

以下のサンプルは、並べ替え機能を有効にする方法を示します。

以下のコード スニペットは、ASPX (MVC) で並べ替えを有効にする方法を示します。

ASPX (MVC) の場合:

<%= Html.Infragistics().Grid(Model).ID("grid1").Columns(column =>
    {
        column.For(x => x.EmployeeID).HeaderText("Employee ID").Width("15%");
        column.For(x => x.FirstName).HeaderText("First Name").Width("20%");
        column.For(x => x.LastName).HeaderText("Last Name").Width("20%");
        column.For(x => x.BirthDate).HeaderText("Birth Date").Width("15%");
        column.For(x => x.City).HeaderText("City").Width("15%");
        column.For(x => x.PostalCode).HeaderText("Postal Code").Width("15%");
    }).Features(features => {
        features.Sorting().Type(OpType.Local).CaseSensitive(true);
    })
    .Height("500")
    .DataSourceUrl(Url.Action("PagingGetData"))
    .DataBind()
    .Render()%>

カスタム ソート関数を提供する場合、customSortFunction オプションを参照してください。

列の設定

列はそれぞれ、表 1 に記載された columnSettings オプションで構成できます。

表 1: columnSettings オブジェクト

JavaScript の場合:

$("#grid1").igGrid({
    columns: [
        { headerText: "Product ID", key: "ProductID", dataType: "number" },
        { headerText: "Product Name", key: "Name", dataType: "string" },
        { headerText: "Product Number", key: "ProductNumber", dataType: "string" },
    ],
    width: '500px',
    dataSource: products,
    features: [
        {
            name: 'Sorting',
            columnSettings: [
                    {columnKey: 'ProductID', allowSorting: false}
               ]   
        }
    ]
});

リモート並べ替え

sortUrlKey オプションを設定して並べ替えを行うときに、URL のエンコード方法を管理できます。sortUrlKey のデフォルト値は null であるため、エンコードは次に記載された URI フォーマットの oData 規格に従っています。

http://www.odata.org/documentation/odata-version-2-0/uri-conventions/

API の使用

列をプログラムで並べ替えるには、次の方法で行うことができます。

リスト 5: プログラムによる列の並べ替え

JavaScript の場合:

$('#grid1').igGridSorting('sortColumn', 'ProductID', 'asc');

適用された並べ替え式はグリッドのデータ ソースから取得できます。コードで取得するには、以下のコードを使用します。

リスト 6: 適用された並べ替え設定の取得

JavaScript の場合:

var expressions = $('#grid1').data('igGrid').dataSource.settings.sorting.expressions;

リスト 7: columnSettings オブジェクトの取得

JavaScript の場合:

var sorting = $('#grid1').data('igGridSorting');
var settings = sorting.options.columnSettings;

クライアント側イベント

2 種類の方法で並べ替え機能へのクライアント側イベントにバインドできます。これはそれぞれ、リスト 8 とリスト 9 に記載します。

リスト 8: アプリケーションの任意の場所からのクライアント側イベントへのバインド

JavaScript の場合:

$("#grid1").bind("iggridsortingcolumnsorted", handler);

注: リスト 8 に記載したアプローチでバインドを行い、並べ替えがまだインスタンス化されていない場合、バインドではなく jQuery delegate メソッドを使用する必要があります。

リスト 9: 並べ替え機能を初期化する場合にイベント名をオプション指定した、クライアント側イベントへのバインド (大文字と小文字を区別)

JavaScript の場合:

$("#grid1").igGrid({
    columns: [
        { headerText: "Product ID", key: "ProductID", dataType: "number" },
        { headerText: "Product Name", key: "Name", dataType: "string" },
        { headerText: "Product Number", key: "ProductNumber", dataType: "string" },
    ],
    width: '500px',
    dataSource: products,
    features: [
        {
            name: 'Sorting',
            columnSorted: handler
        }
    ]
});

//Handler code
function handler(event, args) {

}

注: すべての「ing」イベントはキャンセルできます。「ing」イベントをキャンセルするには、その該当イベント ハンドラーは false を返す必要があります。

グリッド並べ替え機能は、表 2 に示すクライアント側イベントを公開しています。

注: 次の表 2 では、複数並べ替えダイアログに固有のイベントは示しません。それらは、「複数並べ替えダイアログ」のトピックを参照してください。

表 2: 並べ替え機能イベントの引数オブジェクト定義

並べ替えオプション

リスト 3 の表に、並べ替えウィジェットのインスタンス化に使用できるすべての並べ替えオプションをまとめています。

注: 次の表 3 では、複数並べ替えダイアログに固有のプロパティは示しません。それらは、「複数並べ替えダイアログ」のトピックを参照してください。

表 3: 並べ替えウィジェット オプション

並べ替え CSS クラスのリスト

表 4 は、並べ替え UI の各種パーツに適用されたすべての CSS クラスを指定します。ui-state-default、ui-state-active、ui-state-hover、ui-state-focus は jQuery UI CSS フレームワークにより定義されたクラスである点に注意してください。

表 4: 並べ替え UI に適用された CSS クラス

関連コンテンツ

トピック

• igGrid の概要