Angular Hierarchical Grid の Excel スタイル フィルタリング
グリッド Excel フィルタリングは、Hierarchical Grid などの Angular テーブルに対して Excel のようなフィルタリング UI を提供します。
Angular Hierarchical Grid Excel スタイル フィルタリングの例
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import {
IgxHierarchicalGridModule,
IgxButtonGroupModule
} from "igniteui-angular" ;
import { HGridExcelStyleFilteringSample1Component } from "./hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-1/hierarchical-grid-excel-style-filtering-sample-1.component" ;
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
HGridExcelStyleFilteringSample1Component
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxPreventDocumentScrollModule,
IgxHierarchicalGridModule,
IgxButtonGroupModule
],
providers : [],
entryComponents : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, OnInit, ViewChild } from '@angular/core' ;
import { DisplayDensity, IgxHierarchicalGridComponent } from 'igniteui-angular' ;
import { SINGERS } from '../../data/singersData' ;
@Component ({
selector : 'app-hierarchical-grid-excel-style-filtering-sample-1' ,
styleUrls : ['./hierarchical-grid-excel-style-filtering-sample-1.component.scss' ],
templateUrl : 'hierarchical-grid-excel-style-filtering-sample-1.component.html'
})
export class HGridExcelStyleFilteringSample1Component implements OnInit {
@ViewChild ('hierarchicalGrid' , { static : true })
public hierarchicalGrid: IgxHierarchicalGridComponent;
public localdata;
public density: DisplayDensity = 'comfortable' ;
public displayDensities;
constructor ( ) {
this .localdata = SINGERS;
}
public ngOnInit(): void {
this .displayDensities = [
{
label : 'compact' ,
selected : this .density === 'compact' ,
togglable : true
},
{
label : 'cosy' ,
selected : this .density === 'cosy' ,
togglable : true
},
{
label : 'comfortable' ,
selected : this .density === 'comfortable' ,
togglable : true
}
];
}
public formatter = (a ) => a;
public selectDensity (event ) {
this .density = this .displayDensities[event.index].label;
this .hierarchicalGrid.displayDensity = this .displayDensities[event.index].label;
this .hierarchicalGrid.reflow();
}
}
ts コピー <div class ="wrapper" >
<div class ="density-chooser" >
<igx-buttongroup [values ]="displayDensities" (selected )="selectDensity($event)" > </igx-buttongroup >
</div >
<igx-hierarchical-grid [igxPreventDocumentScroll ]="true" class ="hgrid" [data ]="localdata" [moving ]="true" [displayDensity ]="density" [autoGenerate ]="false" [allowFiltering ]='true' filterMode ="excelStyleFilter"
height ="850px" [width ]="'100%'" [rowHeight ]="'65px'" #hierarchicalGrid >
<igx-grid-toolbar >
<igx-grid-toolbar-actions >
<igx-grid-toolbar-hiding > </igx-grid-toolbar-hiding >
</igx-grid-toolbar-actions >
</igx-grid-toolbar >
<igx-column field ="Artist" [sortable ]="true" > </igx-column >
<igx-column field ="Photo" [filterable ]='false' >
<ng-template igxCell let-cell ="cell" >
<div class ="cell__inner_2" >
<img [src ]="cell.value" class ="photo" />
</div >
</ng-template >
</igx-column >
<igx-column field ="Debut" [sortable ]="true" dataType ="number" [formatter ]="formatter" > </igx-column >
<igx-column field ="GrammyNominations" header ="Grammy Nominations" dataType ="number" [sortable ]="true" > </igx-column >
<igx-column field ="GrammyAwards" header ="Grammy Awards" dataType ="number" [sortable ]="true" > </igx-column >
<igx-row-island [height ]="null" [key ]="'Albums'" [autoGenerate ]="false" [allowFiltering ]='true' filterMode ="excelStyleFilter" [moving ]="true" >
<igx-column field ="Album" [sortable ]="true" > </igx-column >
<igx-column field ="LaunchDate" header ="Launch Date" [sortable ]="true" [dataType ]="'date'" > </igx-column >
<igx-column field ="BillboardReview" header ="Billboard Review" [sortable ]="true" dataType ="number" > </igx-column >
<igx-column field ="USBillboard200" header ="US Billboard 200" [sortable ]="true" dataType ="number" > </igx-column >
<igx-row-island [height ]="null" [key ]="'Songs'" [autoGenerate ]="false" >
<igx-column field ="Number" header ="No." > </igx-column >
<igx-column field ="Title" > </igx-column >
<igx-column field ="Released" dataType ="date" > </igx-column >
<igx-column field ="Genre" > </igx-column >
</igx-row-island >
</igx-row-island >
<igx-row-island [height ]="null" [key ]="'Tours'" [autoGenerate ]="false" >
<igx-column field ="Tour" > </igx-column >
<igx-column field ="StartedOn" header ="Started on" > </igx-column >
<igx-column field ="Location" > </igx-column >
<igx-column field ="Headliner" > </igx-column >
</igx-row-island >
</igx-hierarchical-grid >
</div >
html コピー .wrapper {
margin : 16px ;
}
.photo {
vertical-align : middle;
max-height : 62px ;
}
.cell__inner_2 {
margin : 1px
}
.density-chooser {
margin-bottom: 16px ;
}
igx-buttongroup{
display : block;
width : 500px ;
}
scss コピー
このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
使用方法
Excel スタイル フィルタリングをオンにするには、2 つの入力を設定します。allowFiltering
を true
に設定し、filterMode
を excelStyleFilter
に設定してください。
<igx-hierarchical-grid [data ]="data" [autoGenerate ]="true" [allowFiltering ]="true" [filterMode ]="'excelStyleFilter'" >
</igx-hierarchical-grid >
html
インタラクション
特定の列のフィルター メニューを開くには、ヘッダーの Angular フィルター アイコンをクリックします。さらに、選択したヘッダーで Ctrl + Shift + L
の組み合わせを使用できます。列でフィルタリング機能と並べ替え、ピン固定、移動、選択、非表示が設定された場合、オンになっている機能のボタンが表示されます。
フィルターが適用されていない場合、リストのすべての項目が選択されます。リストの上の入力からフィルターされます。データのフィルターは、リストで項目を選択/非選択して [適用] ボタンをクリックするか、あるいは Enter
を押します。リスト項目に適用したフィルタリングは、equals
オペレーターでフィルター式を作成します。各式間のロジック オペレーターは OR
です。
検索ボックスに入力してフィルターを適用すると、検索条件に一致する項目のみが選択されます。ただし、現在フィルターされている項目に項目を追加したい場合は、[現在の選択をフィルターに追加]
オプションを選択する必要があります。
フィルターをクリアしたい場合、[すべて選択] オプションをチェックして [適用] ボタンを押します。
異なる式でフィルターを適用する場合、Text フィルター をクリックし、特定の列で使用できるフィルター演算子のサブメニューを開きます。いずれかを選択してカスタム フィルター ダイアログを開き、フィルターとロジック演算子を使用して式を追加できます。[クリア] ボタンでフィルターをクリアできます。
メニュー機能の構成
ソート、移動、ピン固定、非表示の機能をフィルター メニューから削除できます。これらを制御する入力は以下のとおりです: sortable
、selected
、disablePinning
、disableHiding
。
<igx-hierarchical-grid class ="hgrid" [data ]="localdata" [autoGenerate ]="false" [moving ]="true" [allowFiltering ]='true' filterMode ="excelStyleFilter"
[height ]="'650px'" [width ]="'100%'" [rowHeight ]="'65px'" #hierarchicalGrid >
<igx-column field ="Artist" [filterable ]='true' [sortable ]="true" > </igx-column >
<igx-column field ="Photo" [filterable ]='false' >
<ng-template igxCell let-cell ="cell" >
<div class ="cell__inner_2" >
<img [src ]="cell.value" class ="photo" />
</div >
</ng-template >
</igx-column >
<igx-column field ="Debut" [filterable ]='true' [disablePinning ]="true" [disableHiding ]="true" > </igx-column >
<igx-column field ="Grammy Nominations" [filterable ]='true' [dataType ]="'number'" [sortable ]="false" > </igx-column >
<igx-column field ="Grammy Awards" [filterable ]='true' [dataType ]="'number'" > </igx-column >
<igx-row-island [key ]="'Albums'" [autoGenerate ]="false" [allowFiltering ]='true' filterMode ="excelStyleFilter" >
<igx-column field ="Album" [filterable ]='true' > </igx-column >
<igx-column field ="Launch Date" [filterable ]='true' [dataType ]="'date'" > </igx-column >
<igx-column field ="Billboard Review" [filterable ]='true' [dataType ]="'number'" > </igx-column >
<igx-column field ="US Billboard 200" [filterable ]='true' [dataType ]="'number'" > </igx-column >
<igx-row-island [key ]="'Songs'" [autoGenerate ]="false" >
<igx-column field ="No." > </igx-column >
<igx-column field ="Title" > </igx-column >
<igx-column field ="Released" > </igx-column >
<igx-column field ="Genre" > </igx-column >
</igx-row-island >
</igx-row-island >
<igx-row-island [key ]="'Tours'" [autoGenerate ]="false" >
<igx-column field ="Tour" > </igx-column >
<igx-column field ="Started on" > </igx-column >
<igx-column field ="Location" > </igx-column >
<igx-column field ="Headliner" > </igx-column >
</igx-row-island >
</igx-hierarchical-grid >
html
以下のサンプルは、'Artist' 列で 4 つの機能が有効、'Debut' で 4 つの機能が無効、'Grammy Nominations' でピン固定と非表示のみ有効です。
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxHierarchicalGridModule } from "igniteui-angular" ;
import { HGridExcelStyleFilteringSample2Component } from "./hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-2/hierarchical-grid-excel-style-filtering-sample-2.component" ;
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
HGridExcelStyleFilteringSample2Component
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxPreventDocumentScrollModule,
IgxHierarchicalGridModule
],
providers : [],
entryComponents : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component } from '@angular/core' ;
import { SINGERS } from '../../data/singersData' ;
@Component ({
selector : 'app-hierarchical-grid-excel-style-filtering-sample-2' ,
styleUrls : ['./hierarchical-grid-excel-style-filtering-sample-2.component.scss' ],
templateUrl : 'hierarchical-grid-excel-style-filtering-sample-2.component.html'
})
export class HGridExcelStyleFilteringSample2Component {
public localdata;
constructor ( ) {
this .localdata = SINGERS;
}
public formatter = (a ) => a;
}
ts コピー <div class ="wrapper" >
<igx-hierarchical-grid [igxPreventDocumentScroll ]="true" class ="hgrid" [data ]="localdata" [moving ]="true" [autoGenerate ]="false" [allowFiltering ]='true' filterMode ="excelStyleFilter"
height ="850px" [width ]="'100%'" [rowHeight ]="'65px'" #hierarchicalGrid >
<igx-grid-toolbar >
<igx-grid-toolbar-actions >
<igx-grid-toolbar-hiding > </igx-grid-toolbar-hiding >
</igx-grid-toolbar-actions >
</igx-grid-toolbar >
<igx-column field ="Artist" [filterable ]='true' [sortable ]="true" > </igx-column >
<igx-column field ="Photo" [filterable ]='false' >
<ng-template igxCell let-cell ="cell" >
<div class ="cell__inner_2" >
<img [src ]="cell.value" class ="photo" />
</div >
</ng-template >
</igx-column >
<igx-column field ="Debut" [filterable ]='true' [disablePinning ]="true" [disableHiding ]="true" dataType ="number" [formatter ]="formatter" > </igx-column >
<igx-column field ="GrammyNominations" header ="Grammy Nominations" [filterable ]='true' dataType ="number" [sortable ]="false" > </igx-column >
<igx-column field ="GrammyAwards" header ="Grammy Awards" [filterable ]='true' dataType ="number" > </igx-column >
<igx-row-island [height ]="null" [key ]="'Albums'" [autoGenerate ]="false" [allowFiltering ]='true' filterMode ="excelStyleFilter" >
<igx-column field ="Album" [filterable ]='true' > </igx-column >
<igx-column field ="LaunchDate" header ="Launch Date" [filterable ]='true' [dataType ]="'date'" > </igx-column >
<igx-column field ="BillboardReview" header ="Billboard Review" [filterable ]='true' dataType ="number" > </igx-column >
<igx-column field ="USBillboard200" header ="US Billboard 200" [filterable ]='true' dataType ="number" > </igx-column >
<igx-row-island [height ]="null" [key ]="'Songs'" [autoGenerate ]="false" >
<igx-column field ="Number" header ="No." > </igx-column >
<igx-column field ="Title" > </igx-column >
<igx-column field ="Released" dataType ="date" > </igx-column >
<igx-column field ="Genre" > </igx-column >
</igx-row-island >
</igx-row-island >
<igx-row-island [height ]="null" [key ]="'Tours'" [autoGenerate ]="false" >
<igx-column field ="Tour" > </igx-column >
<igx-column field ="StartedOn" header ="Started on" > </igx-column >
<igx-column field ="Location" > </igx-column >
<igx-column field ="Headliner" > </igx-column >
</igx-row-island >
</igx-hierarchical-grid >
</div >
html コピー .wrapper {
margin : 16px ;
}
.photo {
vertical-align : middle;
max-height : 62px ;
}
.cell__inner_2 {
margin : 1px
}
scss コピー
テンプレート
列機能を無効にせずに Excel スタイル フィルター メニューをさらにカスタマイズする場合は、カスタム テンプレートを使用できます。Excel スタイル フィルター メニューには、テンプレート化のための 2 つのディレクティブがあります:
IgxExcelStyleColumnOperationsTemplateDirective
- ソート、移動、固定などのすべての列操作で領域を再テンプレート化します。
IgxExcelStyleFilterOperationsTemplateDirective
- すべてのフィルター固有の操作で領域を再テンプレート化します。
これらの領域の 1 つだけ、または両方を再テンプレート化できます。これらのディレクティブ内にカスタム コンテンツを配置したり、組み込みの Excel スタイル フィルタリング コンポーネントを使用できます。
次のコードは、igx-excel-style-header
、igx-excel-style-sorting
および igx-excel-style-search
コンポーネントを使用してカスタム Excel スタイル フィルター メニューを定義する方法を示しています。
<igx-hierarchical-grid class ="hgrid" [data ]="localdata" [autoGenerate ]="false" [allowFiltering ]='true' filterMode ="excelStyleFilter"
[height ]="'650px'" [width ]="'100%'" [rowHeight ]="'65px'" #hierarchicalGrid >
<igx-grid-excel-style-filtering [minHeight ]="'380px'" [maxHeight ]="'500px'" >
<igx-excel-style-column-operations >
<igx-excel-style-header
[showPinning ]="true"
[showHiding ]="true"
>
</igx-excel-style-header >
<igx-excel-style-sorting > </igx-excel-style-sorting >
</igx-excel-style-column-operations >
<igx-excel-style-filter-operations >
<igx-excel-style-search > </igx-excel-style-search >
</igx-excel-style-filter-operations >
</igx-grid-excel-style-filtering >
...
<igx-row-island [key ]="'Albums'" [autoGenerate ]="false" [allowFiltering ]='true' filterMode ="excelStyleFilter" >
<igx-grid-excel-style-filtering [minHeight ]="'380px'" [maxHeight ]="'500px'" >
<igx-excel-style-column-operations >
<igx-excel-style-header
[showPinning ]="true"
[showHiding ]="true"
>
</igx-excel-style-header >
<igx-excel-style-sorting > </igx-excel-style-sorting >
</igx-excel-style-column-operations >
<igx-excel-style-filter-operations >
<igx-excel-style-search > </igx-excel-style-search >
</igx-excel-style-filter-operations >
</igx-grid-excel-style-filtering >
....
</igx-hierarchical-grid >
html
igxExcelStyleHeaderIcon
ディレクティブを使用して、列ヘッダーの Excel スタイル フィルタリング アイコンを再テンプレート化することもできます。
<igx-hierarchical-grid ... >
<ng-template igxExcelStyleHeaderIcon >
<igx-icon > filter_alt</igx-icon >
</ng-template >
</igx-hierarchical-grid >
html
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxHierarchicalGridModule } from "igniteui-angular" ;
import { HGridExcelStyleFilteringSample3Component } from "./hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-3/hierarchical-grid-excel-style-filtering-sample-3.component" ;
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
HGridExcelStyleFilteringSample3Component
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxPreventDocumentScrollModule,
IgxHierarchicalGridModule
],
providers : [],
entryComponents : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component } from '@angular/core' ;
import { SINGERS } from '../../data/singersData' ;
@Component ({
selector : 'app-hierarchical-grid-excel-style-filtering-sample-3' ,
styleUrls : ['./hierarchical-grid-excel-style-filtering-sample-3.component.scss' ],
templateUrl : 'hierarchical-grid-excel-style-filtering-sample-3.component.html'
})
export class HGridExcelStyleFilteringSample3Component {
public localdata;
constructor ( ) {
this .localdata = SINGERS;
}
public formatter = (a ) => a;
}
ts コピー <div class ="wrapper" >
<igx-hierarchical-grid [igxPreventDocumentScroll ]="true" class ="hgrid" [data ]="localdata" [moving ]="true" [autoGenerate ]="false" [allowFiltering ]='true' filterMode ="excelStyleFilter"
height ="650px" [width ]="'100%'" [rowHeight ]="'65px'" #hierarchicalGrid >
<igx-grid-toolbar >
<igx-grid-toolbar-actions >
<igx-grid-toolbar-hiding > </igx-grid-toolbar-hiding >
</igx-grid-toolbar-actions >
</igx-grid-toolbar >
<ng-template igxExcelStyleHeaderIcon >
<igx-icon > filter_alt</igx-icon >
</ng-template >
<igx-grid-excel-style-filtering [minHeight ]="'380px'" [maxHeight ]="'500px'" >
<igx-excel-style-column-operations >
<igx-excel-style-header
[showPinning ]="true"
[showHiding ]="true"
>
</igx-excel-style-header >
<igx-excel-style-sorting > </igx-excel-style-sorting >
</igx-excel-style-column-operations >
<igx-excel-style-filter-operations >
<igx-excel-style-search > </igx-excel-style-search >
</igx-excel-style-filter-operations >
</igx-grid-excel-style-filtering >
<igx-column field ="Artist" [filterable ]='true' [sortable ]="true" > </igx-column >
<igx-column field ="Photo" [filterable ]='false' >
<ng-template igxCell let-cell ="cell" >
<div class ="cell__inner_2" >
<img [src ]="cell.value" class ="photo" />
</div >
</ng-template >
</igx-column >
<igx-column field ="Debut" [filterable ]='true' [disablePinning ]="true" [disableHiding ]="true" dataType ="number" [formatter ]="formatter" > </igx-column >
<igx-column field ="GrammyNominations" header ="Grammy Nominations" [filterable ]='true' dataType ="number" [sortable ]="false" > </igx-column >
<igx-column field ="GrammyAwards" header ="Grammy Awards" [filterable ]='true' dataType ="number" > </igx-column >
<igx-row-island [height ]="null" [key ]="'Albums'" [autoGenerate ]="false" [allowFiltering ]='true' filterMode ="excelStyleFilter" >
<igx-grid-excel-style-filtering [minHeight ]="'380px'" [maxHeight ]="'500px'" >
<igx-excel-style-column-operations >
<igx-excel-style-header
[showPinning ]="true"
[showHiding ]="true"
>
</igx-excel-style-header >
<igx-excel-style-sorting > </igx-excel-style-sorting >
</igx-excel-style-column-operations >
<igx-excel-style-filter-operations >
<igx-excel-style-search > </igx-excel-style-search >
</igx-excel-style-filter-operations >
</igx-grid-excel-style-filtering >
<igx-column field ="Album" [filterable ]='true' > </igx-column >
<igx-column field ="LaunchDate" header ="Launch Date" [filterable ]='true' [dataType ]="'date'" > </igx-column >
<igx-column field ="BillboardReview" header ="Billboard Review" [filterable ]='true' dataType ="number" > </igx-column >
<igx-column field ="USBillboard200" header ="US Billboard 200" [filterable ]='true' dataType ="number" > </igx-column >
<igx-row-island [height ]="null" [key ]="'Songs'" [autoGenerate ]="false" >
<igx-column field ="Number" header ="No." > </igx-column >
<igx-column field ="Title" > </igx-column >
<igx-column field ="Released" dataType ="date" > </igx-column >
<igx-column field ="Genre" > </igx-column >
</igx-row-island >
</igx-row-island >
<igx-row-island [height ]="null" [key ]="'Tours'" [autoGenerate ]="false" >
<igx-column field ="Tour" > </igx-column >
<igx-column field ="StartedOn" header ="Started on" > </igx-column >
<igx-column field ="Location" > </igx-column >
<igx-column field ="Headliner" > </igx-column >
</igx-row-island >
</igx-hierarchical-grid >
</div >
html コピー .wrapper {
margin : 16px ;
}
.photo {
vertical-align : middle;
max-height : 62px ;
}
.cell__inner_2 {
margin : 1px
}
scss コピー
以下は、使用可能な Excel スタイルフィルタリング コンポーネントの完全なリストです:
一意の列値ストラテジ
Excel スタイル フィルタリング ダイアログ内のリスト項目は、それぞれの列の一意の値を表します。これらの値は手動で提供し、ロード オン デマンドすることができます。詳細については、Hierarchical Grid リモート データ操作
で説明されています。
書式設定された値のフィルタリング ストラテジ
デフォルトで、Hierarchical Grid コンポーネントは元のセル値に基づいてデータをフィルターしますが、場合によっては書式設定された値に基づいてデータをフィルターすることができます。 そのためには、FormattedValuesFilteringStrategy
を使用します。 以下のサンプルは、列の数値を文字列として書式設定し、文字列値に基づいて Hierarchical Grid をフィルターする方法を示します。
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxHierarchicalGridModule } from "igniteui-angular" ;
import { HGridFormattedFilteringStrategyComponent } from "./hierarchical-grid/hierarchical-grid-formatted-filtering-strategy/hierarchical-grid-formatted-filtering-strategy.component" ;
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
HGridFormattedFilteringStrategyComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxPreventDocumentScrollModule,
IgxHierarchicalGridModule
],
providers : [],
entryComponents : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, ViewChild } from '@angular/core' ;
import { IgxHierarchicalGridComponent, FormattedValuesFilteringStrategy } from 'igniteui-angular' ;
import { SINGERS } from '../../data/singersData' ;
@Component ({
selector : 'app-hierarchical-grid-formatted-filtering-strategy' ,
styleUrls : ['./hierarchical-grid-formatted-filtering-strategy.component.scss' ],
templateUrl : 'hierarchical-grid-formatted-filtering-strategy.component.html'
})
export class HGridFormattedFilteringStrategyComponent {
@ViewChild ('hierarchicalGrid' , { static : true })
public hierarchicalGrid: IgxHierarchicalGridComponent;
public localdata;
public filterStrategy = new FormattedValuesFilteringStrategy();
constructor ( ) {
this .localdata = SINGERS;
}
public decadeFormatter = (value: number ) => Math .floor(value / 10 ) * 10 + 's' ;
}
ts コピー <div class ="wrapper" >
<igx-hierarchical-grid [igxPreventDocumentScroll ]="true" class ="hgrid" [data ]="localdata" [autoGenerate ]="false"
[allowFiltering ]='true' filterMode ="excelStyleFilter" [filterStrategy ]="filterStrategy"
height ="600px" [width ]="'100%'" #hierarchicalGrid >
<igx-column field ="Artist" [sortable ]="true" [disableHiding ]="true" > </igx-column >
<igx-column field ="Debut" header ="Debut Decade" [sortable ]="true" [disableHiding ]="true" [formatter ]="decadeFormatter" > </igx-column >
<igx-column field ="GrammyNominations" header ="Grammy Nominations" dataType ="number" [sortable ]="true" [disableHiding ]="true" > </igx-column >
<igx-column field ="GrammyAwards" header ="Grammy Awards" dataType ="number" [sortable ]="true" [disableHiding ]="true" > </igx-column >
<igx-row-island [height ]="null" [key ]="'Albums'" [autoGenerate ]="false" [allowFiltering ]='true' filterMode ="excelStyleFilter" >
<igx-column field ="Album" [sortable ]="true" [disableHiding ]="true" > </igx-column >
<igx-column field ="LaunchDate" header ="Launch Date" [sortable ]="true" [disableHiding ]="true" [dataType ]="'date'" > </igx-column >
<igx-column field ="BillboardReview" header ="Billboard Review" [sortable ]="true" [disableHiding ]="true" dataType ="number" > </igx-column >
<igx-column field ="USBillboard200" header ="US Billboard 200" [sortable ]="true" [disableHiding ]="true" dataType ="number" > </igx-column >
<igx-row-island [height ]="null" [key ]="'Songs'" [autoGenerate ]="false" >
<igx-column field ="Number" header ="No." > </igx-column >
<igx-column field ="Title" > </igx-column >
<igx-column field ="Released" dataType ="date" > </igx-column >
<igx-column field ="Genre" > </igx-column >
</igx-row-island >
</igx-row-island >
<igx-row-island [height ]="null" [key ]="'Tours'" [autoGenerate ]="false" >
<igx-column field ="Tour" > </igx-column >
<igx-column field ="StartedOn" header ="Started on" > </igx-column >
<igx-column field ="Location" > </igx-column >
<igx-column field ="Headliner" > </igx-column >
</igx-row-island >
</igx-hierarchical-grid >
</div >
html コピー .wrapper {
margin : 16px ;
}
scss コピー
データの同じフィールドに複数の列がバインドされていて、1 つの列にフォーマッタがある場合、書式設定された値のフィルタリング ストラテジは正しく動作しません。
外部の Excel スタイル フィルタリング
上記デモで示されるように、Excel スタイル フィルタリング ダイアログのデフォルトの外観は Hierarchical Grid 内にあります。このダイアログは、フィルターを構成するときにのみ表示されます。ダイアログはグリッドの外部でスタンドアロン コンポーネントとして使用すると、常に表示になります。以下のデモでは、Excel スタイル フィルタリングが Hierarchical Grid とは別に宣言されます。
デモ
使用方法
Excel スタイル フィルタリング コンポーネントを設定するには、column
プロパティを Hierarchical Grid 列の 1 つに設定する必要があります。上記のサンプルで、column
プロパティは Hierarchical Grid 列を表示する IgxSelectComponent の値にバインドされています。
<igx-select #gridColums value ="Artist" >
<label igxLabel > Columns:</label >
<igx-select-item *ngFor ="let c of hierarchicalgrid1.columns" [value ]="c.field" >
{{ c.field }}
</igx-select-item >
</igx-select >
<igx-grid-excel-style-filtering [column ]="hierarchicalgrid1.getColumnByName(gridColums.value)" >
</igx-grid-excel-style-filtering >
html
表示要素が重なる場合のアウトレット設定
Hierarchical Grid の z-index
は、DOM の各グリッドに個別の重ね合わせコンテキストを作成します。これにより、グリッドのすべての子孫要素が互いに重ね合うことなく意図したとおりに描画されます。
ただし、グリッドの外側にある要素 (Excel スタイル フィルターなど) は、同じ z-index
を持つ外側の要素 (たとえば、2 つのグリッドが上下に重ねる) と競合し、誤った描画が発生します。この問題の解決策は、outlet
プロパティを外部のアウトレット ディレクティブに設定し、オーバーレイ要素が常に上に表示されるようにすることです。
デモ
スタイル設定
ページネーターのスタイル設定を始めるには、すべてのテーマ関数とコンポーネントミックスインが存在する index
ファイルをインポートする必要があります。
@use "igniteui-angular/theming" as *;
scss
Excel スタイルのフィルタリング ダイアログは、filtering-row-background
パラメーターを使用して、グリッドのテーマから背景色を取得します。背景を変更するには、カスタム テーマを作成する必要があります。
$custom-grid : grid-theme(
$filtering-row-background : #ffcd0f
);
scss
ボタン、チェックボックス、リスト、さらにはドロップダウンなど、フィルタリング ダイアログのような Excel 内には明らかに多くのコンポーネントがあります。スタイルを設定するには、それぞれに個別のテーマを作成する必要があります。
$dark-button : button-theme(
$background : #ffcd0f ,
$foreground : #292826 ,
$hover-background : #292826 ,
$hover-foreground : #ffcd0f
);
$dark-input-group : input-group-theme(
$box-background : #ffcd0f ,
$idle-text-color : #292826 ,
$focused-text-color : #292826 ,
$filled-text-color : #292826
);
$custom-list : list-theme(
$background : #ffcd0f
);
$custom-checkbox : checkbox-theme(
$empty-color : #292826 ,
$fill-color : #292826 ,
$tick-color : #ffcd0f ,
$label-color : #292826
);
$custom-drop-down : drop-down-theme(
$background-color : #ffcd0f ,
$item-text-color : #292826 ,
$hover-item-background : #292826 ,
$hover-item-text-color : #ffcd0f
);
scss
上記のようにカラーの値をハードコーディングする代わりに、palette
および color
関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細についてはパレット
のトピックをご覧ください。
この例では、リストされたコンポーネントのパラメーターの一部のみを変更しましたが、button-theme
、checkbox-theme
、drop-down-theme
、input-group-theme
、list-theme
テーマは、それぞれのスタイルを制御するためのより多くのパラメーターを提供します。
最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを含める ことです。また、入力のプレース ホルダーの色プロパティを設定します。
@include css-vars($custom-drop-down );
@include css-vars($custom-grid );
.igx-excel-filter ,
.igx-excel-filter__secondary {
@include css-vars($dark-button );
@include css-vars($dark-input-group );
@include css-vars($custom-list );
@include css-vars($custom-checkbox );
.igx-input-group__input ::placeholder {
color : #ffcd0f ;
}
}
scss
.igx-excel-filter
と .igx-excel-filter__secondary
内のほとんどのコンポーネントのミックスインをスコープするため、これらのカスタムテーマは、Excel スタイル フィルタリング ダイアログとそのすべてのサブダイアログにネストされたコンポーネントのみに影響します。そうでない場合、他のボタン、チェックボックス、入力グループ、およびリストも影響を受けます。
コンポーネントが Emulated
ViewEncapsulation を使用している場合、::ng-deep
を使用してこのカプセル化を解除する必要があります。
:host {
::ng-deep {
@include css-vars($custom-drop-down );
@include css-vars($custom-grid );
.igx-excel-filter ,
.igx-excel-filter__secondary {
@include css-vars($dark-button );
@include css-vars($dark-input-group );
@include css-vars($custom-list );
@include css-vars($custom-checkbox );
.igx-input-group__input ::placeholder {
color : #ffcd0f ;
}
}
}
}
scss
デモ
このサンプルは、Change Theme
(テーマの変更) から選択したグローバル テーマに影響を受けません。
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。