Web Components Tree Grid フィルタリング

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

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

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

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

設定

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

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

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

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

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

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

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

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

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

<igc-tree-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-tree-grid>

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

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

[!Note] IgcTreeGridComponent で QuickFilter または ExcelStyleFilter と高度なフィルタリング ユーザー インターフェイスの両方を有効にできます。両フィルタリング ユーザー インターフェイスは、互いに依存せずに機能します。IgcTreeGridComponent の最終的なフィルター結果は、2 つのフィルター結果の共通部分です。

インタラクション

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

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

使用方法

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

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

<igc-tree-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-tree-grid>

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

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

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

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

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

// Single column filtering

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

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

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

// Multi column filtering

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

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

this.grid.filteringExpressionsTree = gridFilteringExpressionsTree;

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

// Filter all cells for a value which contains `myproduct`
this.grid.filteringLogic = FilteringLogic.Or;
this.grid.filterGlobal('myproduct', IgcStringFilteringOperand.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();

初期のフィルター状態

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

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;
}

フィルター ロジック

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

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

this.grid.filteringLogic = FilteringLogic.OR;

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

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

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

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

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

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

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-tree-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-tree-grid>

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

スタイル設定

定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

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

次に、そのクラスに関連する CSS プロパティを設定します。

.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;
}

デモ

既知の問題と制限

[!Note] Firefox などの一部のブラウザーは、地域固有の小数点区切り文字をグループ化区切りと見なすため解析できず、無効になります。数値列フィルター値にそのような値を入力すると、数値の有効な部分のみがフィルター式に適用されます。詳細については、Firefox 問題を参照してください。

API リファレンス

• IgcTreeGridComponent
• IgcColumnComponent

その他のリソース

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

• Ignite UI for Web Components フォーラム (英語)
• Ignite UI for Web Components GitHub (英語)