Grid のフィルタリング概要

Angular グリッド フィルタリングを使用すると、指定した基準を満たすレコードのみの表示が可能です。Ignite Ui の Material UI グリッドコンポーネントは、Grid がバインドされているデータコンテナを介して、Angular フィルター機能と広範なフィルター API を提供します。

デモ


インタラクション

特定の列のフィルター行を開くには、ヘッダー下のフィルター チップをクリックします。状態を追加するために入力の左側のドロップダウンを使用してフィルター オペランドを選択し、値を入力します。numberdate 列には、Equals がデフォルトで選択されます。string には 'Contains'、boolean には 'All' が選択されます。'Enter' を押して条件を確定して他の条件を追加できます。条件チップの間にドロップダウンがあり、それらの間の論理演算子を決定します。'AND' がデフォルトで選択されます。条件の削除はチップの X ボタンをクリックします。編集はチップを選択、入力はチップのデータで生成されます。フィルター行が開いているときにフィルター可能な列のヘッダーをクリックして選択し、フィルター条件を追加できます。

列に適用したフィルターがある場合、フィルター行が閉じられるとチップの閉じるボタンをクリックした条件の削除やいずれかのチップを選択してフィルター行を開くことができます。すべての条件を表示するための十分なスペースがない場合、条件数を示すバッジ付きのフィルター アイコンが表示されます。フィルター行を開くためにクリックできます。

使用方法

デフォルトの定義済みフィルタリングおよび標準のフィルタリング条件があり、カスタム実装で置き換えることも可能です。また、カスタム フィルタリング条件を追加することもできます。Grid には、簡易なフィルター UI と詳細なフィルター オプションがあります。列で設定された dataType に基づいて、適切なフィルタリング処理のセットがフィルター UI ドロップダウンに読み込まれます。また、ignoreCase と最初の condition プロパティを設定できます。

フィルタリング機能は、allowFiltering 入力を true に設定すると Grid コンポーネントで有効になります。特定の列でこの機能を無効にするには、filterable インプットを false に設定します。

フィルタリング機能は、allowFiltering 入力を true に設定すると Grid コンポーネントで有効になります。デフォルトの filterModequickFilter で、実行時には変更できません。特定の列に対してこの機能を無効にするには、filterable 入力を false に設定します。

<igx-grid #grid1 [data]="data" [autoGenerate]="false" [allowFiltering]="true">
    <igx-column field="ProductName" dataType="string"></igx-column>
    <igx-column field="Price" dataType="number"></igx-column>
    ...
    <igx-column field="Discontinued" [dataType]="'boolean'" [filterable]="false">
</igx-grid>
Note

string 型の値が dataType Date の列で使用される場合、Grid は値を Date オブジェクトに解析しないためフィルター条件は使用できません。string オブジェクトを使用する場合、値を Date オブジェクトに解析するためのロジックをアプリケーション レベルで実装する必要があります。

列または複数の列は Grid API でフィルターできます。Grid は、このタスクに複数のメソッドを公開します (filterfilterGlobalclearFilter.)。

  • filter - 単一の列または複数の列をフィルターします。

以下の 5 つのフィルタリング オペランド クラスが公開されます。

  • IgxFilteringOperand: カスタムフィルタリング条件の定義時に継承できるベース フィルタリング オペランドです。
  • IgxBooleanFilteringOperand は、boolean 型のすべてのデフォルト フィルタリング条件を定義します。
  • IgxNumberFilteringOperand は、boolean 型のすべてのデフォルト フィルタリング条件を定義します。
  • IgxNumberFilteringOperand は、boolean 型のすべてのデフォルト フィルタリング条件を定義します。
  • IgxDateFilteringOperand は、boolean 型のすべてのデフォルト フィルタリング条件を定義します。
// Single column filtering

// Filter the `ProductName` column for values which `contains` the `myproduct` substring, ignoring case
this.grid.filter('ProductName', 'myproduct', IgxStringFilteringOperand.instance().condition("contains"), true);

必要なパラメーターは列フィールド キーとフィルター用語のみです。条件および大文字と小文字の区別を設定しない場合、列プロパティで推測されます。フィルターが複数ある場合、このメソッドはフィルター式の配列を受け取ります。

Note

フィルタリング操作でグリッドにバインドされているデータ ソースは変更されません。

// Multi column filtering

const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const productFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And, "ProductName");
const productExpression = {
    condition: IgxStringFilteringOperand.instance().condition("contains"),
    fieldName: "ProductName",
    ignoreCase: true,
    searchVal: "ch"
};
productFilteringExpressionsTree.filteringOperands.push(productExpression);
gridFilteringExpressionsTree.filteringOperands.push(productFilteringExpressionsTree);

const priceFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And, "Price");
const priceExpression = {
    condition: IgxNumberFilteringOperand.instance().condition("greaterThan"),
    fieldName: "UnitPrice",
    ignoreCase: true,
    searchVal: 20
};
priceFilteringExpressionsTree.filteringOperands.push(priceExpression);
gridFilteringExpressionsTree.filteringOperands.push(priceFilteringExpressionsTree);

this.grid.filteringExpressionsTree = gridFilteringExpressionsTree;
  • filterGlobal - 既存フィルターをクリアして新しいフィルター条件をすべての Grid 列に適用します。
// Filter all cells for a value which contains `myproduct`
this.grid.filteringLogic = FilteringLogic.Or;
this.grid.filterGlobal("myproduct", IgxStringFilteringOperand.instance().condition("contains"), false);
  • clearFilter - 対象列から適用されたフィルターを削除します。引数がない場合、すべての列のフィルターをクリアします。
// Remove the filtering state from the ProductName column
this.grid.clearFilter('ProductName');

// Clears the filtering state from all columns
this.grid.clearFilter();

初期のフィルター状態

グリッドの初期フィルタリング状態の設定は、IgxGridComponent filteringExpressionsTree プロパティを IFilteringExpressionsTree の配列に設定して各列をフィルターします。

public ngAfterViewInit() {
    const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
    const productFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And, "ProductName");
    const productExpression = {
        condition: IgxStringFilteringOperand.instance().condition("contains"),
        fieldName: "ProductName",
        ignoreCase: true,
        searchVal: "c"
    };
    productFilteringExpressionsTree.filteringOperands.push(productExpression);
    gridFilteringExpressionsTree.filteringOperands.push(productFilteringExpressionsTree);

    this.grid.filteringExpressionsTree = gridFilteringExpressionsTree;
}

フィルター ロジック

Grid コントロールの filteringLogic プロパティは Grid で複数の列のフィルターが解決する方法を制御します。Grid. API または Grid の入力プロパティによって変更できます。

import { FilteringLogic } from 'igniteui-angular';
...

this.grid.filteringLogic = FilteringLogic.OR;

AND のデフォルト値は現在適用されているすべてのフィルター式と一致する行のみを返します。上記の例は、'ProductName セル値が 'myproduct' を含み、'Price' セル値が 55 より大きい場合に行が返されます。

OR に設定される場合、'ProductName セル値が 'myproduct' を含むか、'Price' セル値が 55 より大きい場合に行が返されます。

リモート フィルタリング

onDataPreLoadonFilteringDone アウトプットにサブスクライブしてグリッドでリモート フィルタリングができます。詳細については、グリッドの仮想化とパフォーマンスのヘルプをご覧ください。

カスタム フィルタリング オペランド

フィルタリング メニューは、フィルタリング オペランド削除または変更してカスタマイズします。デフォルトでフィルタリング メニューは列のデータ型 (IgxBooleanFilteringOperandIgxDateFilteringOperand, IgxNumberFilteringOperandIgxStringFilteringOperand) に基づいて特定のオペランドを含みます。これらのクラスまたは基本クラス IgxFilteringOperand を拡張してフィルタリング メニュー項目の動作を変更できます。

以下のサンプルの “Product Name” と “Discontinued” 列フィルタリング メニューを確認してください。“Discontinued” 列フィルターでは、オペランドの数が All に制限されています。“Product Name” 列フィルター - Contains および Does Not Contain オペランド ロジックを変更して大文字と小文字を区別した検索を実行し、Empty と Not Empty を追加します。

これにより、IgxStringFilteringOperandIgxBooleanFilteringOperand を拡張し、オペランドとロジックを変更して列 filters 入力を新しいオペランドに設定します。

// grid-custom-filtering.component.ts

export class GridCustomFilteringComponent implements OnInit {
    public caseSensitiveFilteringOperand = CaseSensitiveFilteringOperand.instance();
    public booleanFilteringOperand = BooleanFilteringOperand.instance();
    ...
}
...
export class CaseSensitiveFilteringOperand extends IgxStringFilteringOperand {
    private constructor() {
        super();
        const customOperations = [
            {
                iconName: "contains",
                isUnary: false,
                logic: (target: string, searchVal: string, ignoreCase?: boolean) => {
                    ignoreCase = false;
                    const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
                    target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase);
                    return target.indexOf(search) !== -1;
                },
                name: "Contains (case sensitive)"
            },
            {
                iconName: "does_not_contain",
                isUnary: false,
                logic: (target: string, searchVal: string, ignoreCase?: boolean) => {
                    ignoreCase = false;
                    const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
                    target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase);
                    return target.indexOf(search) === -1;
                },
                name: "Does Not Contain (case sensitive)"
            }
        ];

        const emptyOperators = [
            // "Empty"
            this.operations[6],
            // "Not Empty"
            this.operations[7]
        ];

        this.operations = customOperations.concat(emptyOperators);
    }
}

export class BooleanFilteringOperand extends IgxBooleanFilteringOperand {
    private constructor() {
        super();
        this.operations = [
            // "All"
            this.operations[0],
            // "TRUE"
            this.operations[1],
            // "FALSE"
            this.operations[2]
        ];
    }
}
<!-- grid-custom-filtering.component.html -->

 <igx-grid #grid1 [data]="data" [autoGenerate]="false" height="600px" width="100%" [allowFiltering]="true">
    <igx-column field="ProductName" header="Product Name" [dataType]="'string'" [filters]="caseSensitiveFilteringOperand"></igx-column>
    <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [filters]="booleanFilteringOperand">
        <ng-template igxCell let-cell="cell" let-val>
            <img *ngIf="val" src="assets/images/grid/active.png" title="Continued" alt="Continued" />
            <img *ngIf="!val" src="assets/images/grid/expired.png" title="Discontinued" alt="Discontinued" />
        </ng-template>
    </igx-column>
    ...
</igx-grid>

フィルター セルの再テンプレート化

フィルター セルを再テンプレート化するために、igxFilterCellTemplate とマークされたテンプレートを追加することができます。以下のサンプルでは、​​文字列カラムへの入力と日付列に IgxDatePicker が追加されています。ユーザーが値を入力または選択すると、文字列カラムには contains 演算子、日付列には equals 演算子を使用したフィルターが、グリッドのパブリック API を使用して適用されます。


6.1.0 Volume 0 の重大な変更

  • IgxGrid filteringExpressions プロパティは削除されます。代わりに filteringExpressionsTree を使用してください。
  • filter_multiple メソッドは削除されました。filter メソッドおよび filteringExpressionsTree プロパティを代わりに使用してください。
  • filter メソッドに新しいシグネチャがあります。以下のパラメーターを受け付けます。
    • name - フィルターする列の名前。
    • name - フィルタリングに使用する値。
    • conditionOrExpressionTree (オプション) - このパラメーターは、IFilteringOperation または IFilteringExpressionsTree 型のオブジェクトを受け付けます。簡単なフィルタリングが必要な場合、フィルタリング処理を引数として渡すことができます。高度なフィルタリングの場合、複雑なフィルタリング ロジックを含む式ツリーが引数として渡すことができます。
    • ignoreCase (オプション) - フィルタリングで大文字と小文字を区別するかどうか。
  • onFilteringDone イベントは、フィルター列のフィルタリング状態を含む型 IFilteringExpressionsTree の 1 パラメーターのみになりました。
  • フィルタリング オペランド: IFilteringExpression 条件プロパティは、フィルタリング状態メソッドに直接参照せずに IFilteringExpression を参照するようになりました。
  • IgxColumnComponent は、filters プロパティを公開し、IgxFilteringOperand クラス参照を取得します。
  • カスタム フィルターは、IFilteringOperation 型の処理で IgxFilteringOperandoperations プロパティを生成して Grid 列で使用できます。

API リファレンス

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。