Web Components Grid フィルタリング

Web Components Grid の Ignite UI for Web Components フィルタリングは、特定の基準または条件に基づいてデータを選択的に表示または非表示にする機能です。IgcGrid コンポーネントが豊富なフィルタリング API とすべてのフィルタリング機能を提供するバインドされたデータ コンテナがあります。ここで利用可能なフィルタリング タイプは次の 3 つです。

• クイック フィルタリング
• Excel スタイル フィルタリング
• 高度なフィルタリング

Web Components Grid フィルタリングの例

以下のサンプルは、IgcGrid の Excel スタイル フィルタリング ユーザー エクスペリエンスを示しています。

設定

フィルタリングが有効かどうか、およびどのフィルタリング モードを使用するかを指定するために、IgcGrid は次のブール プロパティを公開します - AllowFiltering、AllowAdvancedFiltering、FilterMode と Filterable。

以下のオプションは、プロパティ AllowFiltering で指定できます。

• false - 対応するグリッドのフィルタリングが無効になります。これがデフォルト値です。
• true - 対応するグリッドのフィルタリングが有効になります。

以下のオプションは、プロパティ AllowAdvancedFiltering で指定できます。

• false - 対応するグリッドの高度なフィルタリングが無効になります。これがデフォルト値です。
• true - 対応するグリッドの高度なフィルタリングが有効になります。

以下のオプションは、プロパティ FilterMode で指定できます。

• QuickFilter - 簡易なフィルタリング UI。これがデフォルト値です。
• ExcelStyleFilter - Excel のようなフィルタリング UI。

以下のオプションは、プロパティ Filterable で指定できます。

• true - 対応する列のフィルタリングが有効になります。これがデフォルト値です。
• false - 対応する列のフィルタリングが無効になります。

<igc-grid id="grid1" auto-generate="false" allow-filtering="true">
    <igc-column field="ProductName" data-type="string"></igc-column>
    <igc-column field="Price" data-type="number" filterable="false"></igc-column>
</igc-grid>

高度なフィルタリング を有効にするには、AllowAdvancedFiltering 入力プロパティを true に設定します。

<igc-grid  data="data" auto-generate="true" allow-advanced-filtering="true">
</igc-grid>

インタラクション

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

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

使用方法

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

フィルタリング機能は、AllowFiltering 入力を true に設定すると IgcGrid コンポーネントで有効になります。デフォルトの FilterMode は QuickFilter でランタイムでは変更できません。特定の列でこの機能を無効にするには、Filterable 入力を false に設定します。

<igc-grid auto-generate="false" allow-filtering="true">
    <igc-column field="ProductName" data-type="string"></igc-column>
    <igc-column field="Price" datdata-typeaType="number"></igc-column>
    <igc-column field="Discontinued" data-type="boolean" filterable="false"></igc-column>
</igc-grid>

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

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

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

• IgcFilteringOperand: カスタムフィルタリング条件の定義時に継承できるベース フィルタリング オペランドです。
• IgcBooleanFilteringOperand は、boolean 型のすべてのデフォルト フィルタリング条件を定義します。
• IgcNumberFilteringOperand は、numeric 型のすべてのデフォルト フィルタリング条件を定義します。
• IgcStringFilteringOperand は、string 型のすべてのデフォルト フィルタリング条件を定義します。
• IgcDateFilteringOperand は、date 型のすべてのデフォルト フィルタリング条件を定義します。

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

<igc-grid auto-generate="false" allow-filtering="true">
    <igc-column field="ProductName" data-type="string"></igc-column>
    <igc-column field="Price" datdata-typeaType="number"></igc-column>
    <igc-column field="Discontinued" data-type="boolean" filterable="false"></igc-column>
</igc-grid>

• FilterGlobal - 既存フィルターをクリアして新しいフィルター条件をすべての Grid 列に適用します。

<igc-grid autoGenerate={false} allowFiltering={true}>
    <IgrColumn field="ProductName" dataType="string"></IgrColumn>
    <IgrColumn field="Price" dataType="number"></IgrColumn>
    <IgrColumn field="Discontinued" dataType="boolean" filterable={false}></IgrColumn>
