Angular 그리드 고급 필터링
고급 필터링은 Grid와 같은 Angular 테이블의 모든 열에 걸쳐 필터링 조건이 있는 그룹을 생성할 수 있는 대화 상자를 제공합니다.
Angular Grid Advanced Filtering Example
Interaction
고급 필터링 대화 상자를 열려면 그리드 도구 모음에서 고급 필터링 버튼을 클릭해야 합니다. 대화 상자는 IgxQueryBuilder 구성 요소를 사용하여 필터링 논리를 생성, 표시 및 편집합니다. 상호 작용 프로세스에 대한 자세한 내용은 Query Builder topic 참조하세요.
필터링 조건 및 그룹을 생성할 준비가 된 후 데이터를 필터링하려면 적용 버튼을 클릭해야 합니다. 고급 필터를 수정했지만 변경 사항을 유지하지 않으려면 취소 버튼을 클릭해야 합니다. 필터 지우기 버튼을 클릭하여 고급 필터를 지울 수도 있습니다.
Usage
고급 필터링을 활성화하려면 allowAdvancedFiltering 입력 속성을 true로 설정해야 합니다.
<igx-grid [data]="data" [autoGenerate]="true" [allowAdvancedFiltering]="true">
<igx-grid-toolbar></igx-grid-toolbar>
</igx-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.grid.advancedFilteringExpressionsTree = tree;
}
그리드 도구 모음을 표시하지 않으려는 경우 openAdvancedFilteringDialog 및 closeAdvancedFilteringDialog 메서드를 사용하여 프로그래밍 방식으로 고급 필터링 대화 상자를 열고 닫을 수 있습니다.
Note
그리드에서 quickFilter / excelStyleFilter와 고급 필터링 사용자 인터페이스를 모두 활성화할 수 있습니다. 두 필터링 사용자 인터페이스는 서로 독립적으로 작동합니다. 그리드의 최종 필터링된 결과는 두 필터 결과 간의 교차점입니다.
External Advanced filtering
위의 데모에서 볼 수 있듯이 고급 필터링 대화 상자는 그리드 상단의 오버레이에서 호스팅됩니다. 대화 상자의 설정이 준비되면 적용 또는 닫기 작업으로 인해 해당 대화 상자가 숨겨집니다. 해당 대화 상자를 항상 표시되도록 만드는 방법이 있습니다. 독립형 구성 요소로 사용됩니다. 아래 데모에서는 고급 필터링 대화 상자가 그리드와 별도로 선언되었습니다.
Demo
Usage
그리드 외부에서 작동하도록 고급 필터링을 구성하는 것은 매우 쉽습니다. 대화 상자를 만들고 grid 속성을 설정하기만 하면 됩니다.
<igx-advanced-filtering-dialog [grid]="grid1">
</igx-advanced-filtering-dialog>
또한 드래그 앤 드롭 App Builder ™가 전체 디자인에서 Angular 코드 스토리를 어떻게 간소화할 수 있는지 확인할 수 있습니다.
스타일링
고급 필터링 대화 상자의 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
고급 필터링 대화 상자는 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 사용하여 이 캡슐화를 penetrate 해야 합니다.
: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;
}
}
}
}
Defining a color palette
방금 했던 것처럼 색상 값을 하드코딩하는 대신 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 색상을 생성하고 검색하는 강력한 기능입니다. 사용 방법에 대한 자세한 지침은 Palettes 항목을 참조하세요.
Using Schemas
테마 엔진을 사용하면 스키마의 이점을 활용하는 강력하고 유연한 구조를 구축할 수 있습니다. 스키마는 테마의 레시피입니다.
모든 구성 요소(이 경우 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
);
위에서 설명한 것과 동일한 방식으로 테마를 포함하는 것을 잊지 마십시오.
Demo
Note
샘플은 Change Theme에서 선택한 전역 테마의 영향을 받지 않습니다.
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub