Web Components 트리 그리드 검색 필터 -Ignite UI for Web Components

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

Web Components Search Example

다음 예제에서는 모든 열과 행에서 검색할 수 있는 검색 입력 상자와 각 열에 대한 특정 필터링 옵션을 나타냅니다 IgcTreeGridComponent.

Web Components Search Usage

Tree Grid Setup

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

<igc-tree-grid id="treeGrid" auto-generate="false" primary-key="ID" foreign-key="ParentID" allow-filtering="true" height="100%" width="100%">
    <igc-column field="Name" data-type="string" sortable="true"></igc-column>        
    <igc-column field="ID" data-type="number" sortable="true"></igc-column>        
    <igc-column field="Title" data-type="string" sortable="true"></igc-column>        
    <igc-column field="Age" data-type="number" sortable="true"></igc-column>        
    <igc-column field="HireDate" data-type="date" sortable="true"></igc-column>        
</igc-tree-grid>

private treeGrid: IgcTreeGridComponent;

constructor() {
    this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
    this.treeGrid.data = new EmployeesFlatData();
}

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

private treeGrid: IgcTreeGridComponent;    

private searchBox: IgcInputComponent;

private icon: IgcIconComponent;
private nextIconButton: IgcIconButtonComponent;
private prevIconButton: IgcIconButtonComponent;

private caseSensitiveChip: IgcChipComponent;
private exactMatchChip: IgcChipComponent;

이제 검색 입력을 만들어 보겠습니다! 입력 요소를 가져와 현재 값을 얻을 수 있습니다. 이렇게 하면 the IgcTreeGridComponent 's FindNext 및 FindPrev 메서드를 사용하여 의 SearchText 모든 발생을 강조 표시하고 다음/이전 항목으로 스크롤할 수 있습니다(호출한 메서드에 따라 다름).

와 메서드 FindNext FindPrev 모두 세 가지 인수가 있습니다.

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

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

위의 메소드는 숫자 값 (주어진 문자열을 포함하는 횟수 IgcTreeGridComponent)을 반환합니다.

<igc-input id="searchBox" name="searchBox">
</igc-input>

constructor() {
    this.searchBox = document.getElementById('searchBox') as IgcInputComponent;
    this.caseSensitiveChip = document.getElementById('caseSensitiveChip') as IgcChipComponent;
    this.exactMatchChip = document.getElementById('exactMatchChip') as IgcChipComponent;
}

public nextSearch() {
    this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}

Add Search Buttons

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

<igc-icon-button id="prevIconBtn" variant="flat" name="prev" collection="material" ></igc-icon-button>
<igc-icon-button id="nextIconBtn" variant="flat" name="next" collection="material"></igc-icon-button>

constructor() {
    this.nextIconButton = document.getElementById('nextIconBtn') as IgcIconButtonComponent;
    this.prevIconButton = document.getElementById('prevIconBtn') as IgcIconButtonComponent;
    this.nextIconButton.addEventListener("click", this.nextSearch);
    this.prevIconButton.addEventListener("click", this.prevSearch);
}

public prevSearch() {
    this.treeGrid.findPrev(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}

public nextSearch() {
    this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}

Add Keyboard Search

또한 사용자가 키보드의 화살표 키와 들어가다 열쇠. 이를 달성하기 위해 키다운 입력의 기본 캐럿 이동을 방지하여 검색 입력의 이벤트를 PreventDefault 메서드를 호출하고 FindNext / FindPrev 사용자가 누른 키에 따라 메서드가 있습니다.

<igc-input id="searchBox" name="searchBox">
</igc-input>

constructor() {
    this.searchBox = document.getElementById('searchBox') as IgcInputComponent;

    this.searchBox.addEventListener("keydown", (evt) => { this.onSearchKeydown(evt); });
    this.searchBox.addEventListener("igcInput", (evt) => {
        this.treeGrid.findNext(evt.detail, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
    });
}

public onSearchKeydown(evt: KeyboardEvent) {  
    if (evt.key === 'Enter' || evt.key === 'ArrowDown') {
        evt.preventDefault();
        this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
    } else if (evt.key === 'ArrowUp') {
        evt.preventDefault();
        this.treeGrid.findPrev(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
    }
}

Case Sensitive and Exact Match

이제 사용자가 검색이 대소문자를 구분해야 하는지 및/또는 정확히 일치해야 하는지 선택할 수 있도록 허용해 보겠습니다. 이를 위해 simple selectable Chips을 사용하고 이벤트에 바인딩 igcSelect 하여 사용자가 상호 작용할 때를 확인할 수 있습니다.

<igc-chip selectable="true" id="caseSensitiveChip">Case Sensitive</igc-chip>
<igc-chip selectable="true" id="exactMatchChip">Exact Match</igc-chip>

constructor() {
    this.caseSensitiveChip = document.getElementById('caseSensitiveChip') as IgcChipComponent;
    this.exactMatchChip = document.getElementById('exactMatchChip') as IgcChipComponent;

    this.caseSensitiveChip.addEventListener("igcSelect", (evt) => {
        this.treeGrid.findNext(this.searchBox.value, evt.detail, this.exactMatchChip.selected);
    });
    this.exactMatchChip.addEventListener("igcSelect", (evt) => {
        this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, evt.detail);
    });
}

Persistence

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

Adding icons

다른 구성 요소 중 일부를 사용하여 풍부한 사용자 인터페이스를 만들고 전체 검색 창의 전반적인 디자인을 개선할 수 있습니다! 검색 입력 왼쪽에 멋진 검색 또는 삭제 아이콘, 검색 옵션을 위한 몇 개의 칩, 오른쪽 탐색을 위한 멋진 리플 스타일 버튼과 결합된 일부 재료 디자인 아이콘을 가질 수 있습니다.

import { defineComponents, IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconButtonComponent, registerIconFromText } from "igniteui-webcomponents";

defineComponents(IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconButtonComponent);

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

<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)="@@igObjectRef.findNext(searchText, caseSensitive, exactMatch)"
        (keydown)="searchKeyDown($event)" />

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

    </igx-suffix>
</igx-input-group>

우리는 모든 구성 요소를 안에 IgcInputComponent 감쌀 것입니다. 왼쪽에서는 검색과 삭제/지우기 아이콘 사이를 전환합니다(검색 입력이 비어 있는지 여부에 따라 다름). 중앙에 입력 자체를 배치합니다. 또한 삭제 아이콘을 클릭할 때마다 our SearchText를 업데이트하고 the IgcTreeGridComponent의 ClearSearch 메서드를 호출하여 강조 표시를 지웁니다.

<igc-input id="searchBox" name="searchBox">
    <igc-icon id="icon" slot="prefix" name="search" collection="material"></igc-icon>
    <div slot="suffix">
        <igc-chip selectable="true" id="caseSensitiveChip">Case Sensitive</igc-chip>
        <igc-chip selectable="true" id="exactMatchChip">Exact Match</igc-chip>
    </div>
    <div slot="suffix">
        <igc-icon-button id="prevIconBtn" variant="flat" name="prev" collection="material" ></igc-icon-button>
        <igc-icon-button id="nextIconBtn" variant="flat" name="next" collection="material"></igc-icon-button>
    </div>
</igc-input>

constructor() {
    const prevIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'></path></svg>";
    const nextIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'></path></svg>";
    const searchIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' /></svg>";
    const clearIconText = "<svg width='24' height='24' viewBox='0 0 24 24' title='Clear'><path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'></path></svg>";

    registerIconFromText('prev', prevIconText, 'material');
    registerIconFromText('next', nextIconText, 'material');
    registerIconFromText('search', searchIconText, 'material');
    registerIconFromText('clear', clearIconText, 'material');

    this.icon = document.getElementById('icon') as IgcIconComponent;
    this.searchBox = document.getElementById('searchBox') as IgcInputComponent;

    this.searchBox.addEventListener('igcInput', (evt) => {
        this.icon.name = evt.detail ? 'clear' : 'search';
    });
    this.icon.addEventListener('click', this.clearSearch);
}

public clearSearch() {
    this.searchBox.value = '';
    this.icon.name = 'search';
    this.treeGrid.clearSearch();
}

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

및 ExactMatch 속성을 토글 CaseSensitive 하는 몇 가지 칩을 표시합니다. 체크박스를 두 개의 스타일리시한 칩으로 교체했습니다. 칩을 클릭할 때마다 해당 핸들러를 호출합니다.

<div slot="suffix">
    <igc-chip selectable="true" id="caseSensitiveChip">Case Sensitive</igc-chip>
    <igc-chip selectable="true" id="exactMatchChip">Exact Match</igc-chip>
</div>

constructor() {
    this.caseSensitiveChip = document.getElementById('caseSensitiveChip') as IgcChipComponent;
    this.exactMatchChip = document.getElementById('exactMatchChip') as IgcChipComponent;

    this.caseSensitiveChip.addEventListener('igcSelect', (evt) => {
        this.treeGrid.findNext(this.searchBox.value, evt.detail, this.exactMatchChip.selected);
    });
    this.exactMatchChip.addEventListener('igcSelect', (evt) => {
        this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, evt.detail);
    });
}

검색 탐색 버튼의 경우 재질 아이콘이 있는 두 개의 잔물결 스타일 버튼을 추가했습니다. 클릭 이벤트에 대한 핸들러는 동일하게 유지되며 / FindNext FindPrev methods를 호출합니다.

<div slot="suffix">
    <igc-icon-button id="prevIconBtn" variant="flat" name="prev" collection="material" ></igc-icon-button>
    <igc-icon-button id="nextIconBtn" variant="flat" name="next" collection="material"></igc-icon-button>
</div>

constructor() {
    const nextIconButton = this.nextIconButton = document.getElementById('nextIconBtn') as IgcIconButtonComponent;
    const prevIconButton = this.prevIconButton = document.getElementById('prevIconBtn') as IgcIconButtonComponent;
    nextIconButton.addEventListener("click", this.nextSearch);
    prevIconButton.addEventListener("click", this.prevSearch);
}

public prevSearch() {
    this.treeGrid.findPrev(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}

public nextSearch() {
    this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}

Known Limitations

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

API References

이 기사에서는 검색 결과 사이를 탐색할 때 몇 가지 추가 기능과 함께 자체 검색 표시줄 IgcTreeGridComponent을 구현했습니다. 또한 아이콘, 칩 및 입력과 같은 몇 가지 추가 Ignite UI for Web Components 구성 요소를 사용했습니다. 검색 API는 다음과 같습니다.

IgcTreeGridComponent methods:

FindNext
FindPrev
ClearSearch
RefreshSearch

IgcColumnComponent properties:

searchable

사용된 관련 API가 포함된 추가 구성요소:

Additional Resources

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

Web Components 트리 그리드 검색 필터