</igc-grid>

• ClearFilter - 対象列から適用されたフィルターを削除します。引数がない場合、すべての列のフィルターをクリアします。

<igx-hierarchical-grid [data]="localdata" [autoGenerate]="false" [allowFiltering]="true">
    <igx-column field="Artist" [filterable]="true"></igx-column>
    <igx-column field="Photo" [filterable]="false"></igx-column>
</igx-hierarchical-grid>

• ClearFilter - removes any applied filtering from the target column. If called with no arguments it will clear the filtering of all columns.

// Remove the filtering state from the ProductName column
this.grid.clearFilter('ProductName');

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

初期のフィルター状態

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

constructor() {
    const gridFilteringExpressionsTree: IgcFilteringExpressionsTree = { operator: FilteringLogic.And };
    const productFilteringExpressionsTree: IgcFilteringExpression = {
        fieldName: "ProductName",
        conditionName: "contains",
        ignoreCase: true,
        searchVal: "Chai"
    };

    const quantityFilteringExpressionsTree: IgcFilteringExpression = {
        fieldName: "QuantityPerUnit",
        conditionName: "contains",
        ignoreCase: true,
        searchVal: "1"
    };

    gridFilteringExpressionsTree.filteringOperands = [ productFilteringExpressionsTree, quantityFilteringExpressionsTree ];

    this.grid.filteringExpressionsTree = gridFilteringExpressionsTree;
}

フィルター ロジック

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

import { FilteringLogic } from "igniteui-webcomponents-grids/grids";

this.grid.filteringLogic = FilteringLogic.OR;

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

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

リモート フィルタリング

IgcGrid はリモート フィルタリングをサポートします。詳細については、Grid リモート データの操作をご確認ください。

In the sample below, inspect the “Product Name” and “Discontinued” columns filters menus. For the “Discontinued” column filter, we have limited the number of operands to All, True and False. For the “Product Name” column filter – we have modified the Contains and Does Not Contain operands logic to perform case sensitive search and added also Empty and Not Empty operands.

To do that, extend the IgcStringFilteringOperand and IgcBooleanFilteringOperand, modify the operations and their logic, and set the column filters input to the new operands.

export class GridCustomFilteringComponent {
    public caseSensitiveFilteringOperand = CaseSensitiveFilteringOperand.instance();
    public booleanFilteringOperand = BooleanFilteringOperand.instance();
}

export class CaseSensitiveFilteringOperand extends IgcStringFilteringOperand {
    private constructor() {
        super();
        const customOperations = [
            {
                iconName: 'contains',
                isUnary: false,
                logic: (target: string, searchVal: string, ignoreCase?: boolean) => {
                    ignoreCase = false;
                    const search = IgcStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
                    target = IgcStringFilteringOperand.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 = IgcStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
                    target = IgcStringFilteringOperand.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 IgcBooleanFilteringOperand {
    private constructor() {
        super();
        this.operations = [
            // 'All'
            this.operations[0],
            // 'TRUE'
            this.operations[1],
            // 'FALSE'
            this.operations[2]
        ];
    }
}

<!-- grid-custom-filtering.component.html -->

<igc-grid auto-generate="false" allow-filtering="true">
    <igc-column id="ProductName" field="ProductName" header="Product Name" data-type="string"></igc-column>
    <igc-column id="Discontinued" field="Discontinued" header="Discontinued" data-type="boolean"></igc-column>
</igc-grid>

constructor() {
    var productName = document.getElementById('ProductName') as IgcColumnComponent;
    var discontinued = document.getElementById('Discontinued') as IgcColumnComponent;
    productName.filters = this.caseSensitiveFilteringOperand;
    discontinued.filters = this.booleanFilteringOperand;
}

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

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

<igc-grid class="grid"></igc-grid>

.grid {
    --ig-grid-filtering-row-text-color: #292826;
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-grid-filtering-header-text-color: #292826;
    --ig-grid-filtering-header-background: #ffcd0f;
}

マッチング レコードのみのフィルタリング方式

デモ

既知の問題と制限

Our community is active and always welcoming to new ideas.

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub