グリッド フィルタリング

Ignite UI for Angular Grid コンポーネントは、グリッドにバインドされるデータ コンテナーにフィルタリング API を提供します。

デモ


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

フィルタリング機能は、allowFiltering 入力を true に設定すると igxGrid コンポーネントで有効になります。特定の列でこの機能を無効にするには、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 型の値が Date dataType の列で使用される場合、グリッドは値を Date オブジェクトに解析しないためフィルター条件は使用できません。string オブジェクトを使用する場合、値を Date オブジェクトに解析するためのロジックをアプリケーション レベルで実装する必要があります。

列または複数の列はグリッド API でフィルターできます。グリッドはフィルター メソッド (filterfilterGlobalclearFilter) を公開します。

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

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

  • IgxFilteringOperand: カスタムフィルタリング条件の定義時に継承できるベース フィルタリング オペランドです。
  • IgxBooleanFilteringOperand は、boolean 型のすべてのデフォルト フィルタリング条件を定義します。
  • IgxNumberFilteringOperand は、numeric 型のすべてのデフォルト フィルタリング条件を定義します。
  • IgxStringFilteringOperand は、string 型のすべてのデフォルト フィルタリング条件を定義します。
  • IgxDateFilteringOperand は、Date 型のすべてのデフォルト フィルタリング条件を定義します。
// 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 - 既存フィルターをクリアして新しいフィルター条件をすべてのグリッド列に適用します。
// 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;
}

フィルター ロジック

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

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>

6.1.0 Volume 0 の重大な変更

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

API リファレンス

その他のリソース

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