Grid 高度なフィルタリング

    高度なフィルタリングは、Grid のような任意の Angular Material テーブルの全列に及ぶフィルタリング条件を持つグループを作成できるダイアログを提供します。

    Angular Grid 高度なフィルタリングの例

    インタラクション

    高度なフィルタリングダイアログを開くには、グリッドツールバーの高度なフィルタリングボタンをクリックする必要があります。高度なフィルターが適用されていない場合、AND または OR でリンクされたフィルター条件のグループの作成から開始する必要があります。その後、フィルタリング条件またはサブグループを追加できます。

    フィルター条件を追加するには、filterable 列のいずれか、列 dataType に基づくオペランド、およびオペランドが単項でない場合の値を選択する必要があります。条件が確定すると、条件情報を含むチップが表示されます。チップをホバーまたはクリックすると、チップを変更したり、その直後に別の条件やグループを追加したりできます。

    複数のフィルター条件チップを選択すると、グループを作成したりフィルターを削除したりするためのオプションを含むコンテキストメニューが表示されます。選択した条件でグループを作成することを選択した場合、一番上に選択した条件が配置された場所に新しく作成されたグループが表示されます。

    グループを選択するために、リンク条件 (AND または OR) に基づいて色付けされた垂直線をクリックすることもできます。単一のグループが選択されている場合、フィルタリング ロジックを変更、グループ解除、または削除するオプションを含むコンテキスト メニューが表示されます。

    フィルタリング条件とグループを作成する準備後にデータをフィルタリングするには、[適用] ボタンをクリックします。拡張フィルターを変更後、変更を保存したくない場合は、[キャンセル] ボタンをクリックします。[フィルターのクリア] ボタンをクリックして、高度なフィルターをクリアすることもできます。

    使用方法

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

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

    高度なフィルタリングは、advancedFilteringExpressionsTree 入力プロパティに保存される FilteringExpressionsTree を生成します。advancedFilteringExpressionsTree プロパティを使用して、高度なフィルタリングの初期状態を設定できます。

    ngAfterViewInit(): void {
        const tree = new FilteringExpressionsTree(FilteringLogic.And);
        tree.filteringOperands.push({
            fieldName: 'ID',
            condition: IgxStringFilteringOperand.instance().condition('contains'),
            searchVal: 'a',
            ignoreCase: true
        });
        const subTree = new FilteringExpressionsTree(FilteringLogic.Or);
        subTree.filteringOperands.push({
            fieldName: 'ContactTitle',
            condition: IgxStringFilteringOperand.instance().condition('doesNotContain'),
            searchVal: 'b',
            ignoreCase: true
        });
        subTree.filteringOperands.push({
            fieldName: 'CompanyName',
            condition: IgxStringFilteringOperand.instance().condition('startsWith'),
            searchVal: 'c',
            ignoreCase: true
        });
        tree.filteringOperands.push(subTree);
    
        this.grid.advancedFilteringExpressionsTree = tree;
    }
    

    Grid ツールバーを表示したくない場合は、openAdvancedFilteringDialog および closeAdvancedFilteringDialog メソッドを使用して、高度なフィルタリング ダイアログをコーディングを使用して開いたり閉じたりできます。

    Note

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

    外部の高度なフィルタリング

    上記デモで示されるように、高度なフィルタリング ダイアログは、Grid の上にあるオーバーレイでホストされます。ダイアログのセットアップの準備ができたときに、適用または閉じる操作によってダイアログが非表示になります。ダイアログはスタンドアロン コンポーネントとして使用した場合、常に表示になります。以下のデモでは、高度なフィルタリングダイアログが Grid とは別に宣言されます。

    デモ

    使用方法

    Grid の外部で動作するように高度なフィルタリングを構成する方法は簡単です。ダイアログを作成して、その grid プロパティを設定するだけです。

    <igx-advanced-filtering-dialog [grid]="grid1">
    </igx-advanced-filtering-dialog>
    

    スタイル設定

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

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

    Excel スタイルのフィルタリング ダイアログは、filtering-row-background パラメーターを使用して、グリッドのテーマから背景色を取得します。背景を変更するには、カスタム テーマを作成する必要があります。

    $custom-grid: igx-grid-theme(
        $filtering-row-background: #FFCD0F
    );
    

    ボタン、チップ、ドロップダウン、入力など、高度なフィルタリング ダイアログ内に他のコンポーネントがあるため、それぞれに個別のテーマを作成する必要があります。

    $custom-button: igx-button-theme(
        $disabled-color: gray,
        ...
    );
    
    $custom-button-group: igx-button-group-theme(
        $item-background:  #292826,
        ...
    );
    
    $custom-input-group: igx-input-group-theme(
        $box-background: #4a4a4a,
        ...
    );
    
    $custom-chip: igx-chip-theme(
        $background: #FFCD0F,
        ...
    );
    
    $custom-drop-down: igx-drop-down-theme(
        $background-color: #292826,
        ...
    );
    

    この例では、リストされたコンポーネントのパラメーターの一部のみを変更しましたが、igx-button-themeigx-button-group-themeigx-chip-themeigx-drop-down-themeigx-input-group-theme テーマは、それぞれのスタイルを制御するために多数のパラメーターを提供します。

    最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを含めることです。また、高度なフィルタリング ダイアログ内の他の要素のスタイルを追加します。

    @include igx-grid($custom-grid);
    igx-advanced-filtering-dialog {
        @include igx-button($custom-button);
        @include igx-button-group($custom-button-group);
        @include igx-input-group($custom-input-group);
        @include igx-chip($custom-chip);
        @include igx-drop-down($custom-drop-down);
        .igx-filter-empty__title {
            color: #FFCD0F
        }
        .igx-advanced-filter__header {
            color: #FFCD0F
        }
        .igx-filter-tree__expression-actions igx-icon {
            color: #FFCD0F
        }
        .igx-filter-tree__expression-actions igx-icon:hover {
            color: #ffe482
        }
        .igx-filter-tree__expression-actions igx-icon:focus {
            color: #ffe482
        }
        .igx-filter-contextual-menu {
            border: 1px solid #FFCD0F
        }
        .igx-filter-contextual-menu__close-btn {
            position: absolute !important;
            background: #292826 !important;
            border-color: #FFCD0F !important;
        }
        .igx-input-group__input::placeholder {
            color: gray;
        }
    }
    
    Note

    カスタム テーマが高度なフィルタリング ダイアログにネストされたコンポーネントのみに影響するように、コンポーネントのほとんどのミックスインをigx-advanced-filtering-dialog 内にスコープします。そうでない場合、アプリケーション内の他のボタン、チップ、入力、ドロップダウンも影響を受けます。

    Note

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

    :host {
        ::ng-deep {
            @include igx-drop-down($custom-drop-down);
            @include igx-grid($custom-grid);
            igx-advanced-filtering-dialog {
                @include igx-button($custom-button);
                @include igx-button-group($custom-button-group);
                @include igx-input-group($custom-input-group);
                @include igx-chip($custom-chip);
                .igx-input-group__input::placeholder {
                    color: gray;
                }
                .igx-filter-empty__title {
                    color: #FFCD0F
                }
                .igx-advanced-filter__header {
                    color: #FFCD0F
                }
                .igx-filter-tree__expression-actions igx-icon {
                    color: #FFCD0F
                }
                .igx-filter-tree__expression-actions igx-icon:hover {
                    color: #ffe482
                }
                .igx-filter-tree__expression-actions igx-icon:focus {
                    color: #ffe482
                }
                .igx-filter-contextual-menu {
                    border: 1px solid #FFCD0F
                }
                .igx-filter-contextual-menu__close-btn {
                    position: absolute !important;
                    background: #292826 !important;
                    border-color: #FFCD0F !important;
                }
            }
        }
    }
    

    カラーパレットの定義

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

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

    $yellow-color: #FFCD0F;
    $black-color: #292826;
    $dark-palette: igx-palette($primary: $yellow-color, $secondary: $black-color);
    

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

    $custom-grid: igx-grid-theme(
        $filtering-row-background: igx-color($dark-palette, "secondary", 400)
    );
    
    $custom-button: igx-button-theme(
        $disabled-color: igx-color($dark-palette, "secondary", 100),
        ...
    );
    
    $custom-button-group: igx-button-group-theme(
        $item-background:  igx-color($dark-palette, "secondary", 400),
        ...
    );
    
    $custom-input-group: igx-input-group-theme(
        $box-background: igx-color($dark-palette, "secondary", 200),
        ...
    );
    
    $custom-chip: igx-chip-theme(
        $background: igx-color($dark-palette, "primary", 400),
        ...
    );
    
    $custom-drop-down: igx-drop-down-theme(
        $background-color: igx-color($dark-palette, "secondary", 400),
        ...
    );
    
    Note

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

    スキーマの使用

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

    すべてのコンポーネントに提供される 2 つの定義済みスキーマのいずれかを拡張します。この場合、light-gridlight-buttonlight-button-grouplight-chiplight-input-grouplight-drop-down です。

    $grid-dark-palette: igx-palette($primary: #11bd7b, $secondary: #e32057, $info: $black-color);
    
    $custom-grid-schema: extend($_light-grid,
        (
            filtering-row-background:(
                igx-color: ("info")
            )
        )
    );
    
    $custom-button-schema: extend($_light-button,
        (
            disabled-color:(
                igx-color: ("secondary", 100)
            ),
            ...
        )
    );
    
    $custom-button-group-schema: extend($_light-button-group,
        (
            item-background:(
                igx-color: ("secondary", 400)
            ),
            ...
        )
    );
    
    $custom-input-group-schema: extend($_light-input-group,
        (
            box-background:(
                igx-color: ("secondary", 200)
            ),
            ...
        )
    );
    
    $custom-chip-schema: extend($_light-chip,
        (
            background:(
                igx-color: ("primary", 400)
            ),
            ...
        )
    );
    
    $custom-drop-down-schema: extend($_light-drop-down,
        (
            background-color:(
                igx-color: ("secondary", 400)
            ),
            ...
        )
    );
    

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

    $custom-light-schema: extend($light-schema,(
        igx-grid: $custom-grid-schema,
        igx-button: $custom-button-schema,
        igx-button-group: $custom-button-group-schema,
        igx-input-group: $custom-input-group-schema,
        igx-chip: $custom-chip-schema,
        igx-drop-down: $custom-drop-down-schema
    ));
    
    $custom-grid: igx-grid-theme(
        $palette: $grid-dark-palette,
        $schema: $custom-light-schema
    );
    
    $custom-button: igx-button-theme(
        $palette: $dark-palette,
        $schema: $custom-light-schema
    );
    
    $custom-button-group: igx-button-group-theme(
        $palette: $dark-palette,
        $schema: $custom-light-schema
    );
    
    $custom-input-group: igx-input-group-theme(
        $palette: $dark-palette,
        $schema: $custom-light-schema
    );
    
    $custom-chip: igx-chip-theme(
        $palette: $dark-palette,
        $schema: $custom-light-schema
    );
    
    $custom-drop-down: igx-drop-down-theme(
        $palette: $dark-palette,
        $schema: $custom-light-schema
    );
    

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

    デモ

    Note

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

    API リファレンス

    その他のリソース

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