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

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

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

    インタラクション

    高度なフィルタリング ダイアログを開くには、グリッドツールバーの高度なフィルタリングボタンをクリックする必要があります。ダイアログはフィルタリング ロジックを生成、表示、編集するために IgxQueryBuilder コンポーネントを使用しています。インタラクション プロセスの詳細については、Query Builder トピックを参照してください。

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

    使用方法

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

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

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

    ngAfterViewInit(): void {
        const tree = new FilteringExpressionsTree(FilteringLogic.Or);
        tree.filteringOperands.push({
            fieldName: 'Artist',
            condition: IgxStringFilteringOperand.instance().condition('startsWith'),
            conditionName: IgxStringFilteringOperand.instance().condition('startsWith').name,
            searchVal: 'A'
        });
        const subTree = new FilteringExpressionsTree(FilteringLogic.And);
        subTree.filteringOperands.push({
            fieldName: 'GrammyAwards',
            condition: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo'),
            conditionName: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo').name,
            searchVal: 1
        });
        subTree.filteringOperands.push({
            fieldName: 'Debut',
            condition: IgxNumberFilteringOperand.instance().condition('lessThan'),
            conditionName: IgxNumberFilteringOperand.instance().condition('lessThan').name,
            searchVal: 2000
        });
        tree.filteringOperands.push(subTree);
        this.hierarchicalGrid.advancedFilteringExpressionsTree = tree;
    }
    

    IgxHierarchicalGrid の高度なフィルタリングでは、IN / NOT-IN 演算子を使用して、子グリッド データに基づいてルート グリッド データをフィルタリングできます。この演算子により、サブクエリを作成して、より複雑なフィルタリング ロジックを定義できます。この機能の詳細については、クエリ ビルダーの「サブクエリの使用」セクションを参照してください。以下はサブクエリを含むサンプル FilteringExpressionsTree です。

    ngAfterViewInit(): void {
        const albumsTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Albums', ['Artist']);
        albumsTree.filteringOperands.push({
            fieldName: 'LaunchDate',
            condition: IgxDateFilteringOperand.instance().condition('after'),
            conditionName: IgxDateFilteringOperand.instance().condition('after').name,
            searchVal: new Date(2017, 1, 1)
        });
        const tree = new FilteringExpressionsTree(FilteringLogic.And);
        tree.filteringOperands.push({
            fieldName: 'Artist',
            condition: IgxStringFilteringOperand.instance().condition('inQuery'),
            conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name,
            searchTree: albumsTree
        });
        this.hierarchicalGrid.advancedFilteringExpressionsTree = tree;
    }
    

    リモート データを使用する場合は、IgxHierarchicalGridschema プロパティを設定する必要があります。詳細なガイダンスについては、ロードオンデマンドのトピックを参照してください。

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

    Note

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

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

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

    デモ

    使用方法

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

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

    また、ドラッグアンドドロップ App Builder™ が、デザインから Angular コード作成へのストーリー全体をどのように効率化できるかを確認することもできます。

    スタイル設定

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

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

    高度なフィルタリング ダイアログは IgxQueryBuilder コンポーネントを使用するため、query-builder-theme を使用してスタイルを設定できます。ヘッダー タイトルのスタイルを設定するには、query-builder-theme を拡張するカスタム テーマを作成し、$header-foreground パラメーターを設定します。

    $custom-query-builder: query-builder-theme(
      $header-foreground: #512da8
    );
    
    Note

    上記のようにカラーの値をハードコーディングする代わりに、palette および color 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細についてはパレットのトピックをご覧ください。

    最後にコンポーネントのテーマをアプリケーションに含めます

    $custom-query-builder: query-builder-theme(
      $header-foreground: #512da8,
      $color-expression-group-and:  #eb0000,
      $color-expression-group-or: #0000f3,
      $subquery-header-background: var(--ig-gray-300),
      $subquery-border-color: var(--ig-warn-500),
      $subquery-border-radius: rem(4px)
    );
    
    igx-advanced-filtering-dialog {
      @include css-vars($custom-query-builder);
    }
    
    Note

    作成した query-builder-themeigx-advanced-filtering-dialog 内に含めることで、このカスタム テーマは高度なフィルタリング ダイアログ内のクエリ ビルダーにのみに影響します。そうしない場合、アプリケーション内の他のクエリ ビルダー コンポーネントにも影響します。

    Note

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

    $custom-query-builder: query-builder-theme(
      $header-foreground: #512da8,
      $color-expression-group-and:  #eb0000,
      $color-expression-group-or: #0000f3,
      $subquery-header-background: var(--ig-gray-300),
      $subquery-border-color: var(--ig-warn-500),
      $subquery-border-radius: rem(4px)
    );
    
    :host {
      ::ng-deep {
        igx-advanced-filtering-dialog {
          @include css-vars($custom-query-builder);
        }
      }
    }
    

    デモ

    Note

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

    API リファレンス

    その他のリソース

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