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
を生成します。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.hierarchicalGrid.advancedFilteringExpressionsTree = tree;
}
Hierarchical Grid ツールバーを表示したくない場合は、openAdvancedFilteringDialog
および closeAdvancedFilteringDialog
メソッドを使用して、高度なフィルタリング ダイアログをコーディングを使用して開いたり閉じたりできます。
Note
Hierarchical Grid で quickFilter
/excelStyleFilter
と高度なフィルタリング ユーザー インターフェイスの両方を有効にできます。両フィルタリング ユーザー インターフェイスは、互いに依存せずに機能します。Hierarchical Grid の最終的なフィルター結果は、2 つのフィルターの結果の共通部分です。
外部の高度なフィルタリング
上記デモで示されるように、高度なフィルタリング ダイアログは、Hierarchical Grid の上にあるオーバーレイでホストされます。ダイアログのセットアップの準備ができたときに、適用または閉じる操作によってダイアログが非表示になります。ダイアログはスタンドアロン コンポーネントとして使用した場合、常に表示になります。以下のデモでは、高度なフィルタリングダイアログが Hierarchical Grid とは別に宣言されます。
デモ
使用方法
Hierarchical Grid の外部で動作するように高度なフィルタリングを構成する方法は簡単です。ダイアログを作成して、その grid
プロパティを設定するだけです。
<igx-advanced-filtering-dialog [grid]="hierarchicalgrid1">
</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';
Excel スタイルのフィルタリング ダイアログは、filtering-row-background
パラメーターを使用して、グリッドのテーマから背景色を取得します。背景を変更するには、カスタム テーマを作成する必要があります。
$custom-grid: grid-theme(
$filtering-row-background: #FFCD0F
);
ボタン、チップ、ドロップダウン、入力など、高度なフィルタリング ダイアログ内に他のコンポーネントがあるため、それぞれに個別のテーマを作成する必要があります。
$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,
...
);
この例では、リストされたコンポーネントのパラメーターの一部のみを変更しましたが、button-theme
、button-group-theme
、chip-theme
、drop-down-theme
、input-group-theme
テーマは、それぞれのスタイルを制御するために多数のパラメーターを提供します。
最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを含めることです。また、高度なフィルタリング ダイアログ内の他の要素のスタイルを追加します。
@include grid($custom-grid);
igx-advanced-filtering-dialog {
@include button($custom-button);
@include button-group($custom-button-group);
@include input-group($custom-input-group);
@include chip($custom-chip);
@include 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 drop-down($custom-drop-down);
@include grid($custom-grid);
igx-advanced-filtering-dialog {
@include button($custom-button);
@include button-group($custom-button-group);
@include input-group($custom-input-group);
@include 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-palette
と igx-color
関数を使用することによって色に関してより高い柔軟性を持つことができます。
igx-palette
は渡された一次色と二次色に基づいてカラーパレットを生成します。
$yellow-color: #FFCD0F;
$black-color: #292826;
$dark-palette: palette($primary: $yellow-color, $secondary: $black-color);
次に igx-color
を使用してパレットから簡単に色を取得できます。
$custom-grid: grid-theme(
$filtering-row-background: color($dark-palette, "secondary", 400)
);
$custom-button: button-theme(
$disabled-color: color($dark-palette, "secondary", 100),
...
);
$custom-button-group: button-group-theme(
$item-background: color($dark-palette, "secondary", 400),
...
);
$custom-input-group: input-group-theme(
$box-background: color($dark-palette, "secondary", 200),
...
);
$custom-chip: chip-theme(
$background: color($dark-palette, "primary", 400),
...
);
$custom-drop-down: drop-down-theme(
$background-color: color($dark-palette, "secondary", 400),
...
);
Note
igx-color
と igx-palette
は色の生成や取得のための関数です。使い方の詳細については パレット
のトピックを参照してください。
スキーマの使用
テーマ エンジンを使用してスキーマの利点を活用でき、堅牢で柔軟な構造を構築できます。スキーマはテーマを使用する方法です。
すべてのコンポーネントに提供される 2 つの定義済みスキーマのいずれかを拡張します。この場合、light-grid
、light-button
、light-button-group
、light-chip
、light-input-group
、light-drop-down
です。
$grid-dark-palette: palette($primary: #11bd7b, $secondary: #e32057, $info: $black-color);
$custom-grid-schema: extend($_light-grid,
(
filtering-row-background:(
color: ("info")
)
)
);
$custom-button-schema: extend($_light-button,
(
disabled-color:(
color: ("secondary", 100)
),
...
)
);
$custom-button-group-schema: extend($_light-button-group,
(
item-background:(
color: ("secondary", 400)
),
...
)
);
$custom-input-group-schema: extend($_light-input-group,
(
box-background:(
color: ("secondary", 200)
),
...
)
);
$custom-chip-schema: extend($_light-chip,
(
background:(
color: ("primary", 400)
),
...
)
);
$custom-drop-down-schema: extend($_light-drop-down,
(
background-color:(
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: grid-theme(
$palette: $grid-dark-palette,
$schema: $custom-light-schema
);
$custom-button: button-theme(
$palette: $dark-palette,
$schema: $custom-light-schema
);
$custom-button-group: button-group-theme(
$palette: $dark-palette,
$schema: $custom-light-schema
);
$custom-input-group: input-group-theme(
$palette: $dark-palette,
$schema: $custom-light-schema
);
$custom-chip: chip-theme(
$palette: $dark-palette,
$schema: $custom-light-schema
);
$custom-drop-down: drop-down-theme(
$palette: $dark-palette,
$schema: $custom-light-schema
);
テーマを上記と同じ方法で含めることに注意してください。
デモ
Note
このサンプルは、「テーマの変更」から選択したグローバル テーマに影響を受けません。