フィルタリング (igGrid)

概要

igGrid のフィルタリング機能によりユーザーは、データを Excel 形式でフィルターすることができます。

注: フィルタリングは、任意の jQuery UI ウィジェットのライフサイクルに従う、jQuery UI ウィジェットとして実装されます。

このトピックの内容

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

• フィルタリングの永続化
• モードのフィルタリング
• 構成と検討事項
• フィルタリングを有効にする
• リモート フィルタリング
• 列の設定
• クライアント側イベント
• API の使用
• デフォルトの条件一覧
• フィルタリング オプションのリスト (プロパティ)
• カスタム フィルタリング条件
• CSS クラスのフィルタリング
• キーボード操作
• 重大な変更点
• 関連コンテンツ

フィルタリングの永続化

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

注: フィルタリングの永続化はデフォルトで True です。これは重大な変更です。

igGridFiltering を有効する場合、persist モードで使用されます。dataBind() への呼び出しの後、UI およびデータ ソース ビューで永続化が適用されます。フィルター エディターはクリアされなく、データ ソースのフィルターも残ります。

フィルタリングの永続化は igHierarchicalGrid にも実装されています。

以下のサンプルは、フィルター機能の永続化機能を紹介します。

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

JavaScript の場合:

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

モードのフィルタリング

モード オプションは、詳細と簡易の 2 つの値を取ります。簡易フィルタリング モードを設定すると、該当する列ヘッダー セルの下、列ヘッダーごとにすべてのフィルターが描画されます。詳細フィルタリングを構成すると、詳細フィルタリング ボタンが列ヘッダー テキストの隣に描画されます (デフォルト)。詳細ボタンをクリックすると、より複雑なフィルタリング条件が使用できる「詳細」フィルタリング ダイアログが表示されます。

構成と検討事項

• すべてのフィルター行条件は常に「AND」演算子で結合されています。
• 詳細フィルタリング ダイアログは、複数のフィルターを結合するため「AND」演算子または「OR」演算子を公開しています。
• また詳細フィルター ダイアログでは、複数のフィルターを 1 つの列に設定できます。
• 実際のデータ フィルタリングは igDataSource コントロールを介して単独で行われます。
• デフォルトでは、式 URL キーが設定されていない場合、igDataSource フィルタリング機能と同様に oData エンコードを想定しています。
• フィルター行は、キーボード上の TAB キーと Shift-TAB キーでナビゲートできます。
• フィルター ドロップダウンにフォーカスされている場合、ENTER キーをオープンでき、フィルター ドロップダウン項目は上下矢印キーでナビゲートできます。
• 他のグリッド機能が「UI ダーティな」イベントをトリガーする (ページングが有効な場合にページ サイズが変更されるなど) と必ず、デフォルトと異なるすべての UI プリセットは、フィルタリングにより自動的にクリアされます。
• 複数のフィルタリング条件を同じ列に構成するには、フィルタリング モードが詳細に設定されている場合、詳細フィルター ダイアログからそれらの条件を追加する必要があります。
• 詳細フィルタリングを使用し、詳細ダイアログ フィルター行で列を最初の列から選択すると必ず、条件付きの 2 番目の列は、列タイプに応じて自動的に更新されます。したがって、列が数値列の場合、数値条件のみが一覧されるといった具合です。さらに 3 番目の列エディターが更新されると、その列が日付列の場合、正規の入力要素ではなく date ピッカーが描画されます。
• モード「簡易」と結合された filterDelay オプションは、エンド ユーザーの作業をシームレスに行うために重要な役割を果たします。遅延時間が長くなるほど、フィルター要求をトリガーする前にエンド ユーザーがフィルター入力を行うことができる時間が増えます。
• フィルタリングを使用する場合は、正しい列タイプを設定することが非常に重要です。列タイプが正しく構成されていないと、数値列を「string」型またはその逆に設定する場合など、予期しないエラーまたは動作が行われる可能性があります。
• caseSensitive オプションを true に設定すると、フィルタリングで大文字と小文字を区別することもできます。このオプションはローカル フィルタリングのみで動作します。

dataFiltering イベント関数から現在の式オブジェクトのリストを取得できます。

JavaScript の場合:

$(document).delegate("#grid1", "iggridfilteringdatafiltering", function (evt, ui) {
    var expressions = ui.expressions;
}

図 1: 簡易フィルタリング (モード:「簡易」)

図 2: 詳細フィルタリング (モード:「詳細」)

図 3: 詳細フィルタリング ダイアログ

図 4: フィルタリング ツールチップ (モード:「詳細」)

フィルタリングを有効にする

フィルタリングを開始するには、まず必要な JavaScript および CSS の依存関係を組み込む必要があります。必要な依存関係を組み込む最も簡単な方法は、スクリプトとスタイルを組み合わせて縮小したものを使用することです。

リスト 1: アプリケーションへの組み込みに必要な CSS 参照および JavaScript 参照

HTML の場合:

<link type="text/css" href="infragistics.theme.css" rel="stylesheet" />
<link type="text/css" href="infragistics.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="infragistics.core.js"></script>
<script type="text/javascript" src="infragistics.lob.js"></script>

リスト 2: 縮小も結合もしていない CSS 参照および JavaScript 参照の最小セット - フィルタリングにのみ必要

HTML の場合:

<script type="text/javascript" src="infragistics.util.js"></script>
<script type="text/javascript" src="infragistics.util.jquery.js"></script>
<script type="text/javascript" src="infragistics.dataSource.js"></script>
<script type="text/javascript" src="infragistics.ui.shared.js"></script>
<script type="text/javascript" src="infragistics.ui.popover.js"></script>
<script type="text/javascript" src="infragistics.ui.editors.js"></script>
<script type="text/javascript" src="infragistics.ui.grid.framework.js"></script>
<script type="text/javascript" src="infragistics.ui.grid.shared.js"></script>
<script type="text/javascript" src="infragistics.ui.grid.filtering.js"></script>

リスト 3 は、グリッド フィルタリングの構成に使用するサンプル コードを示します。

リスト 3: フィルタリングのサンプル グリッド コード

JavaScript の場合:

//Basic filtering on client
$("#myGrid").igGrid({
    dataSource: "/GetCensusData/",
    columns: [
        { headerText: "State", key: "StateName" },
        { headerText: "Congressional District", key: "CongressionalDistrict" },
        { headerText: "Population", key: "TotalPopulation" }
    ]
    features:[
        {
            name: "Filtering", 
            allowFiltering: true,
            caseSensitive: false,
            columnSettings: [
                {columnKey: "StateName", allowFiltering: false} 
            ]            
        }
    ]
});

リスト 4: サンプル JSON 応答

JavaScript の場合:

[
   {"AverageFamilySize":3.36, "AverageHouseholdSize":2.91, "CongressionalDistrict":"14", "StateName": "Illinois", "TotalPopulation":720663},
   {"AverageFamilySize":3.00, "AverageHouseholdSize":2.43, "CongressionalDistrict":"15", "StateName": "Illinois", "TotalPopulation":595833},
   {"AverageFamilySize":3.16, "AverageHouseholdSize":2.67, "CongressionalDistrict":"16", "StateName": "Illinois", "TotalPopulation":691356}
]

リスト 5: グリッドのインスタンス化に必要な HTML 要素

HTML の場合:

<table id="myGrid"></table>

詳細フィルターのサンプル

リスト 6: Ignite UI for MVC で使用する Razor または CSHTML マークアップ

Razor の場合:

@Html.Infragistics().Grid(Model).ID("grid1").PrimaryKey("ProductID").Height("400px").Columns(column =>
    {
        column.For(x => x.ProductID).HeaderText("Product ID").DataType("number");
        column.For(x => x.Name).HeaderText("Product Name");
        column.For(x => x.ModifiedDate).HeaderText("Modified Date");
        column.For(x => x.ListPrice).HeaderText("List Price");
    }).Features(features => {
        features.Filtering().Mode(FilterMode.Advanced);
    })
    .DataSourceUrl(Url.Action("GridGetData"))
    .DataBind()
    .Render()
)

リモート フィルタリング

フィルタリングをリモートに構成している場合 (type オプションが remote に設定されているなど)、エンド ユーザー アクションに基づいて (あるいは、プログラムによるフィルタリングを実行している場合は渡されたパラメーターに基づいて) すべてのフィルタリング式が自動的にエンコードされるよう、URL が自動的に構成されます。filterExprUrlKey が指定されていない場合、oData URI 規則がエンコードで自動的に使用されます。

注: oData URI 規則の詳細については、http://www.odata.org/documentation/odata-version-2-0/uri-conventions/ をご覧ください。

それ以外の場合は、グリッドは以下の方法でフィルタリング情報をエンコードします (例)。

http://<SERVER>/grid/GridGetData? filter(Name)=startsWith(a)&filter(ModifiedDate)=today()&filterLogic=AND

Ignite UI for MVC を使用して LINQ (IQueryable) 経由でサーバー側データをバインドする場合、URL にエンコードされたすべてのフィルタリング情報は自動的に LINQ 式の句 (Where 句) に変換されるため、データをフィルターするのに余分な作業は必要ありません。

列の設定

列設定にはそれぞれ、特定の列に適用される、つまり columnKey プロパティで指定されたカスタム オプションが含まれています。表 1 に、columnSettings オプションの一部である単一オブジェクトに設定できるすべての使用可能なプロパティを示します。

注: columnSettings オプションは表 1 に一覧されたオブジェクトの配列です。

表 1: igGridFiltering columnSettings

リスト 7: 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: 'Filtering',
                columnSettings: [
                    {columnKey: 'ProductID', condition: “startsWith” }
                ]
            }
        ]
    });

クライアント側イベント

2 種類の方法でクライアント側イベントのフィルタリングにバインドできます。これはそれぞれ、リスト 8 とリスト 9 に記載します。リスト 8 に記載したアプローチでバインドする場合、jQuery on() メソッドを使用する必要があります。

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

JavaScript の場合:

$("#grid1").on("iggridfilteringdatafiltered", handler);

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

JavaScript の場合:

    $(function () {
        $("#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: 'Filtering',
                    dataFiltering: handler
                }
            ]
        });
    });

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

    }

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

表 2: クライアント側イベントのフィルタリング

API の使用

グリッドをプログラムでフィルターするためには、igGridFiltering ウィジェットで filter() 関数を呼び出す必要があります。フィルター関数は次のように定義されます。

filter(expressions, updateUI)

expressions 引数は式オブジェクトの配列です。リスト 10 は、各式オブジェクトの構造の概要を示しています。updateUI 引数はオプションで、グリッドがプログラムでフィルターされたときに UI が更新されないよう、明示的に false に設定できます。

リスト 10: 式オブジェクト構造のフィルタリング

JavaScript の場合:

{
    expr: <filter expression string>,
    cond: [<filtering condition>](#default-conditions-list),
    fieldName: [<column key>](https://jp.igniteui.com/help/api/2023.2/ui.iggrid#options:columns.key)
}

リスト 11 とリスト 12 は、igGridFiltering ウィジェットの filter() 関数の使用例を示しています。

リスト 11: ProductID = 1 によるフィルター

JavaScript の場合:

$("#grid1").igGridFiltering('filter', ([{ fieldName: "ProductID", expr: 1, cond: "equals"}]));

リスト 12: ProductID = 1 および ProductName startsWith “a” によるフィルター

JavaScript の場合:

$("#grid1").igGridFiltering('filter', ([{ fieldName: "ProductID", expr: 1, cond: "equals"}, {fieldName: "ProductName", expr: "a", cond: "startsWith"} ]));

リスト 13: 適用したフィルタリング式を取得

Javascript の場合:

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

デフォルトの条件一覧

以下の条件 (データ タイプ別) は、グリッドでフィルタリングするときに使用できます。

• 文字列
  • startsWith
  • endsWith
  • contains
  • doesNotContain
  • equals
  • doesNotEqual
  • null
  • notNull
  • empty
  • notEmpty
• 数値
  • equals
  • doesNotEqual
  • greaterThan
  • lessThan
  • greaterThanOrEqualTo
  • lessThanOrEqualTo
  • null
  • notNull
  • empty
  • notEmpty
• ブール値
  • true
  • false
  • null
  • notNull
  • empty
  • notEmpty
• 日付
  • on
  • notOn
  • after
  • before
  • today
  • yesterday
  • thisMonth
  • lastMonth
  • nextMonth
  • thisYear
  • lastYear
  • nextYear
  • null
  • notNull
  • empty
  • notEmpty
• 時刻
  • at
  • notAt
  • before
  • after
  • atBefore
  • atAfter
• オブジェクト
  • null
  • notNull
  • empty
  • notEmpty

フィルタリング オプションのリスト (プロパティ)

オプションとデフォルト値は括弧内に示します

カスタム フィルタリング条件

ローカル モード (type="local") のフィルター機能で、列ごとにカスタムのフィルター条件を定義します。 カスタムの条件は指定の列の条件リスト (列のデータ型によるデフォルトの条件の後) に追加され、データを処理するためのカスタム比較演算子フィルター関数の設定を可能にします。 条件は関連する列の列設定で customConditions オプションを使用して定義します。 割り当てられた値は、各プロパティ名が一意の条件キーを、カスタムの条件宣言が値を表すオブジェクトである必要があります。

条件の動作および表示を調整する更なるオプションがサポートされます:

• requireExpr - 条件にフィルター式を入力する必要があるかどうかを指定します。
• labelText - 列の条件ドロップダウンに表示されるラベル テキストを指定します。
• expressionText - requireExpr が false の場合、条件をドロップダウンで選択するとエディタに表示されるテキストを指定します。
• filterImgIcon - simple フィルター モードでドロップダウン項目に適用される css クラスを指定します。

• filterFunc - 条件が適用された場合に使用される、カスタムの比較演算子フィルター関数 (または関数名) を指定します。

  コード例 14: カスタム条件の使用例とサンプル

JavaScript の場合:

$("#grid1").igGrid({
   columns: [ 
                { headerText: "Employee ID", key: "EmployeeID", dataType: "string", hidden: true },
                { headerText: "First Name", key: "FirstName", dataType: "string" },
                { headerText: "Last Name", key: "LastName", dataType: "string" },
                { headerText: "Register Date", key: "RegistererDate", dataType: "date" },
                { headerText: "Country", key: "Country", dataType: "string" },
                { headerText: "Age", key: "Age", dataType: "number" },
                { headerText: "Is Active", key: "IsActive", dataType: "bool" }
            ],
    dataSource: employees,
    width: '500px',
    dataSource: products,
    features: [
        {
            name: 'Filtering',
            columnSettings: [
               {
                     columnKey: "Country",
                     customConditions: {
                        USA: {
                             labelText: 'USA',
                             expressionText: "USA",
                             filterFunc: function(value, expression, dataType, ignoreCase, preciseDateFormat) {  return value === "USA";}
                        },
                        Canada:{
                              labelText: 'Canada',
                              expressionText: "Canada",
                              filterFunc: function(value, expression, dataType, ignoreCase, preciseDateFormat) {  return value === "Canada";}
                        }
                     }
                }
            ]
        }
    ]
});

サンプル:

CSS クラスのフィルタリング

キーボード操作

簡易フィルタリング モードが有効な場合、以下のキーボード操作が可能です。

グリッドにフォーカスがある場合:

• TAB: フィルタリング UI のフォーカス可能な要素間でフォーカスを移動: [フィルタリング] ボタンおよびエディター。 [フィルタリング] ボタンにフォーカスがある場合:
• ENTER/SPACE: フィルタリング条件ドロップダウンを開く。ドロップダウンで利用可能な項目を UP/DOWN キー移動できます。
• UP/DOWN: セルのアクティブなフィルタリング条件の変更。
• TAB: フィルタリング エディター要素へフォーカスを移動。

詳細フィルタリング モードが有効な場合、以下のキーボード操作が可能です。

グリッドにフォーカスがある場合:

• TAB: 最初の [フィルター] ボタンへフォーカスを移動。 フィルター ボタンにフォーカスがある場合:
• ENTER: 詳細フィルター ダイアログを開く。
• TAB: ページの次の [フィルター] ボタンまたは次のフォーカス可能な要素へ移動。

詳細フィルター ダイアログにフォーカスがある場合:

• TAB: ダイアログの要素間でフォーカスを移動。
• ESCAPE: ダイアログを閉じる。

注: 列選択ドロップダウンと条件ドロップダウンは異なります。一つは igCombo でもう一つは標準 <select> 要素です。<select> 要素は、SPACE/ENTER を開き、そのコンテンツは UP/DOWN キーで移動、ENTER キーで選択できます。igCombo は Enter/Space キーでは開けません。値は、UP/DOWN キーで直接変更できます。

重大な変更点

• 動作の変更

デフォルトのフィルタリング条件 (列データタイプに基づく) またはフィルタリング columnSettings の condition オプションで明示的に設定した条件がドロップダウン条件リストから選択できるようになりました。唯一の例外は列で、デフォルト (または明示的に設定した) 条件で Boolean 列や「今日」、「昨日」、「今月」などの条件を含む日付列などのユーザー入力を要求しません。エンドユーザーは、適用するために明示的に選択する必要があります。

• DOM 構造の変更

フィルタリング ドロップダウン条件リストの DOM 構造が変更されました。18.2 以前のバージョンでは、各列ごとに div 要素が描画されました。18.2 バージョン以降、パフォーマンスの改善を目的にすべての列で 1 つの div 要素のみ描画するようになりました。

関連コンテンツ

トピック

• igGrid の概要

サンプル

• フィルタリング