Angular Grid フィルタリング
IgniteUI for Angular Grid コンポーネント は、クイック フィルタリング、Excel スタイル フィルタリング 、および高度なフィルタリング の 3 つの異なるフィルタリング タイプを提供します。それらのフィルタリング タイプは指定された基準を満たすレコードのみを表示できるようにします。Ignite UI の Material UI グリッドコンポーネントは、Grid がバインドされているデータコンテナーを介して、Angular フィルター機能と広範なフィルター API を提供します。
Angular Grid フィルタリングの例
以下のサンプルは、Grid のクイック フィルタリング ユーザー エクスペリエンスを示しています。API filter() メソッドは、外部の igxInputGroup コンポーネントを介して ProductName 列に contains 条件を適用するために使用されます。
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 {
IgxGridModule,
IgxRippleModule,
IgxInputGroupModule
} from "igniteui-angular" ;
import { FilteringSampleComponent } from "./grid/grid-filtering-sample/grid-filtering-sample.component" ;
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
FilteringSampleComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxPreventDocumentScrollModule,
IgxGridModule,
IgxRippleModule,
IgxInputGroupModule
],
providers : [],
entryComponents : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, OnInit, ViewChild } from '@angular/core' ;
import { IgxGridComponent, IgxStringFilteringOperand } from 'igniteui-angular' ;
import { DATA } from '../../data/nwindData' ;
@Component ({
selector : 'app-grid-sample' ,
styleUrls : ['./grid-filtering-sample.component.scss' ],
templateUrl : 'grid-filtering-sample.component.html'
})
export class FilteringSampleComponent implements OnInit {
@ViewChild ('grid1' , { read : IgxGridComponent, static : true })
public grid1: IgxGridComponent;
public data: any [];
constructor ( ) {
}
public ngOnInit(): void {
this .data = DATA;
}
public filter (target: EventTarget ) {
this .grid1.filter('ProductName' , (target as HTMLInputElement).value, IgxStringFilteringOperand.instance().condition('contains' ));
}
public formatDate (val: Date ) {
return new Intl .DateTimeFormat('en-US' ).format(val);
}
public formatCurrency (val: string ) {
return parseInt (val, 10 ).toFixed(2 );
}
}
ts コピー <div class ="grid__wrapper" >
<div class ="sample__header" >
<igx-input-group >
<input class ="gridSample__filter" igxInput type ="text" placeholder ="Filter by product name" (input )="filter($event.target)" >
</igx-input-group > <br >
</div >
<igx-grid [igxPreventDocumentScroll ]="true" #grid1 [data ]="data" [autoGenerate ]="false" height ="480px" width ="100%" [allowFiltering ]="true" >
<igx-column field ="ProductName" header ="Product Name" [dataType ]="'string'" >
</igx-column >
<igx-column field ="QuantityPerUnit" header ="Quantity Per Unit" [dataType ]="'string'" >
</igx-column >
<igx-column field ="UnitPrice" header ="Unit Price" dataType ="number" >
<ng-template igxCell let-cell ="cell" let-val let-row >
{{+val | currency}}
</ng-template >
</igx-column >
<igx-column field ="OrderDate" header ="Order Date" [dataType ]="'date'" [formatter ]="formatDate" >
</igx-column >
<igx-column field ="Discontinued" header ="Discontinued" [dataType ]="'boolean'" >
<ng-template igxCell let-cell ="cell" let-val >
<img *ngIf ="val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/active.png" title ="Continued" alt ="Continued" />
<img *ngIf ="!val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/expired.png" title ="Discontinued" alt ="Discontinued" />
</ng-template >
</igx-column >
</igx-grid >
</div >
html コピー .grid__wrapper {
margin : 0 16px ;
}
.gridSample__filter {
width : rem(200px );
}
.cell__inner ,
.cell__inner_2 {
display : flex;
align-items : center;
height : 100% ;
}
.cell__inner {
position : relative;
justify-content : space-between;
}
scss コピー
このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
設定
フィルタリングが有効かどうか、およびどのフィルタリング モードを使用するかを指定するために、Grid は次のブール プロパティを公開します - allowFiltering
、allowAdvancedFiltering
、filterMode
と filterable
。
allowFiltering プロパティを使用して、以下のオプションを指定できます:
false - 対応する列のフィルタリングが無効になります /デフォルト値/。
true - 対応する列のフィルタリングが有効になります。
allowAdvancedFiltering プロパティを使用して、以下のオプションを指定できます:
false - 対応するグリッドのフィルタリングが無効になります /デフォルト値/。
true - 対応するグリッドのフィルタリングが有効になります。
filterMode プロパティを使用して、以下のオプションを指定できます:
quickFilter - 簡易なフィルタリング UI /デフォルト値/。
excelStyleFilter - Excel のようなフィルタリング UI。
filterable プロパティを使用して、以下のオプションを指定できます:
true - 対応する列のフィルタリングが有効なになります /デフォルト値/。
false - 対応する列のフィルタリングが無効になります。
<igx-grid #grid1 [data ]="data" [autoGenerate ]="false" [allowFiltering ]="true" >
<igx-column field ="ProductName" > </igx-column >
<igx-column field ="Price" [dataType ]="'number'" [filterable ]="false" >
</igx-grid >
html
ただし、高度なフィルタリング を有効にするには、allowAdvancedFiltering
入力プロパティを true
に設定します。
<igx-grid [data ]="data" [autoGenerate ]="true" [allowAdvancedFiltering ]="true" >
</igx-grid >
html
Grid で quickFilter
/excelStyleFilter
と高度なフィルタリング ユーザー インターフェイスの両方を有効にできます。両フィルタリング ユーザー インターフェイスは、互いに依存せずに機能します。Grid の最終的なフィルター結果は、2 つのフィルター結果の共通部分です。
インタラクション
特定の列のフィルター行を開くには、ヘッダー下のフィルター チップをクリックします。状態を追加するために入力の左側のドロップダウンを使用してフィルター オペランドを選択し、値を入力します。number
と date
列には、Equals がデフォルトで選択されます。string
には 'Contains'、boolean
には 'All' が選択されます。'Enter' を押して条件を確定して他の条件を追加できます。条件チップの間にドロップダウンがあり、それらの間の論理演算子を決定します。'AND' がデフォルトで選択されます。条件の削除はチップの X ボタンをクリックします。編集はチップを選択、入力はチップのデータで生成されます。フィルター行が開いているときにフィルター可能な列のヘッダーをクリックして選択し、フィルター条件を追加できます。
列に適用したフィルターがある場合、フィルター行が閉じられるとチップの閉じるボタンをクリックした条件の削除やいずれかのチップを選択してフィルター行を開くことができます。すべての条件を表示するための十分なスペースがない場合、条件数を示すバッジ付きのフィルター アイコンが表示されます。フィルター行を開くためにクリックできます。
使用方法
デフォルトの定義済みフィルタリングおよび標準のフィルタリング条件があり、カスタム実装で置き換えることも可能です。また、カスタム フィルタリング条件を追加することもできます。Grid には、簡易なフィルター UI と詳細なフィルター オプションがあります。列で設定された dataType
に基づいて、適切なフィルタリング処理 のセットがフィルター UI ドロップダウンに読み込まれます。また、ignoreCase
と最初の condition
プロパティを設定できます。
フィルタリング機能は、allowFiltering
入力を true
に設定すると Grid コンポーネントで有効になります。デフォルトの filterMode
は quickFilter
で、実行時には変更できません 。特定の列に対してこの機能を無効にするには、filterable
入力を false
に設定します。
<igx-grid [data ]="data" [autoGenerate ]="false" [allowFiltering ]="true" >
<igx-column field ="ProductName" > </igx-column >
<igx-column field ="Price" dataType ="number" > </igx-column >
<igx-column field ="Discontinued" [dataType ]="'boolean'" [filterable ]="false" >
</igx-grid >
html
string
型の値が dataType Date
の列で使用される場合、Grid は値を Date
オブジェクトに解析しないためフィルター条件は使用できません。string
オブジェクトを使用する場合、値を Date
オブジェクトに解析するためのロジックをアプリケーション レベルで実装する必要があります。
列または複数の列は Grid API でフィルターできます。Grid は、このタスクに複数のメソッドを公開します (filter
、filterGlobal
、clearFilter
)。
filter
- 単一の列または複数の列をフィルターします。
以下の 5 つのフィルタリング オペランド クラスが公開されます。
this .grid.filter('ProductName' , 'myproduct' , IgxStringFilteringOperand.instance().condition('contains' ), true );
typescript
必要なパラメーターは列フィールド キーとフィルター用語のみです。条件および大文字と小文字の区別を設定しない場合、列プロパティで推測されます。フィルターが複数ある場合、このメソッドはフィルター式の配列を受け取ります。
フィルタリング操作でグリッドにバインドされているデータ ソースは変更されません。
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const productFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName' );
const productExpression = {
condition : IgxStringFilteringOperand.instance().condition('contains' ),
fieldName : 'ProductName' ,
ignoreCase : true ,
searchVal : 'ch'
};
productFilteringExpressionsTree.filteringOperands.push(productExpression);
gridFilteringExpressionsTree.filteringOperands.push(productFilteringExpressionsTree);
const priceFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And, 'Price' );
const priceExpression = {
condition : IgxNumberFilteringOperand.instance().condition('greaterThan' ),
fieldName : 'UnitPrice' ,
ignoreCase : true ,
searchVal : 20
};
priceFilteringExpressionsTree.filteringOperands.push(priceExpression);
gridFilteringExpressionsTree.filteringOperands.push(priceFilteringExpressionsTree);
this .grid.filteringExpressionsTree = gridFilteringExpressionsTree;
typescript
this .grid.filteringLogic = FilteringLogic.Or;
this .grid.filterGlobal('myproduct' , IgxStringFilteringOperand.instance().condition('contains' ), false );
typescript
clearFilter
- 対象列から適用されたフィルターを削除します。引数がない場合、すべての列のフィルターをクリアします。
this .grid.clearFilter('ProductName' );
this .grid.clearFilter();
typescript
初期のフィルター状態
グリッドの初期フィルタリング状態の設定は、IgxGridComponent
filteringExpressionsTree
プロパティを IFilteringExpressionsTree
の配列に設定して各列をフィルターします。
constructor (private cdr: ChangeDetectorRef ) { }
public ngAfterViewInit ( ) {
const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
const productFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And, 'ProductName' );
const productExpression = {
condition : IgxStringFilteringOperand.instance().condition('contains' ),
fieldName : 'ProductName' ,
ignoreCase : true ,
searchVal : 'c'
};
productFilteringExpressionsTree.filteringOperands.push(productExpression);
gridFilteringExpressionsTree.filteringOperands.push(productFilteringExpressionsTree);
this .grid.filteringExpressionsTree = gridFilteringExpressionsTree;
this .cdr.detectChanges();
}
typescript
フィルター ロジック
Grid コントロールの filteringLogic
プロパティは Grid で複数の列のフィルターが解決する方法を制御します。Grid API または Grid の入力プロパティによって変更できます。
import { FilteringLogic } from 'igniteui-angular' ;
...
this .grid.filteringLogic = FilteringLogic.OR;
typescript
AND
のデフォルト値は現在適用されているすべてのフィルター式と一致する行のみを返します。上記の例は、'ProductName' セル値が 'myproduct' を含み、'Price' セル値が 55 より大きい場合に行が返されます。
OR
に設定される場合、'ProductName' セル値が 'myproduct' を含むか、'Price' セル値が 55 より大きい場合に行が返されます。
リモート フィルタリング
Grid はリモート フィルタリングをサポートします。詳細については、Grid リモート データ操作
で説明されています。
カスタム フィルタリング オペランド
フィルタリング メニューは、フィルタリング オペランド削除または変更してカスタマイズします。デフォルトでフィルタリング メニューは列のデータ型 (IgxBooleanFilteringOperand
、IgxDateFilteringOperand
、IgxNumberFilteringOperand
、IgxStringFilteringOperand
) に基づいて特定のオペランドを含みます。これらのクラスまたは基本クラス IgxFilteringOperand
を拡張してフィルタリング メニュー項目の動作を変更できます。
以下のサンプルの "Product Name" と "Discontinued" 列フィルタリング メニューを確認してください。"Discontinued" 列フィルターでは、オペランドの数が All に制限されています。"Product Name" 列フィルター - Contains および Does Not Contain オペランド ロジックを変更して大文字と小文字を区別した検索を実行し、Empty と Not Empty を追加します。
これにより、IgxStringFilteringOperand
と IgxBooleanFilteringOperand
を拡張し、オペランドとロジックを変更して列 filters
入力を新しいオペランドに設定します。
export class GridCustomFilteringComponent {
public caseSensitiveFilteringOperand = CaseSensitiveFilteringOperand.instance();
public booleanFilteringOperand = BooleanFilteringOperand.instance();
}
export class CaseSensitiveFilteringOperand extends IgxStringFilteringOperand {
private constructor ( ) {
super ();
const customOperations = [
{
iconName : 'contains' ,
isUnary : false ,
logic : (target: string , searchVal: string , ignoreCase?: boolean ) => {
ignoreCase = false ;
const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase);
return target.indexOf(search) !== -1 ;
},
name : 'Contains (case sensitive)'
},
{
iconName : 'does_not_contain' ,
isUnary : false ,
logic : (target: string , searchVal: string , ignoreCase?: boolean ) => {
ignoreCase = false ;
const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase);
return target.indexOf(search) === -1 ;
},
name : 'Does Not Contain (case sensitive)'
}
];
const emptyOperators = [
this .operations[6 ],
this .operations[7 ]
];
this .operations = customOperations.concat(emptyOperators);
}
}
export class BooleanFilteringOperand extends IgxBooleanFilteringOperand {
private constructor ( ) {
super ();
this .operations = [
this .operations[0 ],
this .operations[1 ],
this .operations[2 ]
];
}
}
typescript
<igx-grid [data ]="data" [autoGenerate ]="false" [allowFiltering ]="true" >
<igx-column field ="ProductName" header ="Product Name" [filters ]="caseSensitiveFilteringOperand" > </igx-column >
<igx-column field ="Discontinued" header ="Discontinued" [dataType ]="'boolean'" [filters ]="booleanFilteringOperand" >
<ng-template igxCell let-cell ="cell" let-val >
<img *ngIf ="val" src ="assets/images/grid/active.png" title ="Delivered" alt ="Delivered" />
<img *ngIf ="!val" src ="assets/images/grid/expired.png" title ="Undelivered" alt ="Undelivered" />
</ng-template >
</igx-column >
</igx-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 { GridCustomFilteringComponent } from "./grid/grid-custom-filtering/grid-custom-filtering.component" ;
import { IgxGridModule } from "igniteui-angular" ;
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
GridCustomFilteringComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxPreventDocumentScrollModule,
IgxGridModule
],
providers : [],
entryComponents : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, OnInit } from '@angular/core' ;
import { IgxBooleanFilteringOperand, IgxStringFilteringOperand } from 'igniteui-angular' ;
import { DATA } from '../../data/nwindData' ;
@Component ({
selector : 'app-grid-custom-filtering' ,
styleUrls : ['./grid-custom-filtering.component.scss' ],
templateUrl : './grid-custom-filtering.component.html'
})
export class GridCustomFilteringComponent implements OnInit {
public data: any [];
public caseSensitiveFilteringOperand = CaseSensitiveFilteringOperand.instance();
public booleanFilteringOperand = BooleanFilteringOperand.instance();
public ngOnInit ( ) {
this .data = DATA;
}
public formatDate (val: Date ) {
return new Intl .DateTimeFormat('en-US' ).format(val);
}
public formatCurrency (val: string ) {
return parseInt (val, 10 ).toFixed(2 );
}
}
export class CaseSensitiveFilteringOperand extends IgxStringFilteringOperand {
private constructor ( ) {
super ();
const customOperations = [
{
iconName : 'contains' ,
isUnary : false ,
logic : (target: string , searchVal: string , ignoreCase?: boolean ) => {
ignoreCase = false ;
const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase);
return target.indexOf(search) !== -1 ;
},
name : 'Contains (case sensitive)'
},
{
iconName : 'does-not-contain' ,
isUnary : false ,
logic : (target: string , searchVal: string , ignoreCase?: boolean ) => {
ignoreCase = false ;
const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
target = IgxStringFilteringOperand.applyIgnoreCase(target, ignoreCase);
return target.indexOf(search) === -1 ;
},
name : 'Does Not Contain (case sensitive)'
}
];
const emptyOperators = [
this .operations[6 ],
this .operations[7 ]
];
this .operations = customOperations.concat(emptyOperators);
}
}
export class BooleanFilteringOperand extends IgxBooleanFilteringOperand {
private constructor ( ) {
super ();
this .operations = [
this .operations[0 ],
this .operations[1 ],
this .operations[2 ]
];
}
}
ts コピー <div class ="grid__wrapper" >
<igx-grid [igxPreventDocumentScroll ]="true" #grid1 [data ]="data" [autoGenerate ]="false" height ="550px" width ="100%" [allowFiltering ]="true" >
<igx-column field ="ProductName" header ="Product Name" [dataType ]="'string'" [filters ]="caseSensitiveFilteringOperand" >
</igx-column >
<igx-column field ="QuantityPerUnit" header ="Quantity Per Unit" [dataType ]="'string'" >
</igx-column >
<igx-column field ="UnitPrice" header ="Unit Price" dataType ="number" >
<ng-template igxCell let-cell ="cell" let-val let-row >
{{+val | currency}}
</ng-template >
</igx-column >
<igx-column field ="OrderDate" header ="Order Date" [dataType ]="'date'" [formatter ]="formatDate" >
</igx-column >
<igx-column field ="Discontinued" header ="Discontinued" [dataType ]="'boolean'" [filters ]="booleanFilteringOperand" >
<ng-template igxCell let-cell ="cell" let-val >
<img *ngIf ="val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/active.png" title ="Continued" alt ="Continued" />
<img *ngIf ="!val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/expired.png" title ="Discontinued" alt ="Discontinued" />
</ng-template >
</igx-column >
</igx-grid >
</div >
html コピー .grid__wrapper {
padding-top : 16px ;
margin : 0 16px ;
}
scss コピー
フィルター セルの再テンプレート化
フィルター セルを再テンプレート化するために、igxFilterCellTemplate
とマークされたテンプレートを追加することができます。以下のサンプルでは、文字列カラムへの入力と日付列に IgxDatePicker が追加されています。ユーザーが値を入力または選択すると、文字列カラムには contains 演算子、日付列には equals 演算子を使用したフィルターが、グリッドのパブリック API を使用して適用されます。
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 {
IgxGridModule,
IgxRippleModule,
IgxInputGroupModule,
IgxDatePickerModule
} from "igniteui-angular" ;
import { FilteringTemplateSampleComponent } from "./grid/grid-filtering-template-sample/grid-filtering-template-sample.component" ;
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
FilteringTemplateSampleComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxPreventDocumentScrollModule,
IgxGridModule,
IgxRippleModule,
IgxInputGroupModule,
IgxDatePickerModule
],
providers : [],
entryComponents : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, OnInit, ViewChild } from '@angular/core' ;
import {
GridColumnDataType,
IgxColumnComponent,
IgxDateFilteringOperand,
IgxGridComponent,
IgxNumberFilteringOperand,
IgxStringFilteringOperand,
ColumnType
} from 'igniteui-angular' ;
import { DATA } from '../../data/nwindData' ;
@Component ({
selector : 'app-grid-sample' ,
styleUrls : ['./grid-filtering-template-sample.component.scss' ],
templateUrl : 'grid-filtering-template-sample.component.html'
})
export class FilteringTemplateSampleComponent implements OnInit {
@ViewChild ('grid1' , { read : IgxGridComponent, static : true })
public grid1: IgxGridComponent;
public data: any [];
public displayDateFormat = 'M/d/y' ;
private _filterValues = new Map <ColumnType, any >();
constructor ( ) {
}
public ngOnInit(): void {
this .data = DATA;
}
public formatDate (val: Date ) {
return new Intl .DateTimeFormat('en-US' ).format(val);
}
public formatCurrency (val: string ) {
return parseInt (val, 10 ).toFixed(2 );
}
public getFilterValue(column: ColumnType): any {
return this ._filterValues.has(column) ? this ._filterValues.get(column) : null ;
}
public onKeyDown (event: KeyboardEvent ) {
event.stopImmediatePropagation();
}
public onInput (input: any , column: ColumnType ) {
this ._filterValues.set(column, input.value);
if (input.value === '' ) {
this .grid1.clearFilter(column.field);
return ;
}
let operand = null ;
switch (column.dataType) {
case GridColumnDataType.Number:
operand = IgxNumberFilteringOperand.instance().condition('equals' );
break ;
default :
operand = IgxStringFilteringOperand.instance().condition('contains' );
}
this .grid1.filter(column.field, this .transformValue(input.value, column), operand, column.filteringIgnoreCase);
}
public clearInput (column: ColumnType ) {
this ._filterValues.delete(column);
this .grid1.clearFilter(column.field);
}
public onClick (inputGroup ) {
if (!inputGroup.isFocused) {
inputGroup.input.focus();
}
}
public onDateSelected (event, column: ColumnType ) {
if (!event) {
this .clearInput(column);
return ;
}
this ._filterValues.set(column, event);
this .grid1.filter(column.field, event, IgxDateFilteringOperand.instance().condition('equals' ),
column.filteringIgnoreCase);
}
private transformValue(value: any , column : ColumnType): any {
if (column.dataType === GridColumnDataType.Number) {
value = parseFloat (value);
}
return value;
}
}
ts コピー <div class ="grid__wrapper" >
<igx-grid [igxPreventDocumentScroll ]="true" #grid1 [data ]="data" [autoGenerate ]="false" height ="470px" width ="100%" [allowFiltering ]="true" >
<igx-column field ="ProductName" header ="Product Name" [dataType ]="'string'" [filterCellTemplate ]="defaultFilterTemplate" >
</igx-column >
<igx-column field ="QuantityPerUnit" header ="Quantity Per Unit" [dataType ]="'string'" [filterCellTemplate ]="defaultFilterTemplate" >
</igx-column >
<igx-column field ="UnitPrice" header ="Unit Price" dataType ="number" [filterCellTemplate ]="defaultFilterTemplate" >
<ng-template igxCell let-cell ="cell" let-val let-row >
{{+val | currency}}
</ng-template >
</igx-column >
<igx-column field ="OrderDate" header ="Order Date" [dataType ]="'date'" [formatter ]="formatDate" [filterCellTemplate ]="dateFilterTemplate" >
</igx-column >
<igx-column field ="Discontinued" header ="Discontinued" [dataType ]="'boolean'" >
<ng-template igxCell let-cell ="cell" let-val >
<img *ngIf ="val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/active.png" title ="Continued" alt ="Continued" />
<img *ngIf ="!val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/expired.png" title ="Discontinued" alt ="Discontinued" />
</ng-template >
</igx-column >
</igx-grid >
<ng-template #defaultFilterTemplate igxFilterCellTemplate let-column ="column" >
<div class ="filter-cell" >
<igx-input-group #inputGr class ="filter-input" type ="box" [displayDensity ]="'compact'" >
<igx-prefix >
<igx-icon > search</igx-icon >
</igx-prefix >
<input
#input
igxInput
tabindex ="0"
placeholder ="Filter..."
autocomplete ="off"
[value ]="getFilterValue(column)"
(input )="onInput(input, column)"
(click )="onClick(inputGr)"
(keydown )="onKeyDown($event)" />
<igx-suffix *ngIf ="input.value || input.value === '0'" (click )="clearInput(column)" tabindex ="0" >
<igx-icon > clear</igx-icon >
</igx-suffix >
</igx-input-group >
</div >
</ng-template >
<ng-template #dateFilterTemplate igxFilterCellTemplate let-column ="column" >
<div class ="filter-cell" >
<igx-date-picker #picker [value ]="getFilterValue(column)" (valueChange )="onDateSelected($event, column)" mode ="dialog"
[displayDensity ]="'compact'" placeholder ="Filter..." [displayFormat ]="displayDateFormat" type ="box" >
<igx-picker-toggle igxPrefix >
<igx-icon > search</igx-icon >
</igx-picker-toggle >
<igx-picker-clear *ngIf ="picker.value" igxSuffix >
<igx-icon > clear</igx-icon >
</igx-picker-clear >
</igx-date-picker >
</div >
</ng-template >
</div >
html コピー .grid__wrapper {
padding-top : 16px ;
margin : 0 16px ;
}
.gridSample__filter {
width : rem(200px );
}
.cell__inner ,
.cell__inner_2 {
display : flex;
align-items : center;
height : 100% ;
}
.cell__inner {
position : relative;
justify-content : space-between;
}
.filter-cell {
flex-grow : 1 ;
}
scss コピー
スタイル設定
フィルター行のスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する index
ファイルをインポートする必要があります。
@use "igniteui-angular/theming" as *;
scss
最も簡単な方法は、grid-theme
を拡張する新しいテーマを作成し、$filtering-row-text-color
、$filtering-row-background
、$filtering-header-text-color
、$filtering-header-background
パラメーターを受け取ります。
$custom-grid : grid-theme(
$filtering-row-text-color : #292826 ,
$filtering-row-background : #ffcd0f ,
$filtering-header-text-color : #292826 ,
$filtering-header-background : #ffcd0f
);
scss
以下のように、grid-theme
は、フィルタリング行とフィルタリングされているそれぞれの列ヘッダーの色のみを制御します。入力グループ、チップ、ボタンなど、フィルタリング行内には明らかに多くのコンポーネントがあります。スタイルの設定は、それぞれに個別のテーマを作成する必要があるため、新しい input-group-theme
と新しい button-theme
を作成します。
$dark-input-group : input-group-theme(
$box-background : #ffcd0f ,
$idle-text-color : #292826 ,
$focused-text-color : #292826 ,
$filled-text-color : #292826
);
$dark-button : button-theme(
$flat-background : #ffcd0f ,
$flat-text-color : #292826 ,
$flat-hover-background : #292826 ,
$flat-hover-text-color : #ffcd0f
);
scss
上記のようにカラーの値をハードコーディングする代わりに、palette
および color
関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細についてはパレット
のトピックをご覧ください。
この例では、入力グループとボタンのパラメーターの一部のみを変更しましたが、input-group-theme
と button-theme
は、それぞれのスタイルを制御するためのより多くのパラメーターを提供します。
最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを含める ことです。また、入力のプレース ホルダーの色プロパティを設定します。
@include css-vars($custom-grid );
.igx-grid__filtering-row {
@include css-vars($dark-button );
@include css-vars($dark-input-group );
.igx-input-group__input ::placeholder {
color : #ffcd0f ;
}
}
scss
作成した button-theme と input-group-theme を .igx-grid__filtering-row
内に含めて、フィルタリング行ボタンとその入力グループのみにスタイルを設定します。そうでない場合は、グリッド内の他のボタンと入力グループも影響を受けます。
コンポーネントが Emulated
ViewEncapsulation を使用している場合、::ng-deep
を使用してこのカプセル化を解除する必要があります。
:host {
::ng-deep {
@include css-vars($custom-grid );
.igx-grid__filtering-row {
@include css-vars($dark-button );
@include css-vars($dark-input-group )
.igx-input-group__input ::placeholder {
color : #ffcd0f ;
}
}
}
}
scss
デモ
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 { IgxGridModule } from "igniteui-angular" ;
import { GridFilteringStyleComponent } from "./grid/grid-filtering-style/grid-filtering-style.component" ;
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
GridFilteringStyleComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxPreventDocumentScrollModule,
IgxGridModule
],
providers : [],
entryComponents : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, OnInit } from '@angular/core' ;
import { DATA } from '../../data/nwindData' ;
@Component ({
selector : 'app-grid-filtering-style' ,
styleUrls : ['./grid-filtering-style.component.scss' ],
templateUrl : './grid-filtering-style.component.html'
})
export class GridFilteringStyleComponent implements OnInit {
public data: any [];
constructor ( ) {
}
public ngOnInit(): void {
this .data = DATA;
}
public formatDate (val: Date ) {
return new Intl .DateTimeFormat('en-US' ).format(val);
}
public formatCurrency (val: string ) {
return parseInt (val, 10 ).toFixed(2 );
}
}
ts コピー <div class ="grid__wrapper" >
<igx-grid [igxPreventDocumentScroll ]="true" #grid1 [data ]="data" [autoGenerate ]="false" height ="480px" width ="100%" [allowFiltering ]="true" >
<igx-column field ="ProductName" header ="Product Name" [dataType ]="'string'" >
</igx-column >
<igx-column field ="QuantityPerUnit" header ="Quantity Per Unit" [dataType ]="'string'" >
</igx-column >
<igx-column field ="UnitPrice" header ="Unit Price" dataType ="number" >
<ng-template igxCell let-cell ="cell" let-val let-row >
{{+val | currency}}
</ng-template >
</igx-column >
<igx-column field ="OrderDate" header ="Order Date" [dataType ]="'date'" [formatter ]="formatDate" >
</igx-column >
<igx-column field ="Discontinued" header ="Discontinued" [dataType ]="'boolean'" >
<ng-template igxCell let-cell ="cell" let-val >
<img *ngIf ="val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/active.png" title ="Continued" alt ="Continued" />
<img *ngIf ="!val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/expired.png" title ="Discontinued" alt ="Discontinued" />
</ng-template >
</igx-column >
</igx-grid >
</div >
html コピー @use '../../../variables' as *;
$yellow : #ffcd0f ;
$bg : #292826 ;
$gray : #404040 ;
$light-gray : rgba(255 , 255 , 255 , .54 );
$custom-grid : grid-theme(
$filtering-row-text-color : $bg ,
$filtering-row-background : $yellow ,
$filtering-header-text-color : $bg ,
$filtering-header-background : $yellow
);
$dark-input-group : input-group-theme(
$box-background : $yellow ,
$idle-text-color : $bg ,
$focused-text-color : $bg ,
$filled-text-color : $bg
);
$dark-button : button-theme(
$background : $yellow ,
$foreground : $bg ,
$hover-background : $bg ,
$hover-foreground : $yellow
);
$dark-drop-down-theme : drop-down-theme(
$background-color : $bg ,
$item-text-color : $yellow ,
$selected-item-background : $yellow ,
$selected-item-text-color : $bg ,
$focused-item-background : $yellow ,
$focused-item-text-color : $bg ,
$selected-focus-item-background : $yellow ,
$selected-focus-item-text-color : $bg ,
$selected-hover-item-background : $yellow ,
$selected-hover-item-text-color : $bg
);
:host {
::ng-deep {
@include css-vars($custom-grid );
@include css-vars($dark-drop-down-theme );
igx-grid-filtering-row {
@include css-vars($dark-button );
@include css-vars($dark-input-group );
.igx-input-group__input ::placeholder {
color : $bg ;
}
}
}
}
.grid__wrapper {
margin : 15px ;
}
scss コピー
このサンプルは、Change Theme
(テーマの変更) から選択したグローバル テーマに影響を受けません。
既知の制限
Firefox などの一部のブラウザーは、地域固有の小数点区切り文字をグループ化区切りと見なすため解析できず、無効になります。数値列フィルター値にそのような値を入力すると、数値の有効な部分のみがフィルター式に適用されます。詳細については、Firefox 問題 を参照してください。
6.1.0 の重大な変更
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。