Angular 그리드 필터링
Angular Grid 구성 요소 용 IgniteUI는 지정된 기준을 충족하는 레코드만 표시할 수 있는 빠른 필터링, Excel 스타일 필터링 및 고급 필터링의 세 가지 필터링 유형을 제공합니다. Ignite UI의 Material UI 그리드 구성 요소는 그리드가 바인딩된 데이터 컨테이너를 통해 각도 필터 기능과 광범위한 필터링 API를 제공합니다.
Angular Grid Filtering Example
아래 샘플은 Grid의 빠른 필터링 사용자 경험을 보여줍니다. API filter() 메서드는 외부 igxInputGroup 구성 요소를 통해 ProductName 열에 포함 조건을 적용하는 데 사용됩니다.
Setup
필터링이 활성화되었는지 여부와 어떤 필터링 모드를 사용해야 하는지 지정하기 위해 그리드는 다음과 같은 부울 속성(allowFiltering, allowAdvancedFiltering, filterMode 및 filterable)을 노출합니다.
속성 allowedFiltering을 사용하면 다음 옵션을 지정할 수 있습니다.
- false- 해당 그리드에 대한 필터링이 비활성화됩니다. /기본값/
- true- 해당 그리드에 대한 필터링이 활성화됩니다.
AllowAdvancedFiltering 속성을 사용하면 다음 옵션을 지정할 수 있습니다.
- false- 해당 그리드에 대한 고급 필터링이 비활성화됩니다. /기본값/
- true- 해당 그리드에 대한 고급 필터링이 활성화됩니다.
filterMode 속성을 사용하면 다음 옵션을 지정할 수 있습니다.
- QuickFilter- 단순한 필터링 UI입니다. /기본값/
- excelStyleFilter- Excel과 유사한 필터링 UI입니다.
필터링 가능한 속성을 사용하면 다음 옵션을 지정할 수 있습니다.
- 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>
그러나 고급 필터링을 활성화하려면 allowAdvancedFiltering 입력 속성을 true로 설정해야 합니다.
<igx-grid [data]="data" [autoGenerate]="true" [allowAdvancedFiltering]="true">
</igx-grid>
Note
그리드에서 quickFilter / excelStyleFilter와 고급 필터링 사용자 인터페이스를 모두 활성화할 수 있습니다. 두 필터링 사용자 인터페이스는 서로 독립적으로 작동합니다. 그리드의 최종 필터링된 결과는 두 필터 결과 간의 교차점입니다.
Interaction
특정 열에 대한 필터 행을 열려면 헤더 아래의 '필터' 칩을 클릭해야 합니다. 조건을 추가하려면 입력 왼쪽의 드롭다운을 사용하여 필터 피연산자를 선택하고 값을 입력해야 합니다. number 및 date 열의 경우 기본적으로 '같음'이 선택되고, string의 경우 '포함', boolean의 경우 '모두'가 선택됩니다. 'Enter'를 누르면 조건이 확인되고 이제 다른 조건을 추가할 수 있습니다. '조건' 칩 사이에는 논리 연산자를 결정하는 드롭다운이 있으며 기본적으로 'AND'가 선택됩니다. 조건을 제거하려면 칩의 'X' 버튼을 클릭하고, 편집하려면 칩을 선택해야 하며 입력이 칩의 데이터로 채워집니다. 필터 행이 열려 있는 동안 필터링 가능한 열의 헤더를 클릭하여 선택하고 필터 조건을 추가할 수 있습니다.
일부 필터링 조건이 열에 적용되고 필터 행이 닫혀 있는 동안 칩의 닫기 버튼을 클릭하여 조건을 제거하거나 칩 중 하나를 선택하여 필터 행을 열 수 있습니다. 모든 조건을 표시할 공간이 충분하지 않은 경우 추가 조건 수를 나타내는 배지와 함께 필터 아이콘이 표시됩니다. 필터 행을 열기 위해 클릭할 수도 있습니다.
Usage
개발자가 자체 구현으로 대체할 수 있는 모든 표준 필터링 조건은 물론 기본 필터링 전략도 기본적으로 제공됩니다. 또한 사용자 정의 필터링 조건을 쉽게 연결할 수 있는 방법도 제공했습니다. 현재 그리드는 단순한 필터링 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>
Note
string 유형의 값이 dataType Date 열에서 사용되는 경우 Grid는 해당 값을 Date 객체로 구문 분석하지 않으며 필터링 조건을 사용할 수 없습니다. string 객체를 사용하려면 값을 Date 객체로 구문 분석하기 위해 애플리케이션 수준에서 추가 논리를 구현해야 합니다.
Grid API를 통해 모든 열 또는 열 조합을 필터링할 수 있습니다. Grid는 이 작업을 위해 filter, filterGlobal 및 clearFilter 같은 여러 메서드를 노출합니다.
filter- 단일 열 또는 열 조합을 필터링합니다.
5개의 필터링 피연산자 클래스가 노출되어 있습니다.
IgxFilteringOperand: 사용자 정의 필터링 조건을 정의할 때 상속될 수 있는 기본 필터링 피연산자입니다.IgxBooleanFilteringOperand boolean유형에 대한 모든 기본 필터링 조건을 정의합니다.IgxNumberFilteringOperand numeric유형에 대한 모든 기본 필터링 조건을 정의합니다.IgxStringFilteringOperand string유형에 대한 모든 기본 필터링 조건을 정의합니다.IgxDateFilteringOperand Date유형에 대한 모든 기본 필터링 조건을 정의합니다.
// Single column filtering
// Filter the `ProductName` column for values which `contains` the `myproduct` substring, ignoring case
this.grid.filter('ProductName', 'myproduct', IgxStringFilteringOperand.instance().condition('contains'), true);
유일한 필수 매개변수는 열 필드 키와 필터링 용어입니다. 조건과 대소문자 구분은 모두 제공되지 않은 경우 열 속성에서 추론됩니다. 다중 필터링의 경우 메서드는 필터링 표현식의 배열을 허용합니다.
Note
필터링 작업은 그리드의 기본 데이터 소스를 변경 하지 않습니다.
// Multi column filtering
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;
filterGlobal- 기존 필터를 모두 지우고 모든 그리드 열에 새 필터링 조건을 적용합니다.
// Filter all cells for a value which contains `myproduct`
this.grid.filteringLogic = FilteringLogic.Or;
this.grid.filterGlobal('myproduct', IgxStringFilteringOperand.instance().condition('contains'), false);
clearFilter- 대상 열에 적용된 필터링을 모두 제거합니다. 인수 없이 호출하면 모든 열의 필터링이 지워집니다.
// Remove the filtering state from the ProductName column
this.grid.clearFilter('ProductName');
// Clears the filtering state from all columns
this.grid.clearFilter();
Initial filtered state
Grid의 초기 필터링 상태를 설정하려면 필터링할 각 열에 대해 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();
}
Filtering logic
Grid의 filteringLogic 속성은 Grid에서 여러 열 필터링을 해결하는 방법을 제어합니다. Grid API 또는 Grid 입력 속성을 통해 언제든지 변경할 수 있습니다.
import { FilteringLogic } from 'igniteui-angular';
// import { FilteringLogic } from '@infragistics/igniteui-angular'; for licensed package
...
this.grid.filteringLogic = FilteringLogic.OR;
AND의 기본값은 현재 적용된 모든 필터링 표현식과 일치하는 행만 반환합니다. 위의 예에 따르면 'ProductName' 셀 값에 'myproduct'가 포함되고 'Price' 셀 값이 55보다 큰 경우 행이 반환됩니다.
OR로 설정하면 'ProductName' 셀 값에 'myproduct'가 포함되거나 'Price' 셀 값이 55보다 큰 경우 행이 반환됩니다.
Remote Filtering
그리드는 Grid Remote Data Operations 항목에 설명된 원격 필터링을 지원합니다.
Custom Filtering Operands
필터링 피연산자를 추가, 제거 또는 수정하여 필터링 메뉴를 사용자 정의할 수 있습니다. 기본적으로 필터링 메뉴에는 열의 데이터 유형(IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxNumberFilteringOperand 및 IgxStringFilteringOperand)을 기반으로 하는 특정 피연산자가 포함되어 있습니다. 이러한 클래스 또는 기본 클래스 IgxFilteringOperand 확장하여 필터링 메뉴 항목의 동작을 변경할 수 있습니다.
아래 샘플에서 "제품 이름" 및 "단종" 열 필터 메뉴를 검사하세요. "Discontinued" 열 필터의 경우 피연산자 수를 All, True 및 False로 제한했습니다. "제품 이름" 열 필터의 경우 대소문자 구분 검색을 수행하도록 포함 및 포함하지 않음 피연산자 논리를 수정하고 비어 있음 및 비어 있지 않음 피연산자도 추가했습니다.
이를 수행하려면 IgxStringFilteringOperand 및 IgxBooleanFilteringOperand 확장하고, 연산과 해당 논리를 수정하고, 열 filters 입력을 새 피연산자로 설정합니다.
// grid-custom-filtering.component.ts
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 = [
// 'Empty'
this.operations[6],
// 'Not Empty'
this.operations[7]
];
this.operations = customOperations.concat(emptyOperators);
}
}
export class BooleanFilteringOperand extends IgxBooleanFilteringOperand {
private constructor() {
super();
this.operations = [
// 'All'
this.operations[0],
// 'TRUE'
this.operations[1],
// 'FALSE'
this.operations[2]
];
}
}
<!-- grid-custom-filtering.component.html -->
<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>
Re-templating filter cell
필터 셀을 다시 템플릿화하기 위해 igxFilterCellTemplate으로 표시된 템플릿을 추가할 수 있습니다. 아래 샘플에서는 문자열 열에 입력이 추가되고 날짜 열에 IgxDatePicker가 추가됩니다. 사용자가 값을 입력하거나 선택하면 문자열 열에 대한 포함 연산자와 날짜 열에 대한 같음 연산자가 있는 필터가 그리드의 공개 API를 사용하여 적용됩니다.
스타일링
필터링 행 스타일 지정을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
가장 간단한 접근 방식에 따라 우리는 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
);
보시 grid-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
);
이 예에서는 입력 그룹과 버튼에 대한 매개변수 중 일부만 변경했지만 input-group-theme와 button-theme 각각의 스타일을 제어할 수 있는 훨씬 더 많은 매개변수를 제공합니다.
마지막 단계는 각각 해당 테마가 있는 구성 요소 믹스인을 포함하는 것입니다. 또한 입력 자리 표시자의 색상 속성을 설정합니다.
@include grid($custom-grid);
.igx-grid__filtering-row {
@include button($dark-button);
@include input-group($dark-input-group);
.igx-input-group__input::placeholder {
color: #FFCD0F;
}
}
Note
우리는 범위를 지정합니다 igx 버튼 그리고 igx-입력-그룹 내부의 믹스인.igx-grid__filtering-row, 필터링 행 버튼과 해당 입력 그룹에만 스타일이 지정됩니다. 그렇지 않으면 그리드의 다른 버튼과 입력 그룹도 영향을 받습니다.
Note
구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다.
:host {
::ng-deep {
@include grid($custom-grid);
.igx-grid__filtering-row {
@include button($dark-button);
@include input-group($dark-input-group);
.igx-input-group__input::placeholder {
color: #FFCD0F;
}
}
}
}
Defining a color palette
방금 했던 것처럼 색상 값을 하드코딩하는 대신 igx-palette 및 igx-color 기능을 사용하면 색상 측면에서 더 큰 유연성을 얻을 수 있습니다.
igx-palette 전달된 기본 색상과 보조 색상을 기반으로 색상 팔레트를 생성합니다.
$yellow-color: #FFCD0F;
$black-color: #292826;
$dark-palette: palette($primary: $black-color, $secondary: $yellow-color);
그런 다음 igx-color 사용하면 팔레트에서 색상을 쉽게 검색할 수 있습니다.
$custom-grid: grid-theme(
$filtering-row-text-color: color($dark-palette, "primary", 400),
$filtering-row-background: color($dark-palette, "secondary", 400),
$filtering-header-text-color: color($dark-palette, "primary", 400),
$filtering-header-background: color($dark-palette, "secondary", 400)
);
$dark-input-group: input-group-theme(
$box-background: color($dark-palette, "secondary", 400),
$idle-text-color: color($dark-palette, "primary", 400),
$focused-text-color: color($dark-palette, "primary", 400),
$filled-text-color: color($dark-palette, "primary", 400)
);
$dark-button: button-theme(
$flat-background: color($dark-palette, "secondary", 400),
$flat-text-color: color($dark-palette, "primary", 400),
$flat-hover-background: color($dark-palette, "primary", 400),
$flat-hover-text-color: color($dark-palette, "secondary", 400)
);
Note
igx-color 및 igx-palette 색상을 생성하고 검색하는 강력한 기능입니다. 사용 방법에 대한 자세한 지침은 Palettes 항목을 참조하세요.
Using Schemas
테마 엔진을 사용하면 스키마의 이점을 활용하는 강력하고 유연한 구조를 구축할 수 있습니다. 스키마는 테마의 레시피입니다.
모든 구성 요소(이 경우 light-grid, light-input-group 및 light-button 스키마)에 대해 제공되는 두 가지 사전 정의된 스키마 중 하나를 확장합니다.
// Extending the light grid schema
$custom-grid-schema: extend($_light-grid,
(
filtering-row-text-color:(
color: ("primary", 400)
),
filtering-row-background:(
color: ("secondary", 400)
),
filtering-header-text-color:(
color: ("primary", 400)
),
filtering-header-background:(
color: ("secondary", 400)
)
)
);
// Extending the light input group schema
$custom-input-group-schema: extend($_light-input-group,
(
box-background:(
color: ("secondary", 400)
),
idle-text-color:(
color: ("primary", 400)
),
focused-text-color:(
color: ("primary", 400)
),
filled-text-color:(
color: ("primary", 400)
)
)
);
// Extending the light button schema
$custom-button-schema: extend($_light-button,
(
flat-background:(
color: ("secondary", 400)
),
flat-text-color:(
color: ("primary", 400)
),
flat-hover-background:(
color: ("primary", 400)
),
flat-hover-text-color:(
color: ("secondary", 400)
)
)
);
사용자 정의 스키마를 적용하려면 다음을 수행해야 합니다. 연장하다 전역 변수 중 하나(light 또는 dark)는 기본적으로 사용자 정의 스키마를 사용하여 구성 요소를 지적한 후 해당 구성 요소 테마에 추가합니다.
// Extending the global light-schema
$custom-light-schema: extend($light-schema,(
igx-grid: $custom-grid-schema,
igx-input-group: $custom-input-group-schema,
igx-button: $custom-button-schema
));
// Defining grid-theme with the global light schema
$custom-grid: grid-theme(
$palette: $dark-palette,
$schema: $custom-light-schema
);
// Defining button-theme with the global light schema
$custom-button: button-theme(
$palette: $dark-palette,
$schema: $custom-light-schema
);
// Defining input-group-theme with the global light schema
$custom-input-group: input-group-theme(
$palette: $dark-palette,
$schema: $custom-light-schema
);
위에서 설명한 것과 동일한 방식으로 테마를 포함하는 것을 잊지 마십시오.
Demo
Note
샘플은 Change Theme에서 선택한 전역 테마의 영향을 받지 않습니다.
Known Limitations
Note
Firefox와 같은 일부 브라우저는 그룹화 구분 기호를 고려하여 지역별 소수 구분 기호를 구문 분석하지 못하여 유효하지 않게 됩니다. 숫자 열 필터 값에 이러한 값을 입력하면 숫자의 유효한 부분만 필터링 표현식에 적용됩니다. 자세한 내용은 Firefox 문제를 참조하세요.
Breaking Changes in 6.1.0
- IgxGrid
filteringExpressions속성이 제거되었습니다. 대신filteringExpressionsTree사용하세요. filter_multiple메소드가 제거되었습니다. 대신filter메서드와filteringExpressionsTree속성을 사용하세요.-
filter메소드에 새로운 서명이 있습니다. 이제 다음 매개변수를 허용합니다.name- 필터링할 열의 이름입니다.value- 필터링에 사용되는 값입니다.conditionOrExpressionTree(선택 사항) - 이 매개 변수는IFilteringOperation또는IFilteringExpressionsTree유형의 개체를 허용합니다. 간단한 필터링만 필요한 경우 필터링 작업을 인수로 전달할 수 있습니다. 고급 필터링의 경우 복잡한 필터링 논리가 포함된 표현식 트리를 인수로 전달할 수 있습니다.ignoreCase(선택 사항) - 필터링이 대소문자를 구분하는지 여부입니다.
filteringDone이벤트에는 이제 필터링된 열의 필터링 상태를 포함하는IFilteringExpressionsTree유형의 매개 변수가 하나만 있습니다.- 필터링 피연산자:
IFilteringExpression조건 속성은 더 이상 필터링 조건 메서드에 대한 직접 참조가 아니라IFilteringOperation에 대한 참조입니다. - 이제
IgxColumnComponent IgxFilteringOperand클래스 참조를 사용하는filters속성을 노출합니다. -
IgxFilteringOperand의operations속성을IFilteringOperation유형의 작업으로 채워 그리드 열에 사용자 지정 필터를 제공할 수 있습니다.
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub