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

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

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    インタラクション

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

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

    使用方法

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

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

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

    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.treeGrid.advancedFilteringExpressionsTree = tree;
    }
    typescript

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

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

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

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

    デモ

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    使用方法

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

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

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

    App Builder | CTA Banner

    スタイル設定

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

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

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

    $custom-grid: grid-theme(
      $filtering-row-background: #ffcd0f
    );
    scss

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

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

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

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

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

    @include css-vars($custom-grid);
    igx-advanced-filtering-dialog {
      @include css-vars($custom-button);
      @include css-vars($custom-button-group);
      @include css-vars($custom-input-group);
      @include css-vars($custom-chip);
      @include css-vars($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;
      }
    }
    scss

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

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

    :host {
      ::ng-deep {
        @include css-vars($custom-drop-down);
        @include css-vars($custom-grid);
        igx-advanced-filtering-dialog {
          @include css-vars($custom-button);
          @include css-vars($custom-button-group);
          @include css-vars($custom-input-group);
          @include css-vars($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;
          }
        }
      }
    }
    scss

    デモ

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

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

    API リファレンス

    その他のリソース

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