Angular 그리드 검색 필터

Angular Grid 검색을 사용하면 데이터 모음에서 값을 찾는 프로세스가 가능합니다. 우리는 이 기능을 더 쉽게 설정할 수 있도록 하며 더 나은 사용자 경험을 위해 검색 입력 상자, 버튼, 키보드 탐색 및 기타 유용한 기능을 구현할 수 있습니다. 브라우저는 기본적으로 콘텐츠 검색 기능을 제공하지만 대부분의 경우 그리드는 보이지 않는 열과 행을 가상화합니다. 이러한 경우 가상화된 셀은 DOM의 일부가 아니기 때문에 기본 그리드 검색은 가상화된 셀의 데이터를 검색할 수 없습니다. 그리드의 가상화된 콘텐츠를 검색할 수 있는 검색 API를 사용하여 Ignite UI for Angular 확장했습니다.

Angular Search Example

다음 예는 모든 열과 행을 검색할 수 있을 뿐만 아니라 각 열에 대한 특정 필터링 옵션을 허용하는 검색 입력 상자가 있는 그리드를 나타냅니다.

Angular Search Usage

Grid setup

그리드를 생성하고 이를 데이터에 바인딩하는 것부터 시작해 보겠습니다. 또한 우리가 사용할 구성 요소에 대한 몇 가지 사용자 정의 스타일을 추가할 것입니다!

<!--searchgrid.component.html-->

<igx-grid #grid1 id="grid1" [data]="data" [autoGenerate]="false" [allowFiltering]="true">
    <igx-column [field]="'IndustrySector'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'IndustryGroup'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'SectorType'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'KRD'" dataType="number" [sortable]="true"></igx-column>
    <igx-column [field]="'MarketNotion'" dataType="number" [sortable]="true"></igx-column>
    <igx-column [field]="'Date'" dataType="date" [sortable]="true"></igx-column>
</igx-grid>

/* searchgrid.component.css */

.grid__wrapper {
    margin: 15px;
}

.offset {
    margin-bottom: 15px;
}

.resultsText {
    font-size: 0.875rem;
}

.chips {
    margin-left: 5px;
}

.searchButtons {
    margin-left: 5px;
}

좋습니다. 이제 그리드의 검색 API를 준비하겠습니다! 현재 검색된 텍스트를 저장하고 검색이 대소문자를 구분하는지 및/또는 정확히 일치하는지 여부를 저장하는 데 사용할 수 있는 몇 가지 속성을 만들 수 있습니다.

// searchgrid.component.ts

public searchText: string = '';
public caseSensitive: boolean = false;
public exactMatch: boolean = false;

Angular search box input

이제 검색 입력을 만들어 보겠습니다! searchText를 새로 생성된 입력에 ngModel로 바인딩하고 ngModelChange 이벤트를 구독하면 사용자가 수정한 모든 searchText를 감지할 수 있습니다. 이를 통해 그리드의 findNext 및 findPrev 메소드를 사용하여 searchText의 모든 항목을 강조 표시하고 다음/이전 항목으로 스크롤할 수 있습니다(호출한 메소드에 따라 다름).

​findNext 및 findPrev 메소드에는 모두 세 가지 인수가 있습니다.

• text: string (검색하려는 텍스트)
• (선택 사항) caseSensitive: 부울 (검색에서 대소문자를 구분할지 여부, 기본값은 false)
• (선택 사항) exactMatch: 부울 (정확한 일치로 검색해야 하는지 여부, 기본값은 false입니다.)

정확한 일치로 검색할 때 검색 API는 대소문자 구분도 고려하여 searchText와 완전히 일치하는 셀 값만 결과로 강조 표시합니다. 예를 들어 'software' 및 'Software' 문자열은 대소문자 구분을 무시하고 정확히 일치합니다.

위의 메서드는 숫자 값(Grid에 지정된 문자열이 포함된 횟수)을 반환합니다.

<!--searchgrid.component.html-->

<input #search1 id="search1" placeholder="Search" [(ngModel)]="searchText" (ngModelChange)="grid.findNext(searchText, caseSensitive, exactMatch)" />

Display results count

총 결과 수와 함께 현재 발생하는 위치도 표시해 보겠습니다! 그리드의 lastSearchInfo 속성을 사용하여 이를 수행할 수 있습니다. 이 속성은 find 메소드를 사용할 때 자동으로 업데이트됩니다.

• ​grid.lastSearchInfo.matchInfoCache.length 값은 총 결과 수를 제공합니다.
• ​grid.lastSearchInfo.activeMatchIndex 값은 현재 발생(일치)의 인덱스 위치를 제공합니다.

<!--searchgrid.component.html-->

<div class="resultsText" *ngIf="grid.lastSearchInfo">
    <span *ngIf="grid.lastSearchInfo.matchInfoCache.length > 0">
        {{ grid.lastSearchInfo.activeMatchIndex + 1 }} of {{ grid.lastSearchInfo.matchInfoCache.length }} results
    </span>
    <span *ngIf="grid.lastSearchInfo.matchInfoCache.length == 0">
        No results
    </span>
</div>

Add search buttons

검색 결과를 자유롭게 검색하고 탐색하기 위해 버튼의 각 클릭 이벤트 핸들러 내에서 findNext 및 findPrev 메소드를 호출하여 두 개의 버튼을 만들어 보겠습니다.

<!--searchgrid.component.html-->

<div class="searchButtons">
    <input type="button" value="Previous" (click)="grid.findPrev(searchText, caseSensitive, exactMatch)" />
    <input type="button" value="Next" (click)="grid.findNext(searchText, caseSensitive, exactMatch)" />
</div>

Add keyboard search

또한 사용자가 키보드의 화살표 키와 Enter 키를 사용하여 결과를 탐색하도록 허용할 수도 있습니다. 이를 달성하기 위해 우리는 다음을 처리할 수 있습니다. 키다운 PreventDefault() 메소드를 사용하여 입력의 기본 캐럿 이동을 방지하고 findNext / findPrev 사용자가 어떤 키를 눌렀는지에 따라 방법이 달라집니다.

<!--searchgrid.component.html-->

<input #search1 id="search1" placeholder="Search" [(ngModel)]="searchText" (ngModelChange)="grid.findNext(searchText, caseSensitive, exactMatch)"
       (keydown)="searchKeyDown($event)" />

// searchgrid.component.ts

public searchKeyDown(ev) {
    if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') {
        ev.preventDefault();
        this.grid.findNext(this.searchText, this.caseSensitive, this.exactMatch);
    } else if (ev.key === 'ArrowUp' || ev.key === 'ArrowLeft') {
        ev.preventDefault();
        this.grid.findPrev(this.searchText, this.caseSensitive, this.exactMatch);
    }
}

Case sensitive and Exact match

이제 사용자가 검색에서 대소문자를 구분할지 또는 정확히 일치할지 여부를 선택할 수 있도록 하겠습니다. 이를 위해 우리는 바인딩하여 간단한 체크박스 입력을 사용할 수 있습니다. 대소문자 구분 그리고 정확히 일치 입력에 대한 속성 '확인됨 속성을 각각 처리하고 변화 속성을 전환하고 findNext 방법.

<!--searchgrid.component.html-->

<span>Case sensitive</span>
<input type="checkbox" [checked]="caseSensitive" (change)="updateSearch()">

<span>Exact match</span>
<input type="checkbox" [checked]="exactMatch" (change)="updateExactSearch()">

// searchgrid.component.ts

public updateSearch() {
    this.caseSensitive = !this.caseSensitive;
    this.grid.findNext(this.searchText, this.caseSensitive, this.exactMatch);
}

public updateExactSearch() {
    this.exactMatch = !this.exactMatch;
    this.grid.findNext(this.searchText, this.caseSensitive, this.exactMatch);
}

Persistence

그리드를 필터링하고 정렬하거나 레코드를 추가 및 제거하고 싶다면 어떻게 해야 할까요? 이러한 작업 후에는 현재 검색의 하이라이트가 자동으로 업데이트되어 searchText와 일치하는 모든 텍스트에 대해 지속됩니다! 또한 검색은 페이징과 함께 작동하며 그리드의 perPage 속성을 변경하여 강조 표시를 유지합니다.

Adding icons

다른 구성 요소 중 일부를 사용하면 풍부한 사용자 인터페이스를 만들고 전체 검색 창의 전반적인 디자인을 개선할 수 있습니다! 검색 입력 왼쪽에는 멋진 검색 또는 삭제 아이콘이 있고, 검색 옵션을 위한 몇 가지 칩이 있으며, 오른쪽에는 탐색을 위한 멋진 잔물결 스타일 버튼과 결합된 일부 머티리얼 디자인 아이콘이 있습니다. 보다 세련된 디자인을 위해 이러한 구성 요소를 입력 그룹 내에 래핑할 수 있습니다. 이를 위해 IgxInputGroup, IgxIcon, IgxRipple, IgxButton 및 IgxChip 모듈을 가져와 보겠습니다.

// app.module.ts

...
import {
    IgxGridModule,
    IgxInputGroupModule,
    IgxIconModule,
    IgxRippleModule,
    IgxButtonModule,
    IgxChipsModule
} from 'igniteui-angular';
// import { 
//    IgxInputGroupModule,
//    IgxIconModule,
//    IgxRippleModule,
//    IgxButtonModule,
//    IgxChipsModule
// } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxInputGroupModule, IgxIconModule, IgxRippleModule, IgxButtonModule, IgxChipsModule],
})
export class AppModule {}

마지막으로 템플릿을 새로운 구성요소로 업데이트해 보겠습니다.

모든 구성요소를 IgxInputGroup 내부에 래핑하겠습니다. 왼쪽에서는 검색과 삭제/지우기 아이콘 사이를 전환합니다(검색 입력이 비어 있는지 여부에 따라). 중앙에는 입력 자체를 배치합니다. 또한 삭제 아이콘을 클릭할 때마다 searchText를 업데이트하고 Grid의 clearSearch 메서드를 호출하여 강조 표시를 지웁니다.

<!--searchgrid.component.html-->

<igx-input-group type="search" class="offset">
    <igx-prefix>
        <igx-icon *ngIf="searchText.length == 0">search</igx-icon>
        <igx-icon *ngIf="searchText.length > 0" (click)="clearSearch()">clear</igx-icon>
    </igx-prefix>

    <input #search1 id="search1" igxInput placeholder="Search" [(ngModel)]="searchText" (ngModelChange)="grid.findNext(searchText, caseSensitive, exactMatch)"
        (keydown)="searchKeyDown($event)" />

    <igx-suffix *ngIf="searchText.length > 0">
        ...
    </igx-suffix>
</igx-input-group>

// searchgrid.component.ts

public clearSearch() {
    this.searchText = '';
    this.grid.clearSearch();
}

입력 그룹 오른쪽에 다음 목적을 가진 세 개의 별도 컨테이너를 만들어 보겠습니다.

• 검색 결과를 표시합니다.

<!--searchgrid.component.html-->

<igx-suffix *ngIf="searchText.length > 0">
    <div class="resultsText" *ngIf="grid.lastSearchInfo">
        <span *ngIf="grid.lastSearchInfo.matchInfoCache.length > 0">
            {{ grid.lastSearchInfo.activeMatchIndex + 1 }} of {{ grid.lastSearchInfo.matchInfoCache.length }} results
        </span>
        <span *ngIf="grid.lastSearchInfo.matchInfoCache.length == 0">
            No results
        </span>
    </div>
</igx-suffix>

• ​CaseSensitive 및 ExactMatch 속성을 전환하는 몇 가지 칩을 표시합니다. 우리는 체크박스를 이러한 속성에 따라 색상을 변경하는 두 개의 세련된 칩으로 대체했습니다. 칩을 클릭할 때마다 클릭한 칩에 따라 해당 핸들러(updateSearch 또는 updateExactSearch)를 호출합니다.

<!--searchgrid.component.html-->

    ...
    <div class="chips">
        <igx-chips-area>
            <igx-chip (click)="updateSearch()" [color]="caseSensitive? 'lightgrey' : 'rgba(0, 0, 0, .04)'">
                <span>Case Sensitive</span>
            </igx-chip>
            <igx-chip (click)="updateExactSearch()" [color]="exactMatch? 'lightgrey' : 'rgba(0, 0, 0, .04)'">
                <span>Exact Match</span>
            </igx-chip>
        </igx-chips-area>
    </div>
    ...

• 검색 탐색 버튼의 경우 입력을 머티리얼 아이콘이 있는 잔물결 스타일 버튼으로 변환했습니다. 클릭 이벤트에 대한 핸들러는 동일하게 유지되며 findNext / findPrev 메소드를 호출합니다.

<!--searchgrid.component.html-->

<igx-suffix>
    <div class="searchButtons">
        <button igxIconButton="flat" igxRipple igxRippleCentered="true" (click)="grid.findPrev(searchText, caseSensitive, exactMatch)">
            <igx-icon fontSet="material">navigate_before</igx-icon>
        </button>
        <button igxIconButton="flat" igxRipple igxRippleCentered="true" (click)="grid.findNext(searchText, caseSensitive, exactMatch)">
            <igx-icon fontSet="material">navigate_next</igx-icon>
        </button>
    </div>
</igx-suffix>

Known Limitations

한정	설명
템플릿을 사용하여 셀에서 검색	검색 기능 강조 표시는 기본 셀 템플릿에서만 작동합니다. 사용자 정의 셀 템플릿이 포함된 열이 있는 경우 강조 표시가 작동하지 않으므로 열 포맷터와 같은 대체 접근 방식을 사용하거나searchable 열의 속성을 false로 설정합니다.
원격 가상화	원격 가상화를 사용하면 검색이 제대로 작동하지 않습니다.
텍스트가 잘린 셀	셀의 텍스트가 너무 커서 맞지 않고 찾고 있는 텍스트가 줄임표로 잘려도 셀로 스크롤하여 일치 횟수에 포함시키지만 아무것도 강조 표시되지 않습니다.

API References

이 기사에서는 검색 결과 사이를 탐색할 때 몇 가지 추가 기능을 갖춘 그리드용 자체 검색 창을 구현했습니다. 또한 아이콘, 칩, 입력과 같은 Ignite UI for Angular 사용했습니다. 검색 API는 다음과 같습니다.

IgxGridComponent methods:

• 다음 찾기
• find이전
• 클리어서치
• 새로고침검색

IgxGridCell methods:

IgxColumnComponent properties:

• 검색 가능

ISearchInfo

사용된 관련 API가 포함된 추가 구성 요소 및/또는 지시어:

• IgxInputGroupComponent
• IgxIconComponent
• IgxRipple 지시어
• IgxButton 지시어
• IgxChip구성 요소

Styles:

• IgxGrid구성 요소 스타일
• IgxInputGroupComponent 스타일
• IgxIconComponent 스타일
• IgxRipple 지시문 스타일
• IgxButton지시문 스타일
• IgxChipComponent 스타일

Additional Resources

• 그리드 개요
• 가상화 및 성능
• 필터링
• 페이징
• 정렬
• 요약
• 열 이동
• 열 고정
• 열 크기 조정
• 선택

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub