Angular Hierarchical Grid フィルタリング

IgniteUI for Angular Hierarchical Grid コンポーネントは、[クイック フィルタリング、Excel スタイル フィルタリング、および高度なフィルタリングの 3 つの異なるフィルタリング タイプを提供します。それらのフィルタリング タイプは指定された基準を満たすレコードのみを表示できるようにします。Ignite Ui の Material UI グリッドコンポーネントは、Hierarchical Grid がバインドされているデータコンテナーを介して、Angular フィルター機能と広範なフィルター API を提供します。

Angular Hierarchical Grid フィルタリングの例

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

設定

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

allowFiltering プロパティを使用して、以下のオプションを指定できます:

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

allowAdvancedFiltering プロパティを使用して、以下のオプションを指定できます:

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

filterMode プロパティを使用して、以下のオプションを指定できます:

• quickFilter - 簡易なフィルタリング UI /デフォルト値/。
• excelStyleFilter - Excel のようなフィルタリング UI。

filterable プロパティを使用して、以下のオプションを指定できます:

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

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

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

<igx-hierarchical-grid [data]="data" [autoGenerate]="true" [allowAdvancedFiltering]="true">
</igx-hierarchical-grid>

Note

Hierarchical Grid で quickFilter/excelStyleFilter と高度なフィルタリング ユーザー インターフェイスの両方を有効にできます。両フィルタリング ユーザー インターフェイスは、互いに依存せずに機能します。Hierarchical Grid の最終的なフィルター結果は、2 つのフィルター結果の共通部分です。

インタラクション

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

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

使用方法

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

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

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

Note

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

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

• 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.hierarchicalGrid.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.hierarchicalGrid.filteringExpressionsTree = gridFilteringExpressionsTree;

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

// Filter all cells for a value which contains `myproduct`
this.hierarchicalGrid.filteringLogic = FilteringLogic.Or;
this.hierarchicalGrid.filterGlobal('myproduct', IgxStringFilteringOperand.instance().condition('contains'), false);

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

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

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

初期のフィルター状態

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

constructor(private cdr: ChangeDetectorRef) { }

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.hierarchicalGrid.filteringExpressionsTree = gridFilteringExpressionsTree;
    this.cdr.detectChanges();
}

フィルター ロジック

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

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

this.hierarchicalGrid.filteringLogic = FilteringLogic.OR;

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

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

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

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

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

これにより、IgxStringFilteringOperand と IgxBooleanFilteringOperand を拡張し、オペランドとロジックを変更して列 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]
        ];
    }
}

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

<igx-hierarchical-grid [data]="localdata" [autoGenerate]="false" [allowFiltering]="true">
    <igx-column field="Artist" [filterable]='true' [dataType]="'string'" [filters]="caseSensitiveFilteringOperand"></igx-column>
    <igx-column field="HasGrammyAward" [filterable]='true' [dataType]="'boolean'" [filters]="booleanFilteringOperand">
        <ng-template igxCell let-cell="cell" let-val>
            <img *ngIf="val" src="https://www.infragistics.com/angular-demos/assets/images/grid/active.png" title="True" alt="True" />
            <img *ngIf="!val" src="https://www.infragistics.com/angular-demos/assets/images/grid/expired.png" title="False" alt="False" />
        </ng-template>
    </igx-column>

</igx-hierarchical-grid>

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

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

スタイル設定

フィルター行のスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

最も簡単な方法は、grid-theme を拡張する新しいテーマを作成し、$filtering-row-text-color、$filtering-row-background、$filtering-header-text-color、$filtering-header-background パラメーターを受け取ります。

$custom-grid: grid-theme(
    $filtering-row-text-color: #292826,
    $filtering-row-background: #FFCD0F,
    $filtering-header-text-color: #292826,
    $filtering-header-background: #FFCD0F
);

以下のように、grid-theme は、フィルタリング行とフィルタリングされているそれぞれの列ヘッダーの色のみを制御します。入力グループ、チップ、ボタンなど、フィルタリング行内には明らかに多くのコンポーネントがあります。スタイルの設定は、それぞれに個別のテーマを作成する必要があるため、新しい入力グループのテーマと新しいボタンのテーマを作成します。

$dark-input-group: input-group-theme(
    $box-background: #FFCD0F,
    $idle-text-color: #292826,
    $focused-text-color: #292826,
    $filled-text-color: #292826
);

$dark-button: button-theme(
    $flat-background: #FFCD0F,
    $flat-text-color: #292826,
    $flat-hover-background: #292826,
    $flat-hover-text-color: #FFCD0F
);

この例では、入力グループとボタンのパラメーターの一部のみを変更しましたが、input-group-theme と button-theme は、それぞれのスタイルを制御するためのより多くのパラメーターを提供します。

最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを含めることです。また、入力のプレース ホルダーの色プロパティを設定します。

@include grid($custom-grid);
.igx-grid__filtering-row {
    @include button($dark-button);
    @include input-group($dark-input-group);

    .igx-input-group__input::placeholder {
        color: #FFCD0F;
    }
}

Note

.igx-grid__filtering-row 内で igx-button および igx-input-group ミックスインをスコープし、行フィルター ボタンとその入力グループのみのスタイルを設定します。そうでない場合は、グリッド内の他のボタンと入力グループも影響を受けます。

Note

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。

:host {
     ::ng-deep {
        @include grid($custom-grid);
        .igx-grid__filtering-row {
            @include button($dark-button);
            @include input-group($dark-input-group);

            .igx-input-group__input::placeholder {
                color: #FFCD0F;
            }
        }
    }
}

カラーパレットの定義

上記のように色の値をハードコーディングする代わりに、igx-palette と igx-color 関数を使用することによって色に関してより高い柔軟性を持つことができます。

igx-palette は渡された一次色と二次色に基づいてカラーパレットを生成します。

$yellow-color: #FFCD0F;
$black-color: #292826;

$dark-palette: palette($primary: $black-color, $secondary: $yellow-color);

次に igx-color を使用してパレットから簡単に色を取得できます。

$custom-grid: grid-theme(
    $filtering-row-text-color: color($dark-palette, "primary", 400),
    $filtering-row-background: color($dark-palette, "secondary", 400),
    $filtering-header-text-color: color($dark-palette, "primary", 400),
    $filtering-header-background: color($dark-palette, "secondary", 400)
);

$dark-input-group: input-group-theme(
    $box-background: color($dark-palette, "secondary", 400),
    $idle-text-color: color($dark-palette, "primary", 400),
    $focused-text-color: color($dark-palette, "primary", 400),
    $filled-text-color: color($dark-palette, "primary", 400)
);

$dark-button: button-theme(
    $flat-background: color($dark-palette, "secondary", 400),
    $flat-text-color: color($dark-palette, "primary", 400),
    $flat-hover-background: color($dark-palette, "primary", 400),
    $flat-hover-text-color: color($dark-palette, "secondary", 400)
);

Note

igx-color と igx-palette は色の生成や取得のための関数です。使い方の詳細についてはパレットのトピックを参照してください。

スキーマの使用

テーマ エンジンを使用してスキーマの利点を活用でき、堅牢で柔軟な構造を構築できます。スキーマはテーマを使用する方法です。

すべてのコンポーネントに提供される定義済みスキーマ (light-grid、light-input-group、light-button) のうちの 1 つを拡張します。

// Extending the light grid schema
$custom-grid-schema: extend($_light-grid,
    (
        filtering-row-text-color:(
           color: ("primary", 400)
        ),
        filtering-row-background:(
           color: ("secondary", 400)
        ),
        filtering-header-text-color:(
           color: ("primary", 400)
        ),
        filtering-header-background:(
           color: ("secondary", 400)
        )
    )
);

// Extending the light input group schema
$custom-input-group-schema: extend($_light-input-group,
    (
        box-background:(
           color: ("secondary", 400)
        ),
        idle-text-color:(
           color: ("primary", 400)
        ),
        focused-text-color:(
           color: ("primary", 400)
        ),
        filled-text-color:(
           color: ("primary", 400)
        )
    )
);

// Extending the light button schema
$custom-button-schema: extend($_light-button,
    (
        flat-background:(
           color: ("secondary", 400)
        ),
        flat-text-color:(
           color: ("primary", 400)
        ),
        flat-hover-background:(
           color: ("primary", 400)
        ),
        flat-hover-text-color:(
           color: ("secondary", 400)
        )
    )
);

カスタム スキーマを適用するには、グローバル (light または dark) の 1 つを拡張する必要があります。これは基本的にカスタム スキーマでコンポーネントをポイントし、その後それぞれのコンポーネントテーマに追加するものです。

// Extending the global light-schema
$custom-light-schema: extend($light-schema,(
    igx-grid: $custom-grid-schema,
    igx-input-group: $custom-input-group-schema,
    igx-button: $custom-button-schema
));

// Defining grid-theme with the global light schema
$custom-grid: grid-theme(
  $palette: $dark-palette,
  $schema: $custom-light-schema
);

// Defining button-theme with the global light schema
$custom-button: button-theme(
  $palette: $dark-palette,
  $schema: $custom-light-schema
);

// Defining input-group-theme with the global light schema
$custom-input-group: input-group-theme(
  $palette: $dark-palette,
  $schema: $custom-light-schema
);

上記と同じ方法でテーマを含める必要があることに注意してください。

デモ

Note

このサンプルは、「テーマの変更」から選択したグローバル テーマに影響を受けません。

既知の制限

Note

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

API リファレンス

• IgxColumnComponent
• IgxHierarchicalGridComponent API
• IgxHierarchicalGridComponent スタイル

その他のリソース

• Hierarchical Grid 概要
• 仮想化とパフォーマンス
• ページング
• ソート
• 集計
• 列移動
• 列のピン固定
• 列のサイズ変更
• 選択

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

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